How to preserve icon color override and size?

Have just implemented this trick so I can put up icons with hover states with the new interactive components. Kinda annoying because I’m going to have to slowly replace all my icon buttons across almost 100 files.

…So wild that this is so similar to something we used to do in Sketch to get colour overrides to persist in 2016/17.

I am still having problems with this. Keeping the icon layer name trick as @KubaA advised all the same within the .base / parent master components still doesn’t retain overrides…really frustrating…

Double triple handling entire design systems here we go.

I’m having a hard time understanding what Rogie’s set up offers that is different or better than using overrides and swapping with a simple flattened vector:

This ☝️ is not a union, it’s just a vector in a main component frame. The main component is named after the shape, and the vector nested within is named “Icon”, and this naming structure is what allows us to override an icon’s color (at the “Icon” layer level), swap the component with another, and that overridden color will persist after the swap is made.

Here’s an example of this happening when the icon is nested inside a component like a button. I used Rogie’s file in this example:

✔️ The pink color override persisted after I swapped because the vector layer inside the icon component shared the same name and structure.
✔️ The size of the icon persisted after I swapped because it’s following the size I set in my button component. All the original icons in Rogie’s file are 39x39px, and you can see I shrunk this down to 21x21px for my button component.

If I’m misunderstanding the use case for Rogie’s method I’d appreciate someone letting me know 🙏 I was surprised to see this thread for a lot of the reasons folks have already mentioned: this method reminds me of what had to be done in Sketch, and I very much don’t want to return to that world 😅

If folks would find it helpful, here’s a view-access link to the Figma file I used to create those screenshots and GIFs to get a closer look at the layers and whatnot.

doesn’t work

It looks like the new update allows people to use same layer name + structure to achieve it

for any components, to preserve override properties when switching, the layer STRUCTURE and NAMES of all layers inside all switchable components need to be IDENTICAL

Also unable to make this work. All icons have the same name, unionized the icons in the icon library and still not working. When I change state or theme (colour) using properties, the icons remain the origin colour.

Could you share a link to an example file?

To be honest, it seems like a lot of people in the Figma community get excited about hacky workarounds to things that should be straightforward. As a design system maintainer, I get a lot of complaints over things like this, and there is no reasonable way to solve them. Most designers won’t learn the hacks.

Thank you @Matthew_Ortega ! It’s ridiculous that you should need plugins / hacks etc to do something that is web standard. Icons should inherit component / variant styles. Just like text.

Figma’s problem here is that they’re treating icons like just another component, when anyone who has ever been on the internet can see they’re not buttons or fields etc. They are a language, just like text.

Sometimes I swear the figma designers don’t think like designers at all.