Academycomponents

Adding custom icons - Method 2. Icon library

The second method describes how to add custom icons to your project by using Figma library feature.

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

Please note that this method requires a Figma Professional or Organization plan.

  1. Publish your custom icon set as a team in Figma. For guidance on team libraries, refer to Figma's official documentation.
  2. In the left sidebar, go to Assets, find your icons marked with the book icon, and publish your library.
  3. In the shadcn/ui kit file, enable your newly published icon library.
  4. Enable your newly published icon library from the Assets panel.
  5. Add them to your components — for example, inside a Button.
  6. Remember to update the color variables so your icons match the shadcn/ui kit styling.

After completing these steps, you can access your custom icons through the assets panel, seamlessly integrating them with the shadcn/ui kit components.

22 of 45