Icon
The Icon component displays meaningful and presentational icons.
- Overview
- Autocomplete (not built)
- Avatar
- Badge
- Button
- Button Group (not built)
- Card
- Checkbox Group
- Collapsible
- Commentary
- Content
- Date Picker (not built)
- Divider
- Drawer
- Dropdown
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Menu
- Modal
- Pagination (not built)
- Popover
- Progress Bar (not built)
- Progress Stepper
- Radio
- Radio Group
- Rich Text Editor
- Search Field (not built)
- Select
- Slider (not built)
- Split Button
- Table
- Tabs
- Tag
- Tile
- Tile Grid
- Toast Notification
- Tooltip
- Well
Need 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.
- 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 descriptivedesc
for meaningful icons so the icon is understandable by people using a screen reader.
- Provide a short
- 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.
- Use meaningful icons with
- 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
- Use the Icon component to display icons that do not have actions associated with them.
- For clickable icons that perform actions, use an Icon Button.
See also
External links
Here are some examples of other existing design systems: