Icon
Sized and colored SVG icon wrapper with accessibility label
Accessibility
- Treat the component as presentational unless it exposes interactive affordances, and label any interactive affordances explicitly.
- Keep heading, reading, and focus order aligned with the surrounding content.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
Import options
Root package
ts
import { Icon } from '@dryui/ui' Per-component subpath
ts
import { Icon } from '@dryui/ui/icon' API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
| size | xssmmdlgxl | Size preset affecting density, spacing, or typography. | 'md' | — | — |
| color | primarymutedcurrent | Semantic color or tone applied to the component. | 'current' | — | — |
| label | string | Visible label text shown for the control or item. | — | — | — |
| class | string | — | — | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |