# Icons

> The shadcn/ui kit for Figma uses Lucide as its default icon library. If you want to use a different icon set for your project, follow the instructions below.

Canonical: https://www.shadcndesign.com/docs/icons

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

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

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.

<RichImage
  src="/docs/icons-1.webp"
  alt="Swapping icon libraries in the variables panel"
/>

{/* TODO: re-shoot for 2026 kit */}

<Callout type="info">
You can also switch the icon library from the [Figma to shadcn/ui plugin](/plugin) — its Create tab applies your icon-library choice across all 8 styles.
</Callout>

## 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.

<RichImage
  src="/docs/icons-2.webp"
  alt="Swapping icons in the shadcn/ui kit for Figma"
/>

{/* TODO: verify for 2026 kit */}

### 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) — 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.