---
title: Icon
navTitle: Icon
summaryParagraph: The Icon component displays meaningful and presentational icons.
needToKnow:
- "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."
demoStoryId: icon--meaningful
---

import DosAndDonts from "docs-components/DosAndDonts"
import Do from "docs-components/Do"
import Dont from "docs-components/Dont"

## To keep in mind

*   See the [Icons](/guidelines/) 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](https://cultureamp.design/guidelines/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

<DosAndDonts>
<Do>

- Use the Icon component to display icons that do not have actions associated with them.

</Do>
<Dont>

- For clickable icons that perform actions, use an [Icon Button](/components/icon-button).

</Dont>
</DosAndDonts>

## See also

*   [Icons guidelines](/guidelines/icons/).
*   [Icon Button](/components/icon-button/).

## External Links

Here are some examples of other existing design systems:

- [Ant Design: icon](https://ant.design/components/icon/#API).
- [Polaris: icon](https://polaris.shopify.com/components/images-and-icons/icon#navigation).