# Interface Icon Library

> Browse outline, dither, and spot icons. Choose artwork colors and copy or download the result.

- Name: `interface-icon-library`
- Status: beta
- Categories: icons, assets
- Files: the install writes `interface-icon-library.tsx`, and any part files named `interface-icon-library-*.tsx`, to your `components` alias, `@/components` by default. Edit them freely. They are yours.
- Other registry items: `@txbrendan/panel-switch`, `@txbrendan/toast`, `@txbrendan/icon`, `@txbrendan/dither-icon`, `@txbrendan/spot-icon`, `@txbrendan/icon-color-picker`, `@txbrendan/button`, `@txbrendan/search-field`, `@txbrendan/select`. The install adds them.
- Gallery: https://txbrendan.dev/blocks/interface-icon-library
- Registry item: https://txbrendan.dev/r/interface-icon-library.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@txbrendan": "https://txbrendan.dev/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@txbrendan` in a public list that txbrendan/ui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @txbrendan/theme
   ```

3. Add the block. It also adds every component it uses:

   ```bash
   npx shadcn@latest add @txbrendan/interface-icon-library
   ```

## Use it for

- Place one Toaster in your app layout to show brief copy confirmations.
- Compare outline, still dither, and spot collections with editable colors. Dither previews, SVG downloads, and copied React examples use still artwork.
- Spot icons have separate foreground and background controls. SVG exports resolve the current artwork colors; copied React code retains chosen hex values.
- Colors stay selected when switching collections. Use theme color restores the default.

## Avoid it for

- Solid, pixel, or sport collections: use their dedicated browsers.

## Props

- `className`: `string`. Classes on the container; later classes win.

## Accessibility

- Search, collection, and color controls are labeled. Selection uses aria-pressed and a visible border.
- Copy success uses a toast; failures and download feedback use a status line. All icons have visible names.
- Custom artwork colors are not contrast-checked.

## Examples

### Browse

```tsx
<InterfaceIconLibrary />
```