Add SVG Icons to shadcn/ui, One Command Install

Add production-ready SVG icon components to your shadcn/ui project in seconds. No Iconify setup, no extra dependencies, just copy, run, and use.

Tip

Coding with an AI agent? Skip browsing packs by hand, let it search and insert the right icon for you. See MCP for AI Agents below.

Quick Install (3 Clicks)

Select your package manager, pick an icon below, and run the command in your terminal:

That’s it. The icon component lands in your project ready to use:

import Plus from "@/assets/icons/lucide/plus.svg"

// Use it like any component
<Plus className="w-4 h-4" />

Tip

Works with pnpm, npm, yarn, and bun. Your preference is saved for next time.

Add Icons from Other Packs

The same command works for any icon pack. Just swap the pack name and icon:

Icon Pack	Install Command Format
Lucide	`pnpm dlx shadcn@latest add https://i.allsvgicons.com/r/lucide:{icon}.json`
Heroicons	`pnpm dlx shadcn@latest add https://i.allsvgicons.com/r/heroicons:{icon}.json`
Phosphor	`pnpm dlx shadcn@latest add https://i.allsvgicons.com/r/phosphor:{icon}.json`
Tabler	`pnpm dlx shadcn@latest add https://i.allsvgicons.com/r/tabler:{icon}.json`

Info

Browse all available icon packs at allsvgicons.com

Why Direct Install?

No extra package: skip installing Iconify as a dependency
Smaller bundle: only your installed icons ship with the app
Full ownership: icon components live in your codebase
Better DX: TypeScript autocomplete works out of the box

This works because AllSVGIcons uses open icon data from Iconify, same icons, different install path.

What Happens After Install

Icon added as a React component in your assets/icons folder
No fill or stroke colors baked in, control styling via Tailwind classes or CSS
Works with your existing shadcn/ui component architecture

When Your Agent Doesn’t Know the Icon Name

The install command above needs an exact {pack}:{icon} name upfront. Fine when you already know it’s lucide:alarm-clock. Not fine when you just want “an icon for a shipping notification” and don’t want to scroll through a pack by hand.

That’s what the allsvgicons MCP server is for. Instead of browsing, your agent calls search_icons("shipping notification"), gets back matching icons across all packs ranked by relevance, then get_icon to pull the SVG straight into the file it’s editing. No tab-switching to the site, no guessing pack names.

	Registry install (this guide)	MCP server
You already know the exact icon name	Best fit, one command	Overkill
You’re describing what you want, not naming it	Manual search on the site first	Agent finds it directly
Cross-pack search by meaning	Not supported	`search_icons` does full-text intent matching
Setup	Zero, just run the install command	One-time MCP config, paid

Use the registry for icons you can already name. Use the MCP server when you’d rather describe the icon and let the agent find it. Setup and pricing: allsvgicons MCP for AI Agents.

Advanced: Custom Registry Namespace

For teams wanting more control, configure a custom namespace in components.json:

{
  "registries": {
    "@allsvgicons": {
      "url": "https://i.allsvgicons.com/r/{name}.json",
      "params": { "format": "svg", "layout": "grouped" }
    }
  }
}

Then use shorter commands:

pnpm dlx shadcn@latest add @allsvgicons/lucide:alarm-clock

Tip

Rename @allsvgicons to any namespace that fits your team’s naming conventions.

Registry API Routes

Method	Endpoint	Purpose
GET	`/r/registry.json`	List all available icon collections
GET	`/r/{pack}.json`	Get icons from a specific pack (paginated)
GET	`/r/{pack}:{icon}.json`	Get a single icon as component

Query parameters:

format=svg (default) or format=react
layout=grouped (default) or layout=flat
limit=20 (max, default 20)
offset=0 (pagination offset)

Examples:

/r/registry.json
/r/lucide.json?format=svg&layout=flat
/r/heroicons:check.json?format=react

Coming Soon

Vue, Flutter, Astro, Svelte, and Solid format support
Icon search integrated into shadcn CLI (today, search lives in the MCP server)