Icon

Sizes

Seven token-driven sizes are available. The default is sm.

import { MaterialHome } from '@checkatrade/icons/react';
import { Icon } from '@checkatrade/components-web';

<div className="flex items-end gap-4 flex-wrap">
<Icon icon={MaterialHome} size="xxs" label="Home (xxs)" />
<Icon icon={MaterialHome} size="xs"  label="Home (xs)" />
<Icon icon={MaterialHome} size="sm"  label="Home (sm)" />
<Icon icon={MaterialHome} size="md"  label="Home (md)" />
<Icon icon={MaterialHome} size="lg"  label="Home (lg)" />
<Icon icon={MaterialHome} size="xl"  label="Home (xl)" />
<Icon icon={MaterialHome} size="xxl" label="Home (xxl)" />
</div>

Accessibility

Icons are either decorative (hidden from assistive technology) or labelled (exposed as an image with a meaningful name). The label prop controls this.

<span className="flex items-center gap-1">
<Icon icon={MaterialHome} size="md" />
<span>Home</span>
</span>

<Icon icon={MaterialSearch} size="md" label="Search" />

Inverse

Use inverse on dark or branded backgrounds. Toggle to dark theme to see the canvas context. When an icon is inside a <Surface tone="inverse">, the inverse prop is applied automatically via context.

<Surface tone="inverse" className="rounded-lg p-6 flex gap-4">
<Icon icon={MaterialHome} size="xl" label="Home" />
<Icon icon={MaterialFavorite} size="xl" label="Favourites" />
<Icon icon={MaterialSettings} size="xl" label="Settings" />
</Surface>

<div className="rounded-lg bg-[var(--color-background-surface-brand-primary-default)] p-6 flex gap-4">
<Icon icon={MaterialHome} size="xl" label="Home" inverse />
<Icon icon={MaterialStar} size="xl" label="Starred" inverse />
</div>

When to use

Use Icon to embed a single glyph from the Checkatrade icon set. The glyph is imported from @checkatrade/icons/react and passed as a prop — this means only the glyphs you actually use end up in your bundle.

Sizes

Accessibility

• Decorative: omit label when the icon is alongside visible text that already conveys the meaning (e.g. an icon next to a button label). The icon gets aria-hidden="true".
• Labelled: provide a label when the icon stands alone as the only way to understand an action or status. The icon gets role="img" and aria-label set to the label.

Inverse

The Icon component reads the surrounding Surface tone via React context. If the icon is inside <Surface tone="inverse">, it automatically renders in inverse colours without needing the inverse prop. Use the explicit inverse prop only when you need inverse colouring outside of a Surface.

When not to use

• Logos: use the dedicated Logo component.
• Illustrations: use the Illustration component or a plain <img>.
• Animated or complex graphics: use a custom SVG or Lottie.

Props

Import

Web

import { Icon } from '@checkatrade/components-web';
import { MaterialHome, MaterialSearch } from '@checkatrade/icons/react';

Basic usage

{/* Decorative — hidden from AT, adjacent text provides the label */}
<span className="flex items-center gap-1">
  <Icon icon={MaterialHome} />
  <span>Home</span>
</span>

{/* Labelled — standalone icon, screen readers announce "Search" */}
<Icon icon={MaterialSearch} size="md" label="Search" />

{/* Explicit size */}
<Icon icon={MaterialHome} size="xl" label="Home" />

Inverse on a dark surface

{/* Automatic via Surface context — no prop needed */}
<Surface tone="inverse" className="p-6">
  <Icon icon={MaterialHome} size="lg" label="Home" />
</Surface>

{/* Manual inverse without a Surface */}
<div style={{ background: 'var(--color-background-surface-brand-primary-default)', padding: '1rem' }}>
  <Icon icon={MaterialHome} size="lg" label="Home" inverse />
</div>

Platform status

Accessibility

Web

• Decorative icons set aria-hidden="true" and role="presentation" — completely invisible to assistive technology.
• Labelled icons set role="img" and aria-label from the label prop.
• Colouring uses fill-current and inherits from a CSS color property, which respects forced-colours / high-contrast mode.

React Native

• See the native Icon component for accessibility details on mobile.

No releases yet.