Icons

BDS ships around 120 icons as individual React components, almost all available at three stroke weights (1.5, 2, and 2.5). Import the one you need by name; there is no runtime registry or sprite to configure.

Icons draw with currentColor and have no intrinsic size, so size-* sets the dimensions and text-bds-* sets the colour — they inherit colour from surrounding text by default. Components that carry a state, like a status or an error, colour their own icons, so you rarely need to.

Use the controls to preview any weight, size, or colour. Select an icon to get its import and usage for the current settings.

import { HomeIcon } from '@base-org/bds-web/icons/2.5/home-icon';<HomeIcon className="size-6" />

Custom icons

When you need a glyph the set does not include, wrap your SVG paths in the Icon primitive — the same primitive every shipped icon is built on. It sets currentColor and the render defaults so a custom icon behaves like the rest.

import { Icon } from '@base-org/bds-web/product/icon';

function SparkleIcon(props) {
  return (
    <Icon viewBox="0 0 24 24" {...props}>
      <path d="M12 2l2 7 7 2-7 2-2 7-2-7-7-2 7-2 2-7z" fill="currentColor" />
    </Icon>
  );
}

When to use

Use a shipped icon for any glyph in product UI. When the set does not have the one you need, wrap your SVG in the Icon primitive.

Use something else when:

• You need an illustration for an empty state, a card, or a banner. Use Illustrations.
• You need a loading indicator. Use Spinner.

Usage

Props

Accessibility

An icon is decorative by default and should be hidden from assistive tech unless it carries meaning on its own. When it does — a status glyph, an icon-only control — give it an accessible name via aria-label, and put the name on the interactive element for icon-only buttons.