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

See also

• Icons guidelines.
• Icon Button.

External Links

Here are some examples of other existing design systems:

• Ant Design: icon.
• Polaris: icon.