Icon
Use catalog components for the icon itself. Use Icon when you need a consistent presentation surface around an SVG.
TSX
import { Icon, IconSettings, IconDownload, Button } from '@clidey/ux';
<Icon icon={<IconSettings />} size={20} variant="subtle" />
<Icon icon={<IconSettings />} size={24} variant="solid" />
<Button variant="outline"><IconDownload /> Export</Button>
Interactive example#
Icon · Live example
Compare presentation variants while keeping the same catalog artwork.
The code uses shared demo presentation helpers. Their complete source and styling are included in the LLM build context.
Props#
| Prop | Type | Default | Purpose |
|---|---|---|---|
icon | SVG React element | Required | Element cloned with the chosen dimensions. |
size | number | 24 | Width and height of the child SVG. |
variant | "plain", "subtle", "solid" | "plain" | Plain icon, muted surface, or filled icon tile. |
className | string | — | Additional classes on the wrapper span. |
Icon forwards its ref to the wrapping span and accepts span HTML attributes. Its child SVG is decorative. Put an accessible name on an icon-only button, or provide text beside a standalone status icon.
Choosing an API#
| Situation | API |
|---|---|
| Fixed React icon | IconSearch, IconHome, and other named catalog exports |
| Dynamic React icon | CatalogIcon with a validated catalog name |
| Background tile or consistent wrapper | Icon with a catalog element |
| Non-React markup or static assets | @clidey/ux/icons URL map or individual SVG files |
Read The icon catalog for naming, alternative artwork, and asset handling.
Was this page helpful?