Icons in the shadcncraft Design System

The shadcncraft Figma UI kit ships with five icon sets. How you switch between them changed in v3. Not sure which version you have? See how to tell which version you're using.

shadcncraft for Figma comes pre-configured with Lucide icons by default, and also includes Huge, Phosphor, Tabler, and Remix icon sets, giving you flexibility to adjust the look and tone of your UI without bringing in external libraries.

All included icon sets are widely used, well maintained, and work well in modern product interfaces.

Included icon libraries#

shadcncraft ships with the following icon sets:

• Lucide (default)
• Huge
• Phosphor
• Tabler
• Remix

Each set has its own visual character, but all are suitable for product UI.

Switching the icon set globally#

In v3, the active icon set is controlled by boolean toggles in the Style collection's icon-library group. Each style carries its own icon-set preference, so the icon set can change when you switch styles.

Step 1. Choose an icon set#

1. Open Local Variables in Figma
2. Switch to the Style collection
3. Select the style mode you want to edit
4. Find the icon-library group
5. Toggle your preferred icon set:
   • Lucide
   • Huge
   • Tabler
   • Phosphor
   • Remix

This updates every component that uses the Icon Placeholder.

Step 2. Change an icon within a component#

1. Select a component
2. Locate the nested property called Icon Placeholder
3. Choose a different icon from the available options

This overrides the icon on a single component without changing the global set. Useful when one component needs a specific icon.

Fix icon size issues#

If an icon does not fit correctly inside the placeholder:

1. Select the Icon Placeholder frame
2. Set width and height to Fixed
3. Select the visible icon set inside the frame (e.g. Lucide Icons)
4. Set width and height to Fill container

This ensures proper alignment and scaling across all icon sets.

Why icon consistency matters#

Using a single icon style across your product helps:

• Keep the UI visually cohesive
• Avoid rework late in the process
• Improve overall polish in both design and code
• Save time for designers and developers

Mixing icon styles without intent can quickly make an interface feel uneven, even in an otherwise solid UI.

Using a custom icon set#

If none of the included libraries fit your needs, you can still use a custom icon set.

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

Final tip#

Stick to one icon set wherever possible. If you do switch styles, do it deliberately and early. Icons are small, but inconsistency shows up fast.