Skip to main content

Icon

Adds specific icons to other elements

Installation​

Install

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

Import

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

Accessibility​

Accessibility Documentation(opens in new window)

Default​

Accessibility props​

If you specifically want a screen reader to announce what your icon is add a value to the aria-label prop. Generally Icons are a visual indicator and not necessary to announce.

Light​

Example with custom size​

The following example uses one of the default Tailwind size classes, check your application tailwind config for fontSize class extensions

Example with custom colour​

The following example uses one of the default Tailwind colour classes, check your application tailwind config for theme.colors classes

Example hidden for viewport​

Properties​

Name
Description
  • className
    string
  • aria-label
    string
  • variant
    "light"

CSS Variables​