The Importance of Icons in Web Design

We cannot imagine life without icons. They are everywhere and play a significant role in our lives, even though we don’t notice or register them. These small images are an essential part of our interaction with screens: computers, smartphones, tablets, and other gadgets. Let’s see how icons in web design have become very important feature through the years.

However, icons have been used long before the online era. The truth is that you can see them everywhere. Have you ever thought about road signs as icons? These were some of the very first icons that we started to follow and use to navigate in real life.

But it’s in the computing world where they have become an essential part. Icons convey meaning and are a powerful tool to communicate actions. However, there are some aspects related to icons that directly affect the usability of a website. Not all icons are valid, and not all users are meant to understand them.

There are some best practices when it comes to icons for web design that will help you enhance the user experience. But first, let’s have a look at icons’ past to understand why they are so important nowadays in web design.

From religious iconography to our computer desktop

Not many people know that the word “icon” was initially used in the religious field to refer to the imagery that depicted holy figures: sculptures, paintings, etc.

However, it’s with the first computers’ appearance more than 40 years ago when icons (as we know them) first emerged.

Xerox Star- The pioneer

The first GUI (Graphical User Interface) was used in the 1970s by Xerox, and at the beginning of the ’80s, they developed the first computer with graphical icons, the Xerox Star.

Image source: Interaction Design Foundation

Apple Lisa and Susan Kare’s icons: a fun touch

In 1983, Susan Kare’s approachable and fun designs gave Apple Lisa’s interface a relaxed look. Little did Kare knew that her icons would set a precedent in the history of GUI. Some of them are still used in our desktops. Back there, icons were flat and black and white.

Image source: Susan Kare. Graphic Design (Website)

The evolution of icons

During the ’80s and ’90s, icons were improved. They were continuously redesigned, incorporating more details, dimensions, and colors. From the 2000s onwards, new icon styles were born. We could see that icons with different textures, a lot of colors, and transparency hit in and turned into a more realistic look.

Visit the web History of Icons for more info about their evolution. This site provides a fun and accurate timeline about how icons in the tech world were born.

The state of icons nowadays

Technology is developing really fast. We’ve come from flat black and white icons to incorporate them in our daily conversations. We can even write a text with emojis and understand it.

We’re so used to icons that we don’t even notice or question them anymore. They are part of our lives and our interaction with websites and interfaces. We can’t understand a site without icons, and we read them as naturally as text.

However, an increase in user interactions means a higher need for best practices when working with icons. So, how to correctly use icons to enhance the user experience and navigation on a website?

Icons in Web Design: Their characteristics

Icons are a powerful visual tool. When used correctly, they enhance the navigation and promote user satisfaction. However, when using them incorrectly, they become annoying and generate unwanted visual noise. That’s why icons are so important in Web Design.

Every designer should know that icons must be simple and concise. But there are also other aspects that determine their success when designing a website.

Icons must be simple

Icons’ main goal is to communicate actions or functions clearly and understandably. Thus, icons with a lot of information may lead to confusion and conflict.

Avoid using too many details. Icons are a metaphor for text. Long and complex texts are hard to understand and affect user experience. Similarly, users will find it difficult to recognize an icon with lots of details. When in doubt, opt for simple designs recognizable at first sight.

Icons must be concise

When texting your friend, how many emojis do you use to communicate? Does each icon have a unique meaning? Let’s think about the winking face . I’m sure you don’t use it always in the same way…

Designs can convey a lot of meanings, depending on the person who reads them. Before using a specific icon, first, think of the multiple meanings it may have and if it would lead to confusion. A well-designed icon must clearly communicate the function it’s used for.

Also, remember that icons must be as compact as possible. On a user interface, space is precious, and there should be enough room for different functions.

Use icons easy to recognize

When choosing the icons for web design, make sure that users recognize the design. To get that, it’s important that the icon’s concept is clear, relatable, and linked to the function or feature it describes.

If an icon is difficult to interpret at first sight, it means users will have to relearn their meaning every time they access the website. And it is not cool.

All Android users, please raise your hands if you got confused the first time you interacted with your phone interface and had no clue about what these meant:

Image: Android navigation buttons. 

Google Docs icons aren’t more precise. At first glance, the user can’t identify what they refer to. Even after working with this app for a long time, some users find their functions challenging to remember:

Image: Google Docs icons. 

That’s one of the problems when using unique icons. New functionalities require new images to represent them. However, it may be tricky for web designers, as unique and different icons may lead to misunderstanding and confusion, affecting user experience.

Use icons that users can understand

When a designer chooses the icons for a website, she or he must pay attention to the concept the icon represents, taking into account the potential users. There are some universal icons used worldwide that are understood by the public in general, although these are just a few.

Among these familiar icons, we can find some like the envelope for an email, or the Word’s well-known diskette for the “save” feature. Some of these icons were born in the last century but last until today, making them an excellent example of well-designed icons. The charge icon is represented by a battery, although these days the use of batteries (as they are known traditionally) has been considerably reduced.

Image: the charge icon.

Icons should benefit the usability 

Icons must help the user to navigate through the website. As technology grows, our impatience is also increasing. We are used to getting things very fast, and if we find something difficult, we don’t even bother to give it a try. Thus, web designs should favor user experience and make it positive.

To enhance the usability of a web, designers must pay attention to aspects such as the meaning behind each icon, where it’s located, if icons help users perform specific actions, etc.

However, when misused, they affect navigation and create unwanted visual noise, failing to provide a positive user experience.

Use text labels

Icons reinforce the message. As the saying goes, “a picture is worth a thousand words.” And in this case, it becomes a reality. An icon can communicate more things than text in a smaller space.

Let’s have a look at the following example: Instagram’s main functions within their interface that allow users to interact with the app (desktop version).

Image: Instagram.

There are four different icons, located in the app’s top-right corner, and occupy little space. However, each of them tells the users to do a different action: go to the main menu, send a direct message to someone, look for more content and accounts, check your interaction. See? They’ve just helped to save a lot of space!

However, not all users understand all icons, especially specific icons of an app or website, because they can have different interpretations. According to UI and UX best practices, a short text should always accompany the icon.

Some interfaces opt for coach marks or a dialogue text that appears on the icon when hovering over. It’s a good idea, but it doesn’t apply to mobile phones, where this option isn’t possible. Therefore, one of the most common solutions to misunderstandings is text labels that indicate users the meaning of a particular icon. In the following examples, text labels appear next to the icons to indicate their functionalities, even though some of them are widely known.

Image: Facebook’s left menu. 

Choose a consistent location

The position matters, and it’s closely related to users’ impatience. We want things easy, so we expect that websites don’t make us relearn icons every time we visit a new page. It’s tiresome.

Thus, it’ll benefit your website if users can find icons where they suppose they should be. For instance, web designers usually place the hamburger menu at the top-left corner, so make sure your menu is there for users.

Location is also important when it comes to text labels. If you decide to use some labels, always place the icon first. The visual impact is higher than the text.

Icons should contribute to the aesthetic 

Although you should choose usability over creativity when it comes to web design, it’s essential that the icons you select follow the site’s style and reinforce it.

All icons must have a similar style or design whenever possible. If you opted for going creative, make sure the style can be clearly identified throughout the site.

Sites like Flaticon offer users the possibility to download family icons in the same style and color, providing consistency to the interface.

Icons must promote diversity

Beyond making everyone feel included, icon diversity is synonymous with usability and enhanced user experience. Failing to provide inclusive icons means excluding potential users.

In the last years, people are breaking out with stereotypical ideas hidden in the language and move towards a more inclusive communication way that reaches everyone. This attempt to promote a diverse language can also be transferred to icons.

Use icons that include as many people as possible. This way, you will help promote a fairer and more inclusive communication, and you’ll get to more people than just by using a white-male icon.

In Conclusion

Icons are small but play a major role on a website. Depending on the icons, a website will be user-friendly or not, and that’s a big deal. When designing a web, and even when designing icons, designers must take into account the power of icons as a visual communicative tool and help users interact with the interface.

Icons have come a long way now and are continuously evolving. We must also make sure that they adapt to modern times and serve to represent new ideas and functionalities effectively. Find in Flaticon the best icons for your next web.