# Pixel Icon Library

> Browse 300 retro pixel icons, filter by category, copy SVG or JSX, and download individual files or the complete ZIP.

- Name: `pixel-icon-library`
- Status: beta
- Categories: icons, assets, downloads
- Files: the install writes `pixel-icon-library.tsx`, and any part files named `pixel-icon-library-*.tsx`, to your `components` alias, `@/components` by default. Edit them freely. They are yours.
- Other registry items: `@txbrendan/accordion`, `@txbrendan/toast`, `@txbrendan/icon-color-picker`, `@txbrendan/pixel-icon`, `@txbrendan/button`, `@txbrendan/search-field`, `@txbrendan/select`. The install adds them.
- Gallery: https://txbrendan.dev/blocks/pixel-icon-library
- Registry item: https://txbrendan.dev/r/pixel-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/pixel-icon-library
   ```

## Use it for

- Place one Toaster in your app layout to show brief copy confirmations.
- Edit the primary color or expand More palette colors for individual inks. Previews, SVG/JSX copies, individual downloads, and the full ZIP retain the overrides. Reset palette restores the theme.
- An asset browser for the bundled 300-icon collection.
- Standalone SVG downloads keep the current scoped theme colors. ZIP includes 300 SVGs, a category catalog, and usage notes.
- The collection is local and static; search and downloads need no service or API key.

## Avoid it for

- A single illustration: install Pixel Icon alone.
- An upload manager or remote asset picker. This browser contains only the bundled collection.

## Props

- `className`: `string`. Extra classes on the container. Later classes win.

## Accessibility

- Search and category controls are labeled. Icon buttons have names and expose selection with aria-pressed.
- Search counts, copy results, errors, and download preparation results are announced.
- Clipboard access needs browser permission and a secure context. When it fails, a message directs people to the SVG download.
- The grid follows its container width. All actions are keyboard buttons.

## Examples

### Complete icon browser

```tsx
<PixelIconLibrary />
```