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

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.

Two ways of resizing an icon

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.