Skip to content
icons

Usability principles

Designing for usability is critical when creating an icon. Beyond visual appeal, icons must be understandable, communicative and help people quickly complete tasks.

Recognition

Icons should be easily recognised. People must be able to understand what an icon represents. Metaphors must be universally applicable. Never modify third-party iconography or brand marks.

Note: Due to laws, some icons can't be changed–even if they're not easily understood.

A highly recognisable search icon is shown alone.
Highly recognisable search icon.
A less recognisable tyre press icon is shown alone. The icon presents itself as a simplified cross section of a tyre, with bulging sides and an exclamation mark inside.
Less recognisable tyre pressure icon.

Affordance

Ensure icons appear interactive where appropriate. Colour, containers, depth, and clear space are all visual cues that convey an icon's interactivity. The treatment behind or around the icon also creates affordance. Non-interactive icons must be visually subdued to reduce the potential for confusion with interactive icons.

3 tick/confirmation icons are shown in a row. From left to right they progress to being visually more interactive in appearance. The first icon is a simple tick, the centre icon is the same tick within a circle outline, and the icon on the right is the tick, within a white circle, that has been given a subtle drop shadow, to elevate it to the foreground of the screen.
Low affordance (left), medium affordance is contained (centre) and highest affordance is elevated with a shadow (right).

Predictability

Meet expectations. People must be able to accurately predict what will happen before they interact with an icon. Ensure all icons meet peoples' expectations.

3 icons in a row, from left to right they are: settings cog, telephone call, and warning (exclamation mark inside a circle).
Highly predictable icons will express unmistakable meaning every time.

Familiarity

Don't reinvent the wheel. Icons work best when they're familiar, obvious, and tangible. Think convention before invention. New icons must be tested for ‘fit’ and 'effectiveness' before usage.

4 icons in a row, from left to right they are: home, close, calendar, and search.
Examples of common and highly familiar icons.

Mental models

Icon meanings must remain consistent. People remember and rely on their preconceived understandings of what icons represent. We call these understandings 'mental models'.

We must use icons in ways that align with the mental models of our customers. To do this, we begin by understanding the mental models associated with the metaphors and icons we are designing. Once agreed, we use icons coherently to avoid confusing our customers.

4 icons in a row, from left to right they are: heart (like), star (rate), comment (speech bubble), and refresh/repeat (comprised of 2 arrows that form a clockwise circle).
Strategic alignment is required to ensure the meaning of one icon is not misused or confused with another.

Icon labels

Text labels are used alongside some icons. Consider how the text labels work with other labels in the design system. Also consider documenting the maximum character counts for translated content.

System icons are likely to appear without labels. That's because they are more established, familiar, and universally understood.

3 icons in a row, each with a text label underneath it. From left to right they are: home, map (pinpoint), and profile (meaning user profile).
Adding icon labels improves the usability of primary navigation.

/