Joining you all to scream into the void at @Figma_Support that this issue really defeats the purpose and utility of nesting icon components. I’m using a base button component where if I change the instance of the icon in an instance of the core component and then swap another variant on the instance, the color of the icon reverts to the color it uses in the base component. I follow the flatten-and-naming pattern as described throughout this thread.
1 Like
You should naming the layer inside the icon such as:
Icon component> Live area > Vector.
Keep all icon has the structure like this. ( Layer name is the same with Live area and the last is vector).
Hope it will help you
1 Like
The layer name in the icon component needs to be the same for each icon.
Hey, I have a complex indented components for my Design System and I still have the problem same if vector icon all have the same name.
1 Like
I am also having this issue. I have meticulously ensured that layer structures and layer names are all identical across variants, and across all icons. I am still getting icons not keeping their override colours when viewing in prototype mode.
Imagine the frustration of seeing people post “fixes” and “workarounds,” none of them working, and just having to accept that Figma don’t care and are perfectly happy to let designers look like fools showing stakeholders a prototype that looks like amateur hour.
1 Like
I can confirmed that this solution worked for me. Thanks a ton.
Nope. Does not work for me even if the vector layers are one shape with the same name. This is a bug. @Figma_Support
Hi @Mani_Noroozi , can you share the file (or a copy of the file) with our support team? They can help fix this with you here.
Boosting this. It feels like the way overrides work is really unpredictable at the moment, I keep having to reset everything to get them to apply.
This has been an old issue since variant introduction Day1.
The problem is, I can’t even try the Outline Stroke or Flatten because all icons react differently. This bug has also been frequently reported by several people over the last years in this community.
It’d be hard to reach the Adobe Illustrator level but I am expecting these bugs to be adjusted
Anyone who is using a Font for their icons (Material Symbols, Font Awesome) find a way to solve this color override problem? I love that our icons will opticall scale for the larger sizes but we’re finding that when swapping nested instances of icon components made with a font it’s not preserving the color override. Components made out of text don’t seem to have color preservation when swapped… Am I SOL until the Text Properties is introduced for variables?
Did you ever figure it out?
Figma is filled with such problems I simply gave up =( I don’t want In app purchase for plugin I want things to work correctly damn
I’ll also boost this thread, this is being a real hassle to handle when I want to change an icon and it doesn’t maintain the color I defined in the design system
Hi,
You can find the solution here:
3 Likes
Thank you! Thank you! Thank you! Thank you!
This problem has been going on for a year and a half. And instead of solving it, Figma rolls out absolutely unnecessary new features and so on. 
Add another level of nesting of variants (in this case, variants for button size) - and the color of the icon will start to glitch
1 Like
Same here. Figma please address the issue. It has been too long and this is more important than the new feature since we have to spend hours if not days to fix the color overwrite across the components every time we update the icon.
thanks. It has fixed the issue on my side.