Academycomponents

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.

Lesson update

This lesson will be updated. After the update in 2026, there is a different method to add icons. See the Icons documentation for the current approach.

Instructions

  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 for 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.
  9. Add a new icon to the component.

This method lets you directly incorporate your icons into the existing shadcn/ui kit structure.

21 of 45