Icons are everywhere, including on whatever screen you’re currently reading this blog post on, and UI designers’ ability to create and use them is one of their most important tools. In fact, iconography is so important, we’ve created a whole article about it.
This guide will teach you the key principles and best practices of effective iconography and some of the pitfalls you’ll want to avoid. But first, let’s look at what iconography is and its importance in UI design.
The importance of iconography in UI: why icons matter
Iconography contributes to effective, user-friendly, and enjoyable digital experiences. These are some of the reasons icons matter:
Icons can enhance usability and navigation
Incorporating universally recognised icons can serve as a visual way to help users identify certain functions and features of a product without the need to explain the functionality with words.
For example, using a shopping cart symbol as the Crate & Barrel website does, intuitively explains that clicking on that icon will bring you to the user’s shopping cart. Likewise, the heart and marker icons also convey that clicking on those icons will lead you to what you’ve liked and where you can find a store, respectively.
Icons support visual hierarchy
Icons can enhance visual hierarchy by providing easily recognizable cues that highlight important information and help users understand what they can do more efficiently.
For example, on the Instagram app there are several icons you can use on each reel or image you encounter — a heart shaped symbol for liking the reel or image, a commenting icon if you want to contribute your comments, and a plane icon if you want to share the video or image, but none of these takes away from the video or image, which dominates the screen.
Icons play a role in accessibility and inclusivity
Icons can play an important role in accessibility and inclusivity because, for some people with visual or cognitive impairments, there’s no better way to understand something than through an icon. The European Accessibility Act (EAA) — which covers a wide range of digital services, including those that do business with the EU — is about to go into effect. The best way for designers to adhere to the EAA is to use the Web Content Accessibility Guidelines (WCAG) to ensure that icons are perceivable, operable, understandable, and robust. This can happen with icons by making sure they avoid unnecessary complexity, have distinct shapes, and provide alternative labels when necessary.
Icons can help establish brand identity
Icons are important for brand identity. After all, if you have a recognisable icon to identify your brand, you’ve got the ability to use the icon without your name. These icons can even evoke emotional reactions as icons for brands evoke emotions of all kinds.
For instance, the Target logo, which is a red bull’s eye, is so recognisable that it’s used instead of Target’s name at the top of the Target website.
The key principles of effective iconography
To communicate well through icons, the key principles of effective iconography for UI designers are:
Clarity
This is one of the most important principles of icon design because icons need to quickly communicate what they mean. So a well-designed icon needs to be able to communicate its message with understandable metaphors, such as a play button to play a video.
Readability
Icons tend to be small, especially on a phone screen, but they have to be readable everywhere. So make it as easy to understand as possible. Don’t include too much detail. Instead, include bold shapes that are easily readable at small sizes.
Simplicity
Simplicity is closely related to readability. You should keep things as simple and succinct as possible when designing icons to make sure that users can understand them right away.
Scalability
Icons should have an impact no matter how big or small they’re presented. You should be able to make your icons scalable to any size and your audience should still understand them.
Consistency
Entire icon families should exist in harmony by adhering to the same stylistic rules. All icons should be the same width and height, have similar stroke thickness, and use consistent colours and fills.
Personality
Icons should be unique and clever about conveying brand identity; this is the icon’s personality. They should be able to be playful, professional, or whatever your brand conveys while still being clear and readable.
Contextual and cultural relevance
Be aware of your audience and their cultural context. Make sure your designs are understandable to a majority of your audience and that you avoid symbols based on references that are no longer in use.
Common iconography pitfalls (and how to avoid them)
Despite UI designers’ best efforts, sometimes iconography goes wrong. Here are some common problems and solutions to avoid them.
Ambiguity or unfamiliarity
The problem here comes from icons that use unclear or ambiguous symbols, causing them to confuse and frustrate users. To avoid this pitfall, make sure you’ve researched your audience and have picked out icons that are recognisable to your users. And make sure that they are represented in a clear and concise way.
Inconsistent Design
Icon systems that don’t follow a set of design rules will no doubt be visually jarring. To avoid this pitfall, make sure to apply size, colour, and other rules to all icons used in your product.
Excessive detail
Excessive detail often makes icons difficult to quickly understand. To avoid this pitfall, make sure to keep icons simple and concise. Icons should represent the essential elements of the concepts they represent. Too much detail, like shadows and gradients, or unnecessary elements, and they become cluttered.
Poor scalability
Icons that don’t work at different sizes can be a problem. To avoid this pitfall, make sure that your icons work at different sizes when designing them.
Iconography best practices
To ensure you keep your icons effective and avoid pitfalls, follow these best practices:
Use a grid
To ensure that icon families are in harmony with one another, use a grid system to keep icons aligned and balanced.
Use icons to save space
Users should be able to understand icons at small sizes, keeping the space they use to convey their information small too. This makes icons a lifesaver because you don’t have to spell out everything on your product. But also make sure that they are accessible, with fat-finger friendly sizes of 44 pixels or above.
Conduct user research
UI designers should perform user research and follow the brand’s guidelines to ensure that their icons match the brand’s personality. If you’re designing icons for a medical practice, for example, you should have dignified colours and visual balance. Your research should tell you what users expect.
Use labels with icons, as needed
While some icons can work without labels, for some, it helps to include a label right beside it or a tooltip when your cursor rolls over it. Don’t be afraid to add these labels for clarity. Labels should be on the right or underneath an icon and there should be enough space so both the icon and label can be seen.