Icons

The kit supports the five icon libraries available in shadcn/create:

• Lucide Icons (default)
• HugeIcons
• Phosphor Icons
• Tabler Icons
• Remix Icon

Icon libraries in shadcn/ui

shadcn/ui reads the iconLibrary value in components.json and uses it when the CLI adds components. These are the accepted values and the package each one installs. Counts are rounded and describe the free sets.

Which one to pick:

• Lucide is the default for shadcn/ui and for the kit. Zero setup and the widest match with existing shadcn/ui components, templates, and Pro Blocks. It has no filled variants.
• Tabler Icons shares Lucide's 24px grid and 2px stroke and adds a filled set, so it is the lowest-risk swap when you need solid states or wider coverage for dashboards.
• Phosphor is the pick when you need weights: light for secondary chrome, bold or fill for primary actions, duotone for marketing surfaces.
• Hugeicons gives a softer, more branded look and can move from outline to solid and duotone in the paid Pro set.
• Remix Icon ships a line and fill version of every glyph, which suits interfaces that toggle icon state on selection.
• Radix Icons sits on a 15px grid and only makes sense for older projects that started on the retired default style.

To set the library for a new project, pass it to shadcn create or answer the prompt during npx shadcn init. For an existing project, change iconLibrary in components.json, install the package, and re-add the components that render icons so the CLI regenerates their imports. Components accept any icon as a child, so a mixed period during migration works, but keep one library per product for a consistent stroke and grid.

The kit uses the same five libraries as shadcn create, and the Figma to shadcn/ui plugin writes imports for the library that is active in your file, so the icon you place in Figma is the icon the generated code imports.

Icon-library visibility is driven by boolean variables in the Style collection (icon-library/lucide, icon-library/huge, icon-library/phosphor, icon-library/tabler, icon-library/remix). Set exactly one to true.

How to switch the icon library

The default is Lucide. To use a different one:

1. Open the variables panel.
2. Switch to the Style collection.
3. Set the icon-library/* boolean for the library you want to true, and set the currently active one to false. Keep exactly one enabled.

Keeping the Figma file size low

The kit includes all five libraries, which adds weight. Choose a single library and remove the rest to reduce your file size. A smaller file loads faster and makes component search more responsive.

1. Decide on your icon library and enable it (see above).
2. Open the Icons page.
3. In the IconPlaceholder component, delete the instances for any libraries you no longer need.
4. Delete the Figma pages associated with the removed libraries.
5. In the Style collection, delete the icon-library/* booleans for the libraries you removed.

How to select a different icon

You can swap the icon inside the IconPlaceholder component. For example, to change the Smile icon to another icon:

1. Select the IconPlaceholder instance.
2. In the component panel (top right), click the icon name (Smile).
3. Search for and select the icon you want.

Missing an icon?

If an icon is missing from one of the libraries, add it:

1. Go to the library's website and find the icon you need.
2. Open the kit file in Figma and the page for that library.
3. Copy and paste the SVG icon onto its library page.
4. Normalize the size to 24×24 and lock the aspect ratio.
5. Make sure the layers inside are consistent Vectors (use our Lucide library as a reference).
6. Name it with a library prefix, e.g. "Library Name / Icon Name".
7. Select the icon and choose Create component (top right).
8. Set the icon's Constraints to Scale.
9. Move the new icon component in with the existing icons.

Integrating custom icons

The kit is designed to let you plug in your own icon library and use it across components with minimal effort.

Choosing an icon library

A good icon library should:

1. Be comprehensive enough for your project's needs.
2. Offer consistent, professionally crafted icons.
3. Match your brand's style and feel.

Sticking to a single, high-quality library from the start keeps your project visually consistent, avoids time-consuming icon replacement later, and keeps the design looking professional.

Add your icon library to the Figma kit

1. Ensure your icons are SVGs.
2. Open the kit file in Figma.
3. Create a new page for your icons (e.g. "Custom Icons").
4. Paste all SVG icons into this page.
5. Normalize sizes to 24×24 and lock aspect ratios.
6. Make sure the layers inside are consistent Vectors (use our Lucide library as a reference).
7. Name icons with a library prefix, e.g. "Custom Icons / Icon Name".
8. Select all icons and choose Create multiple components (top right).
9. Open the Icons page and locate the IconPlaceholder component.
10. Insert an instance of your icon into IconPlaceholder.
11. Set the icon's Constraints to Scale.
12. Select the icon instance and add a new component property: Instance swap.
13. Name the property "Custom Icons" and include all your icons as preferred values.
14. Open the variables panel and go to the Style collection.
15. Add a new boolean variable named after your library (e.g. icon-library/custom).
16. Turn this boolean on and turn off any other icon-library/* booleans. Note that the Style collection has 8 modes (one per style), so set the values across all of them so your library stays active in every style.
17. Close the variables panel and select your icon instance inside IconPlaceholder.
18. In the Appearance panel, bind the layer's visibility to the boolean you created.

That's all. You can now use your custom icons across every component in the kit.

Troubleshooting

In some cases Figma may render the IconPlaceholder component larger than intended. This is a known issue that can be resolved by regenerating instances:

1. Open the file or page where the issue appears.
2. Open Quick Actions: Command + /
3. Search for Regenerate all instances (slow).
4. Press Enter and wait for it to complete.

Frequently asked questions

Which icon library does shadcn/ui use by default?

Lucide. New projects created with shadcn create or npx shadcn init install lucide-react unless you choose another library, and the Figma kit ships with Lucide enabled.

Which icon libraries does shadcn/ui support?

Six values are accepted in components.json: lucide, hugeicons, phosphor, tabler, remixicon, and radix. The Figma kit includes the first five.

Can I use an icon library that is not on the list?

Yes. Any React icon component works inside shadcn/ui components. The iconLibrary setting only controls which package the CLI imports when it adds components. In Figma, add the library with the custom icons method above.

Are these icons free for commercial use?

Lucide (ISC), Phosphor, Tabler, Radix (MIT), and Remix Icon (Apache 2.0) are free for commercial use. Hugeicons is MIT for the free set and paid for the Pro styles. Check each project's license page before shipping.

How do I size icons in shadcn/ui components?

Components such as Button size their child SVGs through [&_svg] selectors, so a plain <Settings /> renders at the right size. Outside of components, use the size utilities, for example className="size-4" for 16px.

Does the plugin generate the right icon imports?

Yes. The Figma to shadcn/ui plugin reads which icon-library/* boolean is active and writes imports for that package, using each library's naming convention (for example IconSettings for Tabler and RiSettings3Line for Remix Icon).