How to persist color overrides between instance swaps?

Here’s what I’ve learned about this: Color overrides, and in fact all overrides, only persist if the swapped components have the same layer structure. If your icons have a different number of “vector” layers, only the number of layers from the original icon will transfer their color overrides to the swapped-in icon. If you can merge/group any vector shapes in your icon using the “union” operation, they will look like one layer and the color override should persist when swapping. Hope this explanation made sense!

I wish that was true, but it isn’t. I just tried it.

After a ton of trial and error, here’s what I learned about preserving color between instance swapping and for me, it was specifically swapping icons.

Make sure the objects in which you want the color to be preserved on have the same layers names.

On the example, I have two icons with two colors and I convert these two colors into white while hovering.

I named the icon shape-layers as primary and secondary, and then on the hover-able component I applied the color override on the layers secondary and primary.

That way If I swap this icon with an icon that also contains layers named primary/secondary, these layers will also receive the color-override.

Hey there @Daniel_Racca. I am using an icon wrapper to manage the icon size within nested components. As I do also want to have the line thickness of the icons the same also when appearing in a different size, I have created them using a stroke. But when I want to add a variant control to switch to a filled version the layer structure can be the same but the color will be recognised as stroke and not fill and therefore the override breaks.
Do you have a solution for that too? Would be nice to have a solution for this issue @Figma_Support

Hey @Daniel_Racca That’s actually not the solution to my issue. Maybe I was not entirely clear about the topic. As you can see in your example when you change the instance to the outline version I want the color overrides to remain the same. And that is simply something that is not working yet properly.
See if I do not want to work with duo color icons but just need a single color for both the line version and the fill version of the icon (both already inctances of the master component) I can control both colors (line = stroke-prop and fill = fill-prop) to be overridden by just a single click on the parent frame’s color inheritance. When changing the icon within that (including the same layer structure) the inheritance does not work properly.

Maybe it is more clearer now. I am not sure, haha.

A little bit of magic with masks

And you can keep icons just b&w

Make sure that the layer that you are applying the color to has the same name and height and width across all the other swaps.

The screenshot below if from the Figma version: Aug 24, 2023

the color override works through the instance swap for me because the following two conditions:

1. all of the 3000 shapes have same name (“vector” in my case) and
2. I have directly overridden the colors of the shapes (which have the same name, height and width) and not on the frame of the icon (which has unique names).

It doesn’t work here. I made a component with an icon and made all its states, but when I want to use that component in another frame and change de Icon it doesn’t go the color together