Menu
Getting started
Variables
Theming
Components
Icons
Development
Updates
Licensing agreement
Docs
/
Icons

Icons

The Shadcn UI Kit for Figma uses the Lucide icons as its main icon library. If you want to use a different icon set for your project, follow the instructions below.

Selecting the Right Icon Library for Your Project

With countless icon libraries available, choosing the right one is crucial. A good icon library should:

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

Why Consistency Matters

Sticking to a single, high-quality icon library from the start is essential because:

  • It maintains visual consistency across your project
  • It prevents the need for time-consuming icon creation or replacement later
  • It enhances the overall professionalism of your design

The Impact of Quality Icons

  • Quality icons make your website or app more visually appealing
  • Inconsistent icons can make your design look unprofessional
  • A well-chosen icon library saves time and money in the long run

Integrating Custom Icons

To personalize your project by incorporating a different icon set into the Shadcn UI Kit for Figma, you have two straightforward options. By following either method, you can effortlessly customize the Shadcn UI Kit for Figma with your preferred icons, enhancing your design workflow:

Method 1: Manual Integration

  1. Ensure your custom icons are in SVG format.
  2. Ensure that your custom icons are stroke-based, like the default icons.
  3. Open the Shadcn UI Kit file in Figma.
  4. Locate the Icons page within the kit.
  5. Create a new frame and name it descriptively (e.g., 'Custom Icons').
  6. Import your SVG icons into this new frame.
  7. Select all the imported icons.
  8. Click the 'Create multiple components' button at the top of the screen.

This method lets you directly incorporate your icons into the existing Shadcn UI Kit structure.

Method 2: Using Figma's Library Feature

Note: This method requires a Figma Professional or Organization plan.

  1. Publish your custom icon set as a team in Figma. For guidance on team libraries, refer to Figma's official documentation.
  2. In the Shadcn UI Kit file, enable your newly published icon library.

After completing these steps, you can access your custom icons through the assets panel, seamlessly integrating them with the Shadcn UI Kit components.