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.

AnchorNeed 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).

Adding new icons

To add a new icon to the Kaizen UI Kit, to export an icon from the UI Kit, or to add an icon to the Kaizen Component Library, Culture Amp employees can see an internal link for the icons process on our wiki.

Using icons in components

  • To display icons that do not have actions associated with them, use the Icon component.
  • For clickable icons that perform actions, use an Icon Button.

Visuals

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.

Positioning and location:

  • Use icons next to control actions (e.g. Export, Print etc.).
  • Conceptually, icons always need a label (screen reader, title tag, alt tag, tooltips).
  • Icons can be used as illustrations (e.g. Drag & Drop).
  • Use icons to trigger tooltips for information.

Size, spacing and touch targets

Minimum Size
Spacing
Touch Area
Neighbouring Icons

Interaction states

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

When to use and when not to use

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.
  • Use icons when space is at a premium.
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: