UI/UX Tip 20: Use Icons Appropriately

27 Apr. 22


you can find icons everywhere – on desktops, phones, Androids, iPhones and Windows phones as well as web pages across the Internet. Icons are a visual language.

Icons communicate information about what users should click, how to navigate a page and how they can engage with a digital experience without relying on words.

It is easy to see the demand for consistency in visual language – icons are everywhere – across millions of websites, millions of applications, and millions of product interfaces that consumers have access to.

You can’t simply pick an icon and put it on your website. Or the interface of your app. And expect users to understand what it means. Icons are attractive from a design perspective and efficient in that they use a small amount of space to communicate a complex idea. However, icons must be sparsely used, authentic, scalable, increase usability and inspire interaction.


Icons for


It is a common error to enter a mobile app or web project and find a client wanting an icon for everything. They are visually appealing. They maximize space and make the most of it in a cost-effective, economical way. They give a brand personality. However, too many icons can distract from the overall experience in a number of ways.

Sven Lenaerts wrote in an article entitled Use and Abuuse of Icons In the Modern Age that “One of our most common errors is using too many icon in one setting.” Icons work best when they increase visual interest and catch the user’s eye. Icons help users navigate a webpage. Too many icons can become a decoration. They can be used for navigation on a website, which can lead to dilution.

Icons don’t always have great usability. This is a key point. If icons are used to “decoration” or cause “dilution”, then you have strayed from what icons were intended for: That is, using an icon to communicate a concept, idea, or function clearly and simply.

It can be difficult to understand icons. Although they look great, they can be confusing.


Icons Must Be Authentic


This is an easy point. Icons are part of your brand’s visual language, so they must fit. Key icons can be just as important as your logo for branding.

The logo of Google is the large, uppercase G (in some cases), that graces their search engine as well as other products. Google Drive has Material Icons which serve an important purpose. You can use Google Search, Gmail and Google Calendar to quickly find and access Google Docs. The icons are all consistent with their brands and allow quick access to the most important applications.

Based on your brand guidelines, you may choose a simple or more complex icon. The important thing is that icons are a visual language people can recognize. They must be authentic.


Icons must be scaleable and adaptable


Many icons can be saved in SVG (Scalable Vector Graphics). You can change the appearance of icons by using mouseover or code. It is not necessary to create a new graphic, as they can be edited page-to-page with the same basic assets.

You can use great libraries to pull icons into fonts that scale well. Font Awesome, IcoMoon and The Noun Project are all great libraries. These libraries include a range of vector-based images that can be scaled with responsive experiences. They are also easily adaptable depending on what look you want.


Icons Can Inspire Interaction


A lot of people can be inspired by icons. A shopping cart can be used to encourage people to shop after they’ve finished shopping. It is a visual clue that they will see because it’s familiar and well-known.

You can also use icons to highlight the unique features of a product. In modern user experiences, icons can be interactive with animated GIFs. This is a good idea. Animation, icons, and movement promote curiosity and further exploration. The curiosity of static objects is stimulated when they come to life.

A little movement can give meaning to an icon. A heart icon that begins beating can bring more meaning and interest to an icon than a static one.


Increase Icon Usability


Convention Common icons should be easily recognized. The printer icon means “print” and the bold B is for “bold.” eCommerce websites usually have a shopping cart that allows you to add, delete, or checkout. If you want to make your icons universally understood, they must be consistent. Sometimes it’s okay to be innovative. If the situation calls to innovation, stick with what is familiar.

Consistency- Icons serving the same function across multiple websites should have the same look and feel, even though they may look slightly different. Icons are meant to be simple visual clues that consolidate screen space and not have a lengthy sentence explaining each function or feature of a website.

Labels If you find it more difficult to understand what an icon is than to read the text explaining the same functionality, then your goal of using an icon has been lost. If you need to include text, make sure it counts. There should be no more text if there is a good reason to use an icon.

However, it is often possible to combine an icon and a label to increase usability. Jensen Harris published a piece about the usability and accessibility of Microsoft Outlook 98’s toolbar. He wrote, “Different solutions were tried: new icons; rearrangement of icons; positioning icons under menus from where the commands originated from. One change was enough to make a complete turnaround: Labeling the key toolbar buttons [ . . ] If you think about it, it’s not surprising. It is rare that we rely solely on iconography to represent ideas in the real world. Bathroom doors usually have an icon of a male figure and the word “Men.” Stop signs are marked with the word “Stop”.

Windows, iPhone and Android interfaces often have labels next to icons as part their standard usability guidelines. We already stated that if you find it more difficult to read text than an icon, then you have failed in your goal of using the icon. It is important to balance text and labels.

It all comes down to the details that make experiences unique and combine them to create high-end experiences. You can take your experience seriously by taking icons seriously.

We use cookies to give you tailored experiences on our website. Talk to us for COVID19 Support