Figma suggests using Font Awesome to add icons, and while it is handy, it is complex to implement. In this guide, we will provide two easier approaches with a demonstration to help you add icons in Figma to get you all covered.
What we cover
Using Free Icon Websites
You can download your desired icon from the vast collection of icons suitable for Web and App development through the websites that offer free icon packs.
Note: For demonstration, we have considered Google Icons, but feel free to check all websites and use the one that best matches your requirements.
- Open the desired free icon websites and use the associated search bar to search for an icon.
- After you find the desired icon, click on it and download it as SVG or PNG. We suggest downloading it as SVG for more control, as they can be adjusted without quality loss.
- After the icon is downloaded as SVG or PNG, open a design from Recents or create a new one using the Design File button.
- Once the new or existing design is loaded, navigate to the top left corner and click on the Figma icon. Now, from the options displayed, click on File and then Place image.
- From the selection, select the SVG you downloaded earlier, and you have successfully added the icon to Figma.
Using Icon Plugin
While downloading icons and adding them to Figma is easy, it can be time-consuming, and not all SVG offers the flexibility to modify and edit. As an alternative, you can use icon plugins in Figma.
Note: For demonstration, we have considered Iconfiy, but feel free to check all Icon plugins and use the one that best matches your requirements.
- Open a new or existing design, and from the toolbar, click on the Plugin icon, search for Iconify, and then Run.
- After the plugin is loaded, select an icon pack from the location and click on the desired icon.
- On selecting the icon, you will find several options, from which click on Import Icon. If you want the icon added to the design as a component, click on Import as Component button.
- If you have done it right, the icon is added to the design as a Frame, and it is capable of making changes to it.
Wrapping Up
Congratulations on learning how to add icons in Figma!
While both approaches let you add icons in Figma, we suggest using the approach that gives you the flexibility to modify and edit icons. If you’re not happy with these, try creating an icon from scratch for complete control.
