Search documentation

Search docs pages and sections

Figma Kit
  • Getting started
  • Styles
  • Variables
  • Typeset
  • Theming
  • Components
  • Icons
  • Development
  • Updates
Registry
  • Pro Blocks
  • Templates
  • Themes
Plugin
  • Introduction
  • Generate code
  • Manage variables
  • Typeset
  • Select and install Pro Blocks
  • Security
Agent Skills
  • Agent Skills
  1. Documentation
  3. Icons

Menu

HomePreviewPricingRoadmapHelp & Contact

Products

Figma KitPro BlocksAgent SkillsNewFigma PluginTemplates

Resources

Free ThemesTheme GeneratorDocsAcademyBlogIcons

Legal

Licensing AgreementTerms & ConditionsPrivacy PolicyCookies

Components

AccordionAlertAlert DialogAspect RatioAttachmentAvatarBadgeBreadcrumbBubbleButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDrawerDropdown MenuEmptyFieldFormHover CardIcons - HugeIconsIcons - Lucide IconsIcons - Phosphor IconsIcons - Remix IconIcons - Tabler IconsInputInput GroupInput OTPItemKbdLabelMenubarMessageMessage ScrollerNavigation MenuPaginationPopoverProgressQuestionnaireRadio GroupResizableScroll-areaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypesetTypography

Landing Page Blocks

404 SectionsBannersBento GridsBlog SectionsCTA SectionsComparison SectionsContact SectionsEmpty LP SectionsFAQ SectionsFeature SectionsFootersGallery SectionsHeader SectionsHero SectionsLP NavbarsLanding Page ExamplesLogo SectionsPatternsPricing SectionsRich Text SectionsStats SectionsTeam SectionsTestimonials Sections

Application Blocks

App ShellsApplication ExamplesButtonsCardsDescription ListsEmpty SectionsNavbarsPage HeadersSection FootersSection HeadersSectionsSettingsSign inSign upTable Headers

E-commerce Blocks

CheckoutsExamplesIncentivesOrder Summary SectionsProduct Category SectionsProduct HeadersProduct List FiltersProduct List SectionsSale SectionsShopping CartsStore Navbars

This project is independent and not affiliated with Figma or shadcn/ui.
Copyright © 2026 Matt Wierzbicki

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.

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.
Swapping icon libraries in the variables panel

You can also switch the icon library from the Figma to shadcn/ui plugin — its Create tab applies your icon-library choice across all 8 styles.

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.
Swapping icons in the shadcn/ui kit for Figma

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.