# Icons The library ships a small, curated set of [Phosphor](https://phosphoricons.com) icons as a **tree-shakeable subpath export**. Library chrome (disclosure carets, close ×, the modified-tab dot, scroll/step arrows) draws from this set, and you can import any of them for your own buttons. ```tsx import { Copy, Lock, Trash } from '@dolphinspired/solid-stage/icons'; <IconButton icon={Copy} title="Copy" onClick={copy} /> ``` Each icon is a `Component<{ size?; class? }>` carrying a `stage-icon stage-icon-<name>` class, so it sizes off `--stage-icon-size` and inherits `currentColor`. Phosphor glyphs are **filled vector shapes** (not strokes), so they stay crisp at small chrome sizes. Unused icons drop via tree-shaking. ## The `IconComponent` contract Anywhere the library takes an icon — `IconButton`, `IconToggle`, `Section`'s `headerActions`, `IconButtonField`, etc. — the prop type is the **empty-props component shape**: ```ts type IconComponent = Component; // = (props: {}) => JSX.Element ``` i.e. *any component renderable with no required props*. The library never passes props to an icon — it's **sized and coloured entirely in CSS** via the `.stage-icon` class (`--stage-icon-size` / `--stage-color-icon`). The contract is deliberately this loose so every common icon shape satisfies it: 1. **A bundled icon** — `import { Copy } from '@dolphinspired/solid-stage/icons'` (no extra dependency; already carries `.stage-icon`). 2. **An Iconify pack via `unplugin-icons`** — components typed `Component<SvgSVGAttributes>` (see the recipe below). 3. **Your own icon component** — `lucide-solid`, a hand-rolled SVG, anything. ```tsx import { Heart } from 'lucide-solid'; <IconButton icon={Heart} title="Favourite" onClick={fav} /> ``` > An earlier contract was `Component<{ size? }>`, which *rejected* SVG-attribute > icon components (Iconify/unplugin) — their props share no keys with `{ size? }`. > Sizing lives in CSS regardless, so the contract dropped the `size` prop. ## "Any icon by name" — Iconify via `unplugi…