Hey Uria_Fassina,

I think what you want to do works pretty well with Rogie’s trick. You just need to set up the master component icon instance as an intersected element.

Hope that helps!

Now you made me more confused than before. I always use the “union hack” to set my icons and never could accomplish what you just showed.

What am I doing wrong?

Would you mind sharing this file?

Super thanks!

Haha, I hope that File makes you less confused and that it solves your issue

Have a great day

Hi Carl, your file works because you added the 3 icons as variants.

But if you separate them into 3 components, even with the same sublayer names (Vector), it won’t work, which is the issue @Uria_Fassina is running into (I assume).

This means icon sets must be built with one single “Icon” component, which is limiting.

Guys, I have the same problem and it’s driving me crazy. I have all of my icons set as separate components then I have a frame with no fill with the icon in it made as a new component with variants changing color and swap incense used. As a result the icons change but some of them won’t change their color (all the icons are simple path and I didn’t find any difference in them). Did you find a solution?

Same problem.

Problem appears when I use “Add swap property” for an icon in a Master button - after that icon will always lost/reset color.

If I use the old approach and don’t “Add properties” to the icon in the Master button - the colors are preserved and everything works perfectly.

Hi…I am having the same issue…I am using an icon as part of a component. the icon is a different colour to the Icon set…when i instance swop the icon it reverts back to the original colour

Same issue here.

this bug still seems to happen.

Swapping the icon instance in a button causes icon to revert back to the original color instead of keeping the color set in the button component.

Tried some hacks people mentioned in a closed thread with no success, such as:

• Create a union operation of the icons then move them out of the union


• Force the icons to another color then back to the desired color


• Make sure icons are flat and vector layer is named the same across all icons
  
  
  
  
  

Hi, I also have icons as separate components but instead of a frame, used a square vector to determine padding. Would adding a frame make a difference?

The icon will change colors with swap instance but not always. Sometimes it’s only parts of the icon that change and/or the vector for padding changes to a solid. Is anyone else having a similar issue with the padding vector or frame becoming solid?

You should have the same naming for vector instances. Exp.:

[Icon name]

⌞Vector name

Arrows-up

⌞Icon

Plus

⌞Icon

Notification

⌞Icon

Hope this issue about that.

I found a simple solution before Figma fixed this issue.

Check it out here https://www.figma.com/file/RlxdrMNRvhOXBLtshSyAYd/Icon-instance-swap-color-fixed!?type=design&node-id=0%3A1&t=7uyU70jA6VyJLtWn-1

That is spot on. It is the same solution that end up working for me.

In a summary: make you icons ONE layer only, all named the same.

This problem will lead me to give up on Figma 😮‍💨 After making a change in instances, If I make another change in the master component, this change does not reflect to the instances anymore. Of course, sometimes I may want the opposite, but most of the time, seeing that the change I made in the master component does not apply to instances is extremely frustrating. This problem is already well known. Many people have been reporting this issue for 3 years on forums, yet the fact that no solution has been provided makes me feel hopeless. I hope they take this very basic request into consideration.