Designing for usability is critical when creating an icon. Beyond visual appeal, icons must be understandable, communicative and help people quickly complete tasks.
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.
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.Low affordance (left), medium affordance is contained (centre) and highest affordance is elevated with a shadow (right).
Meet expectations. People must be able to accurately predict what will happen before they interact with an icon. Ensure all icons meet peoples' expectations.Highly predictable icons will express unmistakable meaning every time.
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.Examples of common and highly familiar icons.
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.Strategic alignment is required to ensure the meaning of one icon is not misused or confused with another.
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.Adding icon labels improves the usability of primary navigation.