Icon design principles

01Icons are not always clear

Icons without labels are often ambiguous. A symbol that is obvious to its designer may mean something else to another person. Reserve icon-only buttons for very familiar actions, such as close, search or print, and add a text label to important or less common actions.

Familiar metaphors beat novelty. A magnifying glass for search is understood quickly; a clever new symbol must be learned first.

02Keep the set consistent

An icon set looks professional when its members share the same rules:

• Grid: design on one size, such as 24 px, with consistent padding inside the frame.
• Stroke weight: use one stroke width across the set, for example 2 px at 24 px.
• Corner radius: pick one radius and apply it to every icon.
• Optical alignment: circles and triangles often need to be slightly larger or shifted to look the same size as squares.

Use filled and outline versions to show state, for example an outline bookmark when off and a filled one when saved.

Pick one style for the set, outline or filled, and use the other only for meaning. Mixing random styles makes an interface look unfinished. Size matters too: details that read at 48 px turn to mush at 16 px, so draw simple shapes and remove detail that does not carry meaning.

• Test each icon at its smallest size on a real screen.
• Ask a few people from the target audience what an icon means before relying on it.
• Some symbols, such as arrows and the back gesture, should flip in right-to-left interfaces. Others, such as a magnifying glass or a clock, do not.

03Make icon buttons accessible

A button that shows only an icon needs an accessible name, or a screen reader announces nothing useful. Add an <code>aria-label</code> or visually hidden text that describes the action, not the picture: Close, not X.

Size the touch target larger than the glyph. A 24 px icon can sit inside a 44 px tappable area. WCAG 2.2 sets a minimum target size of 24 by 24 CSS px (criterion 2.5.8, level AA), and larger is easier to hit.

1. Decide which actions need a visible label.
2. Draw all icons on one grid, stroke and radius.
3. Add accessible names to icon-only buttons.
4. Enlarge the touch area around each icon.

Decorative icons that sit next to a text label should be hidden from assistive technology, for example with <code>aria-hidden="true"</code>, so the label is not read twice.

04Sources

• W3C. Web Content Accessibility Guidelines (WCAG) 2.2, Success Criterion 2.5.8 Target Size (Minimum). https://www.w3.org/TR/WCAG22/