Interface Icon Library

beta

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

Preview

Icon color

Follows the original color.

Calendar

<Icon name="calendar" />

44 icons · Your colors stay selected between collections.

1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.
```
npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"
```
2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.
```
npx shadcn@latest add @txbrendan/theme
```
3. Add the block. It also adds every component it uses. Its own files go in your components folder, and they are yours to edit.
```
npx shadcn@latest add @txbrendan/interface-icon-library
```

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.

Prop	Type	Default	What it does
className	string	-	Classes on the container; later classes win.

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.

<InterfaceIconLibrary />