Icon
Consistent wrapper for decorative and meaningful SVG icons.
Add it to your project
Eject the complete icon group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject iconbash
npx toucan eject iconapp.tsx
import { Icon } from '@/components/toucan/icon';Use when
An SVG needs Toucan sizing and a clear decorative or labelled accessibility mode.
Avoid when
The image is content rather than a compact interface symbol.
Example
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Icon
Icon
Props type: IconProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
label | string | undefined | No | Visible or accessible label for the control. |
size | "sm" | "md" | "lg" | 'md' | No | Visual size variant. |
Also accepts the native span attributes that are not replaced by a Toucan prop.
Type exports
IconProps
Accessibility
- Without label the icon is hidden from assistive technology; with label it uses img semantics.
Token families
icon