Skip to main content

Icon

Component
Live

The Icon component ensures consistent styling of icons across applications.

Code

Usage​

While icons provides visual cues and support actions, the Icon component is used to control the size and colour of an icon in content. It comes with 2 colour variants, default (dark) and light. The colour variants are set at the brand level, but can be overridden to use any colour in the Chroma brand palette where required.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Icon } from "@iag/chroma-react-ui.components";

When to use​

Use icons to enhance visual comprehension, or to guide user’s actions. Use the Icon component where icons are used in content to control their visual appearance.

When to avoid​

Avoid using icons if it does not contribute to a better understanding of the content, action required or aesthetics. Icons should not be used for decoration purposes only.

Do

  • Do use contextually appropriate icons to aid comprehension and not confuse users.
  • Do make sure icons are used consistently throughout the site or application.
  • Do provide descriptive text-based alternatives for assistive technologies, if you are using an icon to convey meaning.
  • Do use aria-labels for screen readers to announce the icon (more information is available in the accessibility tab).
  • Do use to hide and show icons at different viewports. For example, hiding on mobile where the text needs to be prioritised.

Color Override​

The colour of an icon can be overridden using the Icon component for specific usage in a UI, irrespective of the chosen variant.