Also known as:
Iconography

Icons

Icons are a helpful and familiar visual aid to guide and inform users. Not just for aesthetics, they provide humanity by defining hierarchy for information and shaping a page’s composition, helping to make our product more approachable and usable.

Need to know

  • Use icons for visual shortcuts to increase task speed.
  • Icons are 20px or larger.
  • Maintain a touch target of 48px.
  • Icons always need some form of text label (such as 'alt' text or tooltips).

Interaction states

Disabled30 %
Inactive50 %
Hover70 %
Active100 %
Disabled30 %
Inactive100 %
Hover70 %
Active50 %

Size, spacing and touch targets

Minimum Size
Spacing
Touch Area
Neighbouring Icons

Icons

To keep in mind

Icons are a visual aid or cue. They guide user where to go or what to do. They communicate the core intent of an action. Emotionally, users may prefer pictures, but comprehension is lower. Finally, icons give a sense of personality.

  • By default, icons are 20px in size (minimum) and can be scaled to larger sizes if it contextually makes sense.
  • Maintain a minimum touch target of 48px where appropriate.
  • For spacing between an icon and its label, use 10px.

See icon button for interaction guidelines, such as hover states.

When to use

  • Use icons as a visual shortcut to accelerate people.
  • Use icons to enhance aesthetic, hierarchy and composition of layout design.
  • Icons can assist comprehension across languages.
  • Use icons to reduce labeling/wording to convey meaning.

Positioning and location:

  • Use icons next to control actions (e.g. Export, Print etc.).
  • Use icons when space is at a premium.
  • Conceptually, icons always need a label (screen reader, title tag, alt tag, tooltips).
  • Icons can be used as illustrations (e.g. Drag & Drop or Guidance block).
  • Use icons trigger tooltips.

When not to use

  • Avoid aligning icons to the baseline grid.
  • Avoid using icons in isolation or without labels, unless universally recognized (Search, Home, Close, Print).
  • Avoid using icons when there's already a lot.
  • Avoid using icons for the sake of it.

See also

External links

Here are some examples of existing design systems or references: