Solid Icon Library

beta

Browse 24 solid icons, choose a color, copy SVG or React usage, and download individual SVGs.

Preview

Icon color

Follows the original color.

24 of 24 icons

Files

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/solid-icon-library
```

Place one Toaster in your app layout to show brief copy confirmations.
A searchable browser for the original solid icon collection.
Search by name or category. Selecting an icon shows its sizes, SVG download, and individual React import.
Choose an icon color with the picker or a 3- or 6-digit hex value. The color applies to previews, downloads, and copied SVG or React code, and stays selected while browsing. Use text color restores inheritance.
Downloads are generated locally from the same paths as the React icons. No hosted assets or API keys are required.

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

The picker and hex field are labeled. Invalid hex keeps the last valid color and shows an associated message. Custom artwork colors are not contrast-checked; labels and controls keep their theme colors.
Search and selection buttons are named. Selection is exposed through aria-pressed.
Copy success uses a toast. Counts and clipboard failures are announced in a status line.
Clipboard access requires a secure context and permission. Download and selectable React code remain available when copying fails.

<SolidIconLibrary />