# IconGallery

> A searchable grid of every Stance icon; choose one to copy its name.

Category: Media & code · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/icon-gallery

IconGallery lists the Stance icon set with live search. By default choosing an icon copies its name for use with <Icon name="…" />. Pass onSelect to build an icon picker, for example when choosing an icon for a navigation item.

## Import

```tsx
import { IconGallery } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### All icons

```tsx
import { IconGallery } from '@bindshq/stance-react';

export function Basic() {
  return <IconGallery />;
}
```

### Pre-filtered

```tsx
import { IconGallery } from '@bindshq/stance-react';

export function Filtered() {
  return <IconGallery defaultQuery="arrow" iconSize={20} />;
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| IconGallery | `icons` | `IconName[]` | None | Icons to show. Default: all. |
| IconGallery | `defaultQuery` | `string` | None | Initial search. |
| IconGallery | `iconSize` | `number` | `24` | Rendered icon size. |
| IconGallery | `onSelect` | `(name: IconName) => void` | None | Replace copy with a custom action. |
| IconGallery | `searchLabel` | `string` | `'Search icons'` | Search field label. |

## Accessibility

- The search field is labelled, and the result count is announced as you type.
- Each icon is a button named after its action, e.g. “Copy icon name check”.
- Copy confirmation is announced in a live region.

## Keyboard

| Keys | Action |
| --- | --- |
| `Tab` | Moves through the search field and icons. |
| `Enter` `Space` | Copies or selects the focused icon. |

## Related

- https://stanceui.com/components/icon