Icons in the shadcncraft Design System
Learn how icons are structured and used within shadcncraft and how to integrate them into components and layouts.
The shadcncraft UI kit for Figma comes pre-configured with Lucide icons by default. The kit 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.
You can switch icons on a per-component basis by selecting the equivalent icon from one of the included sets. There is currently no automatic or bulk way to swap an entire icon set across the kit.
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. This makes it easy to fine-tune style while staying within the kit.
How icon switching works
- Components default to Lucide icons
- You can manually replace an icon with the equivalent from Huge, Phosphor, Tabler, or Remix
- Icon swaps are done per component or instance
- There is no global toggle or automatic replacement across the system at this time
This approach keeps components predictable while giving you control where it matters.
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.
- Make sure your icons are in SVG format
- Ensure icons are stroke-based, just like Lucide, to match styling conventions
- Open your main shadcncraft Figma file
- Navigate to the Icons page
- Create a new frame and give it a clear label (e.g. Custom Icons)
- Import your SVG icons into this frame
- Select all imported icons
- 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.
