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.

See our Icon Component for information about how to use these components.

Interaction states

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

Size, spacing and touch targets

Minimum SizeEach icon should have a minimum width of 20px
SpacingLabels should sit 12px to the right of an icon
Touch AreaIf an icon is clickable the clickable area should be at least a 48px square surrounding the icon
Neighbouring IconsIf two icons are side-by-side in a toolbar, they should each have a 48px touch area, resulting in 96px total width

Actions

Informational

Directional

Users

Views

Surveys

Sentiment

Navigational/Effectiveness

Navigational/Engagement

Navigational/Global

Best practices

Icons should…
  • by default, by 20px in size (minimum) and can be scaled to larger sizes if it contextually makes sense.

  • have a minimum touch zone of 48px

  • be accompanied by a label to support the visual. Try avoid using icons in isolation of labels, unless they are being used for a clear visual convention (e.g. Search, Home, Close, etc.)

Icons should not…
  • be overused. Avoid using icons for the sake of it.

  • need to align to the baseline grid.