What's the best way to create a fill effect for icons in Figma?

Other Questions Figma
1

I’m working on a project in Figma and I want to add a cool effect to some icons. You know how Instagram’s navigation buttons change when you click them? That’s the look I’m going for.

I’ve got three SVG icons that I want to modify. When a user clicks on one, I want it to fill with color, just like Instagram’s buttons do. I’m thinking I might need to make two versions of each SVG and swap them out on click.

Does anyone know how to pull this off in Figma? I’m not sure about the exact SVG code or method to use. Any tips or tricks would be super helpful!

Here’s a quick example of what I mean:

[Before click]
Icon outline only

[After click]
Icon filled with color

I’d really appreciate any advice on how to create this effect. Thanks!

2

I’ve tackled this issue before and discovered a method that avoids creating multiple icon versions. In my experience, the best approach is to convert your icon into a component and then add a background element with the desired color behind it. By grouping them together and setting up a toggle property, you can easily switch the visibility of the background color. This means a single click in your prototype can transition the icon from an outline to a filled state and back, making the workflow efficient and the design easier to manage.

3

Creating a fill effect for icons in Figma doesn’t have to be complicated. One efficient method I’ve found is utilizing the ‘Boolean Groups’ feature. First, duplicate your icon layer. On the copy, apply a solid fill color. Then, select both layers and use the ‘Union’ boolean operation. This creates a single shape that you can easily toggle between filled and outlined states.

For prototyping, set up an ‘On Click’ interaction that switches between these two states. This approach maintains the icon’s scalability and eliminates the need for multiple versions. It’s a clean, professional solution that works well for various icon styles and sizes. Remember to name your layers clearly for easier management as your project grows.

4

hey, i found a cool trick for this! try using vector networks in figma. u can create a single icon that switches between outline and filled states. just adjust the stroke and fill properties. it’s way easier than making separate versions. plus, u can animate the transition if u want. hope this helps!