Icon

primitive

Token-sized SVG icon component backed by PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED. Icons render inline by default and can target an external sprite.

Preview

Scale1.00

Sizes

Tones

Approved

Information

Needs review

External link

Label standalone icons when text does not provide the name.

Usage

import { Icon } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';

<Icon name="check" tone="accent" />

<Icon name="alert" label="Validation warning" tone="danger" />

<Icon name="copy" title="Copy token" spriteHref="/icons.svg" />

Props

Prop	Type	Default	Description
`name`	`IconName`	required	Name from `PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED`.
`label`	`string`	--	Accessible label. Adds `role="img"`.
`title`	`string`	--	Inline SVG title, used as the accessible name when `label` is absent.
`spriteHref`	`string`	--	External sprite URL. Inline paths render when omitted.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	CSS size class.
`tone`	`'current' \| 'muted' \| 'accent' \| 'danger'`	`'current'`	Token-friendly color class.
`class`	`string`	--	Additional CSS classes.
`...svgAttrs`	`SVGSVGAttributes`	--	Forwarded SVG attributes except `children` and `role`.

Accessibility

Decorative: Icons without label or title render aria-hidden="true".
Named icons: Use label when an icon stands alone or the nearby text does not name the action.
Color: Tone classes use semantic tokens. Do not rely on color alone to communicate status.

Do / Don't

Do

Use icons as compact support for visible labels, status text, or familiar controls.

Don't

Don't place unlabeled standalone icons in buttons or links. Give the control an accessible name.