How to change an Icon-Image Colour in Figma.

Being a Developer, I always wanted to learn how to design a world class product from scratch (on my own 😅). Recently i have been learning how to design an app using the right tools and process, primarily using the already well established tool, Figma. As Figma supports almost every popular image-type out of the box, and with its brilliant collections of available plugins (for free 😁) we can drag and drop a design for any app or website quite easily.

Figma Logo
Figma Logo
Figma

Changing the colour of Icons.

For my Icon needs i tend to use StreamLine Icons, one of Figma’s most widely used plugins to get any desired shape into the design. You can find the plugin here.

Select the Right Plugin
Select the Right Plugin
Right click on the Frame and select StreamLine Icons from Plugins menu.
Select the HomeIcon from the StreamLine Icons Menu
Select the HomeIcon from the StreamLine Icons Menu
Select the Home Icon.
Icon with White Background.
Remove fill from the design menu on the Right side.
Icon without the background white colour.
Select the Rectangle from the Shape-tools on the toolbar on Top-Left.
rectangle on top of Icon
rectangle on top of Icon
Draw the rectangle on top of the Icon. Adjust the size to match the dimensions of the Icon.
Group selection
Group selection
Cmd + click on the Layers to select them.
rightclick menu to select Use As Mask
rightclick menu to select Use As Mask
Right-Click Menu -> Use as mask.
results
results
Results 🎉
Final icon in red.
Final icon in red.
Icon in Red.
Final icon in blue
Final icon in blue
Icon in Blue.
final icon in multiple colors gif
final icon in multiple colors gif
Icon can have any colour.

Software Developer @ Beat81, Berlin.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store