## Icon Picker (S—397)

Search a grid of line icons, tune size and stroke width live, and copy the selected icon as SVG or JSX.

- URL: https://sundaeui.dev/components/icon-picker
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/icon-picker.json`
- Tags: icons, search, picker, developer, svg, design

Icons are plain SVG paths drawn on a 24-unit grid. Search matches names and tags; arrow keys move through the grid.
Size and stroke sliders restyle every icon at once, and the copy format switches between raw SVG and a JSX snippet.

### Usage

```tsx
import { IconPicker } from '@/components/sundae/icon-picker'

<IconPicker />
```

### Props

- `onPick` (`(name: string, svg: string) => void`): Called when an icon is copied.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Design tools, CMS icon fields, docs.

### When not to use

- Large icon sets: virtualise the grid.

### Accessibility

- The grid is a listbox with named options.
- Copy confirmation is announced.
- Reduced motion removes the movement and keeps every state change.