How to Change Color of an Icon in Figma?

How to Change Color of an Icon in Figma?

Ok, if you're searching for an answer to this question then there's something I need to explain about how figma images and layers work: on Figma you can upload JPG, PNG or SVG files. JPG files are most images, PNG files have better quality and most of the times they have transparent background. 

SVG files are vector files. Vector file images are scalable which means no matter how much you zoom or increase them in size they will always look sharp. 

How to Change Color of an Icon in Figma?

You can only change color of icons if the icon is an SVG. I personally use a plugin for all of my icons called Iconify. It's free to use and it looks something like this: 

You can search for any icon and import it on your canvas. Once you've placed it and it's resized the way you like you can just click on it and change its color from the right sidebar. 

 You can even add gradients and effects on the SVG icon. There's many types of gradients to chose from in Figma. 

Here's a more complex icon I've uploaded. Again, it's an SVG image, it only works when it's SVG. You can see that Figma automatically recognizes all the colors in the icon and groups them so you can easily change them. 

If you want to change just a specific part of the icon just double click on the icon until only that specific layer is selected and pick a color. 

So, in short:

You can only change color of icons if they are SVG icons. You can use plugins that have SVG icons or you can find them on the internet. There's a lot of free plugins to chose from - created by the Figma community. 

I personally use storyset.com for my icons, there's options to change the colors directly on their website so you can even export them as PNG if that's what you're looking for.