Customization

Icons

To customize your project by integrating a different icon library into Ant Design System for Figma, you have two convenient methods to choose from:

Method 1: The Copy and Paste Approach

  1. Ensure your icons are in SVG format.
  2. Open the Ant Design System for Figma file.
  3. Navigate to the Icons page.
  4. Create a new frame and give it a meaningful name, such as 'My New Icons,' for easy identification in the assets panel.
  5. Paste your desired icons into this newly created frame.
  6. Select all the icons.
  7. At the top of the screen, click on the 'Create multiple components' button.

Method 2: Utilizing an Icon Library (Professional and Organization Plan Required)

Please note that this method is exclusively available to Figma users with Professional or Organization plans.

  1. Confirm that your desired icon library has been published to your team library in Figma. If you need more information on Team Libraries and how to work with them, you can refer to this guide.
  2. Activate your newly added icon library within the UI kit file.

Now, you are able to access the alternative icon library via the assets panel.

Copy & paste

  1. Make sure your icons are in SVG and copy them.
  2. Go to the UI kit file and Icons page.
  3. Create a new frame and rename it (for example 'My New Icons') so you can easily find it in the assets panel.
  4. Paste your new icons inside that frame.
  5. Select all icons.
  6. Click on the 'Create multiple components' button at the top of the screen.

Voila! Now you can use your new icons in your project.

Library

This method is only available for Figma users with Professional and Organization plans.

  1. Make sure your new icon library is published to your team library in Figma. More details about Team Libraries and how to use them can be found here.
  2. Enable your new icon library in the UI kit file

Voila! Now you can use your new icons in your project.

Copy & paste

  1. Make sure your icons are in SVG and copy them.
  2. Go to the UI kit file and Icons page.
  3. Create a new frame and rename it (for example 'My New Icons') so you can easily find it in the assets panel.
  4. Paste your new icons inside that frame.
  5. Select all icons.
  6. Click on the 'Create multiple components' button at the top of the screen.

Voila! Now you can use your new icons in your project.

Library

This method is only available for Figma users with Professional and Organization plans.

  1. Make sure your new icon library is published to your team library in Figma. More details about Team Libraries and how to use them can be found here.
  2. Enable your new icon library in the UI kit file

Voila! Now you can use your new icons in your project.

Get Ant Design System for Figma today

Speed up your design and development process

Stop wasting time on creating everything from scratch for every new project you start. Use pixel-perfect and handcrafted elements to design and implement your next Ant Design app efficiently.