Icon

Icon component for SVG icons from the registry or emoji characters.

Accessibility:

import { Icon } from '@tangible/ui';

Interactive docs and examples: Icon in Storybook.

Icon props

Prop	Type	Description
`className?`	`string`
`emoji?`	`string`	Emoji or unicode character (alternative to name). The same labelling contract as `name` applies: pass `label` when the emoji conveys meaning not available from surrounding text (🔒 for locked, ⚠️ for a warning); omit it only for decoration.
`label?`	`string`	Accessible label for informative icons. Required if icon conveys meaning.
`name?`	`IconName`	Icon name from registry (e.g., "system/check")
`size?`	`"lg" \| "md" \| "sm" \| "xl" \| "xs" \| "xxl"`	Icon size. Defaults to inherit from parent font-size.

Emoji: An emoji without a label is decorative and hidden from screen readers — correct only when surrounding text carries the meaning. See EmojiWithLabel for informative emoji.
Emoji With Label: An emoji that conveys state or meaning (🔒 locked, ⚠️ warning) needs a label, exactly like a registry icon — without one it is invisible to screen reader users.
With Label: Icons with a label prop are announced by screen readers. Use for informative icons.
Decorative: Icons without a label are decorative and hidden from screen readers via aria-hidden.
Inline With Text: Icons inherit font-size from their parent, scaling naturally with text. The icon here is correctly decorative (no label) only because the words "settings icon" carry the meaning — a standalone icon that itself conveys the information needs a label.

Other stories: Basic, All Sizes (interactive page).

Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.