To keep in mind

• See the Icons guidelines for more information on icons, including visuals.
• For clickable icons that perform actions, use an Icon Button.
• Meaningful or presentational:
  • Use meaningful icons with role=img to convey information, such as drawing attention to an item that might have a problem using a cautionary icon:
    • Provide a short title and slightly more descriptive desc for meaningful icons so the icon is understandable by people using a screen reader.
  • Use presentational icons with role="presentation" for icons that do not need to convey information. They might be provided for aesthetic reasons or otherwise have meaning conveyed elsewhere.
• To control the icon's color, set the color property on the icon's parent element. For example, color: $kz-color-cluny-500.
• For a specific subset of icons, we include a specific icon that has the preferred color baked in, such as the destructive trash icon using Coral or the Collective Intelligence logo. Otherwise, follow the Icons: Interaction states guidelines.

Icons with Tooltips or Popovers

Usually, we do not support icons receiving focus. That is, a keyboard user cannot tab to an icon. This is because icons are usually presentational or supplemented with perceivable information elsewhere.

Sometimes, however, we use icons without actions that link to more information, such as a Tooltip or Popover. These are not Icon Buttons because they do not have an action on click. For these icons, we ensure people can tab to the Icon component to show the Tooltip or Popover on focus as well as hover. To do this, you might add tabindex="0" so the icon is focusable in sequential keyboard navigation, but its order is defined by the document's source order. On focus or hover of the Icon component, you might then trigger the additional information to be displayed.

Wrapper helpers

We have a helper class you can compose to utilize these styles:

.myButton {
  composes: interactiveIconWrapper from '@kaizen/component-library/components/Icon/Icon.module.scss';
}

.myReversedButton {
  composes: reversedInteractiveIconWrapper from '@kaizen/component-library/components/Icon/Icon.module.scss';
}

When to use and when not to use

See also

• Icons guidelines.
• Icon Button.

External Links

Here are some examples of other existing design systems:

• Ant Design: icon.
• Polaris: icon.