Icon

The Icon component displays meaningful and presentational icons.

AnchorNeed to know

  • This component shows a single icon that can be meaningful or presentational.
  • To control the icon's color, set the color property on the icon's parent element.

To keep in mind

  • See the Icons guidelines for more information on icons, including visuals.
  • 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. Otherwise, follow the Icons: Interaction states guidelines.

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

.myButton {
  composes: interactiveIconWrapper from 'cultureamp-style-guide/components/Icon/Icon.module.scss';
}

.myReversedButton {
  composes: reversedInteractiveIconWrapper from 'cultureamp-style-guide/components/Icon/Icon.module.scss';
}

When to use and when not to use

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

See also

External Links

Here are some examples of other existing design systems: