Skip to content
UX Atlas
UI foundationCraft conventionFoundational

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 page
  1. Definition
  2. The icon-only fallacy
  3. Building a consistent set
  4. In practice
  5. Continue from here

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.

In practice

The hamburger debate

Mobile navigation

Testing 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.

The save icon

Legacy metaphors

The 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.

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

A Mobile App

Applied through

Where this shows up as a concrete interface decision.

Principles behind this

The reasoning this solution is an application of.

Related concept

Connected closely enough to change how you apply this.