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.
- 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).
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.
- 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.
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.
- 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.
- 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.
Here are some examples of existing design systems or references: