Components Media & code
IconGallery
StableA searchable grid of every Stance icon; choose one to copy its name.
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.
Overview
import { IconGallery } from '@bindshq/stance-react';
export function Basic() {
return <IconGallery />;
}Light, dark and high contrast
Every Stance component is designed and tested in all three appearance modes.
Import
import { IconGallery } from '@bindshq/stance-react';Examples
import { IconGallery } from '@bindshq/stance-react';
export function Filtered() {
return <IconGallery defaultQuery="arrow" iconSize={20} />;
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
icons | IconName[] | None | Icons to show. Default: all. |
defaultQuery | string | None | Initial search. |
iconSize | number | 24 | Rendered icon size. |
onSelect | (name: IconName) => void | None | Replace copy with a custom action. |
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. |