Icons

The Shadcraft Ul kit for Figma comes pre-configured with Lucide icons, a clean, consistent, and developer-friendly open-source icon set. These icons are widely used across shadcn/ui projects and align closely with Tailwind utility-based styling.

However, if your project calls for a different look or branding style, you can easily swap out the default Lucide set with a custom icon library. Below are guidelines and steps to help you make the switch smoothly.

Choosing the Right Icon Library

There are countless icon sets available, so it's important to select one that fits your project's needs. Look for an icon library that:

• Includes a wide range of relevant icons

• Has a consistent, professional design style

• Matches the tone and visual language of your brand or product

Why Icon Consistency Matters

Using a single, high-quality icon set from the beginning has long-term benefits:

• Maintains a cohesive visual style across your entire interface

• Prevents the need for tedious icon replacements mid-project

• Enhances overall polish and professionalism in both design and code

• Saves time for both designers and developers

Poorly matched or inconsistent icons can undermine even the most well-crafted Ul - so choose once, and choose well.

Replacing Lucide with a Custom Icon Set

If you'd like to use your own icon set in place of Lucide, there are two ways to do it depending on your workflow and team setup.

Method 1: Manual Integration (Basic)

This method is ideal for individual designers or small teams working in a single file.

1. Make sure your icons are in SVG format

2. Ensure icons are stroke-based, just like Lucide, to match styling conventions

3. Open your main Shadcraft Figma file

4. Navigate to the Icons page

5. Create a new frame and give it a clear label (e.g. Custom Icons)

6. Import your SVG icons into this frame

7. Select all imported icons

8. Click "Create multiple components" from the top bar

Your custom icons are now integrated directly into the kit and ready to be reused throughout your designs.

Method 2: Library Integration (Advanced)

If you're working in a shared environment with a Figma Professional or Organisation plan, you can publish your icon set as a separate library.

1. Create a new Figma file and add your icons

2. Turn each icon into a component

3. Publish the file as a Team Library (see Figma's library guide)

4. In your Shadcraft file, open the Assets panel

5. Click the Library icon and enable your newly published icon set Once enabled, your custom icons will be accessible via the Assets panel and can be used just like the Lucide icons in existing

Final Tip

No matter which method you choose, replacing the default icon set in Shadcraft is straightforward. Taking the time to use the right icons - styled, structured, and integrated properly — will elevate the quality of your entire product experience.