Skip to main content
Alert information

Need a New Icon?

If a suitable icon does not exist in the Chroma libraries, contact the Chroma team. Approved requests can be added to the shared icon library for reuse across products and brands.

Icon

Component
Live

The Icon component ensures consistent styling of icons across applications.

Code(opens in new window)

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.

Choosing an icon​

The Icon component is responsible for presenting icons consistently across applications.

Before implementation:

  • Use Core Icons for interface actions.
  • Use Product Icons for business and product concepts.
  • Prefer Chroma icon libraries before using Font Awesome.

See the Icons documentation for icon selection guidance.

View Icon Guidelines

Installation​

Install

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

//or

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

Import

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

//or

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

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.