Iconography
Icons speed recognition for concepts users already know and create guesswork for everything else.
Definition
An icon system is a consistent set of symbols with defined size, stroke weight, style and semantics. Icons support recognition; with very few exceptions they do not establish meaning on their own.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
Reach for this when
- Building or selecting an icon set.
- Deciding whether a control can be icon-only.
- Auditing accessible names.
Common mistakes
- Icon-only controls for anything infrequent.
- Mixed icon styles from different libraries.
- Icons scaled from a much larger design size.
- Missing accessible names.
- Assuming an icon is understood because the team understands it, which is the curse of knowledge in glyph form.
The icon-only fallacy
Only a small number of icons are genuinely universal: search, close, play, home, back and a handful of others. Everything else is learned from context, and testing repeatedly shows that icon-only toolbars produce hesitation and errors.
The reliable pattern is icon plus label. Where space is genuinely unavailable, a tooltip helps pointer users but does nothing on touch, so the label should appear somewhere reachable.
Building a consistent set
- One style throughout: outline or filled, not both, except where filled marks a selected state.
- One stroke weight, and one that holds at the smallest rendered size.
- Consistent optical size rather than identical bounding boxes. A circle needs to be drawn slightly larger than a square to look the same size.
- Design at the size you will use. An icon drawn at 48px and scaled to 16px loses its structure.
- One meaning per icon across the entire product. Reusing a symbol for two concepts breaks the learned association.
Icons that work alone, and icons that never do
Only a small set is universally understood without a label. Everything else needs words, a tooltip at minimum and a visible label ideally.
| Icon | Alone? | Note |
|---|---|---|
| Close, X | Yes | As close to universal as interface icons get |
| Search, magnifier | Yes | Understood across products and cultures |
| Yes | Survives because the object it depicts still exists | |
| Home | Usually | Well established on the web |
| Save, floppy disk | No | Depicts an object most users have never seen |
| Share | No | Three incompatible glyphs are in common use |
| Overflow, three dots | Partly | Recognised as more, not as what is inside |
| Anything domain-specific | No | Label it, always |
In practice
- i.
The hamburger debate
Mobile navigationTesting has repeatedly found that adding the word Menu beside the three-line icon increases navigation engagement. The icon is recognisable; the label is what makes it act like a control.
- ii.
The save icon
Legacy metaphorsThe floppy disk survives because it became a convention, not because the metaphor still works. New icons cannot rely on metaphors the audience does not hold.
- iii.
The icon row nobody could read
Icon-only toolbarsSeven unlabelled icons in a toolbar produced hovering, guessing and avoidance. The same row with labels was wider and used, which is the trade almost every icon-only toolbar is making without measuring it.
Local chart
FND·050 · Region II · Grid D1
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Applied through
Where this shows up as a concrete interface decision.
Principles behind this
The reasoning this solution is an application of.
- Match Between System and the Real WorldHEUR·002 · Heuristic
- Recognition Over RecallHEUR·006 · Heuristic
- Affordances and SignifiersPRIN·007 · Principle
- DiscoverabilityPRIN·005 · Principle
Related concept
Connected closely enough to change how you apply this.
- Accessible NamesA11Y·008 · Accessibility
- Alt TextA11Y·007 · Accessibility
- Design TokensSYS·001 · Design system
- ClosureFND·007 · UI foundation
- Color AccessibilityFND·028 · UI foundation
- Semantic ColorFND·023 · UI foundation
- SimilarityFND·005 · UI foundation