What are icon libraries?

Icon libraries are collections of SVG icons designed with a consistent style. Each library has its own visual language—some are minimalist (Feather, Lucide), others are more detailed (Material Symbols). Choose a library that matches your design system.

Which icon library should I use?

Lucide is the default for shadcn/ui and works great for most projects. Heroicons pairs well with Tailwind. Material Symbols offers the most icons. Simple Icons has brand logos. Browse each library to find icons that match your style.

Can I use icons from multiple libraries?

Yes! You can mix icons from different libraries. However, for visual consistency, try to use icons from the same library for similar purposes. For example, use one library for UI icons and another for brand logos.

How do I add icons to my project?

Click any icon to view its detail page, then either copy the React component code or run the shadcn CLI command. The CLI automatically adds a typed component to your project's components folder.

Do these icons work with React, Vue, and other frameworks?

Yes! Each icon detail page provides copy-paste code for React, Vue, Svelte, Angular, Solid, and Preact. You can also download raw SVG files for any platform.

Can I customize icon colors and sizes?

Absolutely! All icons support customization. Click any icon to access the customization panel where you can change color, size, stroke width, rotation, and more. Changes apply to copied code and downloads.

Are all icons free for commercial use?

Yes! All icons on shadcn.io come from open-source libraries with permissive licenses (MIT, Apache 2.0, ISC). You can use them in personal and commercial projects without attribution requirements.

Do I need to credit the icon authors?

Most licenses don't require visible attribution. Just keep the license file if you redistribute source code. Check each library's license badge for specific details.

Can I modify the icons?

Yes! All included icons allow modification. Customize using our built-in editor or modify the SVG/component code directly. No restrictions on derivative works.

Every React icon library.

222 open-source icon libraries. 294,237 free React icons, one shadcn CLI command away.

libraries: 222
icons: 294k+
& open source: Free

lucide-a-arrow-down.tsx

import {AArrowDown,} from "~/icons/lucide/a-arrow-down" <AArrowDownclassName="size-8" />

222 libraries

15,862 icons

Every icon library. One prompt away.

Prompt Claude Code, Cursor, Windsurf — or any MCP-ready AI agent — to install any icon from any of these 222 libraries, or any of the 294,237 icons on shadcn.io, in seconds.

Grab your MCP URL
Copy from /dashboard/account — your personal Pro token is baked in.
Paste into your editor
Any MCP-ready client. Here's the command for Claude Code:
Prompt as usual
Your AI agent auto-discovers all 15 MCP tools — search, preview and install any shadcn.io resource straight from your prompt.

Icon Libraries FAQ

Learn how to browse and use icons from different libraries in your React projects.

Get Pro — Save 33%·Ends in --:--:--→

Every React icon library.

Browse every icon library

Material Symbols

Material Design Icons

Tabler Icons

Simple Icons

Lucide

Font Awesome 6 Solid

HeroIcons

Radix Icons

Feather Icons

Fluent UI System Icons

Material Symbols Light

Arcticons

Grab your MCP URL

Paste into your editor

Prompt as usual