Adding custom icons - Method 1. Icon components
Discover how to incorporate a custom icon set into your shadcn/ui kit. The first method explains how to add SVG icons to your library and configure them as components.
Instructions
- Ensure your custom icons are in SVG format.
- Ensure that your custom icons are stroke-based, like the default icons.
- Open the shadcn/ui kit for Figma.
- Locate the Icons page within the kit.
- Create a new frame and name it descriptively (e.g., 'Custom Icons').
- Import your SVG icons into this new frame.
- Select all the imported icons.
- Click the 'Create multiple components' button at the top of the screen.
- Add a new icon to the component.
This method lets you directly incorporate your icons into the existing shadcn/ui kit structure.
Up next
Adding custom icons - Method 2. Icon library
The second method describes how to add custom icons to your project by using Figma library feature.