How to use icons in Figma
A simple tutorial and two free UI icon sets in a .fig file
The popularity of Figma has exploded this past year. We at Iconfinder are also among the fans. We love using Figma for wireframing, presenting user flows, and creating simple style guides.
In this post, we will go through the essential how-tos of working with icons in Figma. Use the table of contents below if you want to jump directly into a specific section.
- Accepted file formats
- Importing icon files to Figma
- Resizing an icon in Figma
- Recoloring an icon in Figma
- Changing the stroke width
- Keeping your icons consistent across your design (with the help of Components)
- Exporting from Figma
- FREEBIE — two free UI icon packs in a Figma file
Accepted file formats
Figma allows you to import quite a broad range of image file formats: PNG, JPG, GIF, SVG, SKETCH, and FIGMA.
When it comes to icons, we always recommend going with SVG for a seamless scaling experience. If you have a bundle of icons, it’s quite common that it will be presented in a .sketch or .figma format, and both of them will work just as well.
Importing icon files to Figma
There are several ways to get icons into Figma, and they primarily depend on the file type that you are dealing with.
Two places where imports can happen in Figma are the File Browser window (that’s where you see a list of all your Figma documents), and your Canvas (that’s an open Figma document).
If you are importing an SVG or PNG icon, drag-and-drop it directly into a canvas.
Note that when you import an SVG, it will appear in a frame like this:
If you want to get rid of the frame, you can change it into a group from the properties panel on the right.
If you have a Sketch (.sketch) or Figma (.fig) file, the import should happen at the File Browser window. You can either drag-and-drop your file or click the “Import File” icon.
Resizing an icon in Figma
You can resize your vector icon by holding the Shift button and dragging one of its corners. If you need pixel precision, adjust the size in the properties panel on the right. Don’t forget to click the “Constrain Proportions” icon before changing the width or height.
Recoloring an icon in Figma
Like almost anything in Figma, changing color of an icon is pretty straightforward. Make sure you import the icon in SVG format. In the Layers panel on the left, click on the element you want to recolor and change the color in the Fill section in the properties panel. You can set the color value in HEX, RGB, CSS, HSL, and HSB.
Changing the stroke width
If you are working with outline icons, you might need to adjust the stroke width. Especially if you are dealing with icons from different sets. This can be done from the Stroke section in the properties panel. Start by changing the stroke alignment to “Center” and input the desired line width.
Keeping your icons consistent across your design
When you work on a larger design in Figma, you are likely to reuse some of the UI elements, such as buttons or icons. If the design is large enough, it’s easy to lose track of each individual icon. At the same time, if you have to make an adjustment, you don’t want to waste time updating every single instance of an icon one-by-one.
Luckily, Figma has “Components”. Components are interface elements that can be reused across your file. They allow for changes to be seamlessly applied across your design. You can create a component from layers, groups, and frames.
To turn an icon into component, select the icon in the Layers panel. If you are using a vector icon, make sure to select the full group or frame that represents the icon. Then click the “Create Component” icon in the top toolbar.
You will now notice that the layers representing the icon turned purple. That’s the indication that this icon is now a reusable component. This element will be called the master component.
To reuse the component, you should create its instances. Instances are the duplicates that will acquire styling changes made to the master component. There are several ways to achieve that, but, perhaps, the easiest one is by holding the “Alt” key and dragging the instance from the component. You can also copy-paste it using the “CMD+C” and “CMD+V” (“Ctrl+C” // “Ctrl+V” for Windows) shortcuts.
Notice how the newly created instance component acquires a single diamond icon in the Layers panel, while the master component is marked by a quadruple diamond icon.
Eventually, you will have a bunch of instances in your document. To edit everything at once, you need to locate the master component. You can do so by right-clicking the instance and choosing “Go to master component”. You can also locate the master component from the properties panel after you select the instance.
Now, when changing your master component, the other instances in your document will acquire the same characteristics. Let’s change the color of our Twitter icon. Make sure you select the right layer when recoloring.
All the Twitter icon instances were smoothly updated by merely changing the color in the master component.
It’s likely that you might want to have some variations of the same icon across your design. If you change the characteristics of an instance, it will override. This means that only that instance will obtain the new characteristics.
If you want to reset the override changes applied to the instance, select it and click “Reset Instance” icon at the top toolbar.
You can also detach the icon instance if you don’t want it to acquire changes that you make to the master component. This can be done from the properties panel.
The GIF below demonstrates how quick it is to work with icon components.
Exporting from Figma
You can export your designs as PNG, JPG, SVG, PDF or save them as Figma file (.fig). The exporting settings can be found in the properties panel on the right.
You can choose to export individual elements in your file or the full graphic. If you export multiple elements, they will be bundled in a .zip file.
There are additional export settings that can be found by clicking the three-dot icon in the Export section. For example, if you are exporting an SVG, you can choose to include “id” attribute, outline text or simplify stroke. You can find a more detailed description of the exporting options in this article by the Figma team.
If you want to save your document as a Figma file, click on the hamburger menu icon in the top left corner and choose File→Save as .fig.
Figma freebie
As a little bonus, we have created a Figma file with free user interface icons for you to practice with 🙌
You can download it here: bit.ly/figmafreebieuiicons.
We hope you’ve learned something useful about using icons in Figma. If you have any questions, feel free to ask us in the comments’ section.
Icon sets we used in our examples:
