SVG Icon Library

beta

Search and filter an SVG collection, preview icons, copy their markup, and download individual files or a prepared ZIP.

Preview

Primary color

Follows the original color.

Rugby ball

Sport · SVG

5 of 5 icons

Loading icons…

0 of 0 icons

No icons yet.

Rugby ball

Sport · SVG

3 of 3 icons

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

Place one Toaster in your app layout to show brief copy confirmations.
A downloadable icon collection with names and categories.
Host trusted SVG files and the optional ZIP on your own origin. Copy needs fetch access; browser downloads work with same-origin URLs.
Supply your own assets. The block does not install the gallery's example artwork.

palette
Editable original hex paints. Overrides apply to SVG paint attributes in previews, copies, downloads, and ZIPs; geometry and transparency stay intact.
readonly { label: string; value: string }[]
items
Unique name, visible title, category, and SVG src URL for each icon.
readonly SvgIconAsset[] · default []
downloadAllHref
Optional same-origin ZIP for original artwork. With custom colors, a new ZIP of the whole collection is generated locally. Filters never reduce the collection.
string
loading
Shows placeholders and hides stale artwork and download actions.
boolean · default false
emptyText
Message when the collection has no assets.
string · default "No icons yet."
className
Extra classes on the container. Later classes win.
string

Prop	Type	Default	What it does
palette	readonly { label: string; value: string }[]	-	Editable original hex paints. Overrides apply to SVG paint attributes in previews, copies, downloads, and ZIPs; geometry and transparency stay intact.
items	readonly SvgIconAsset[]	[]	Unique name, visible title, category, and SVG src URL for each icon.
downloadAllHref	string	-	Optional same-origin ZIP for original artwork. With custom colors, a new ZIP of the whole collection is generated locally. Filters never reduce the collection.
loading	boolean	false	Shows placeholders and hides stale artwork and download actions.
emptyText	string	"No icons yet."	Message when the collection has no assets.
className	string	-	Extra classes on the container. Later classes win.

Search and category controls have accessible names. Each icon is a named button with aria-pressed selection.
Copy success uses a toast. Failures, counts, and loading are announced in a status line.
Copy requires a secure context and clipboard permission. A failed copy keeps the download link available.
Filtering keeps the preview and download link on a visible result. No matches hides both.

<SvgIconLibrary items={[{ name: "ball", title: "Rugby ball", category: "Sport", src: "/icons/ball.svg" }]} downloadAllHref="/icons/collection.zip" />