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:
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
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.
I have a similar issue. We have already updated all icons to use:
- flattened art, named the same “icon”
- An icon container that helps when placing icons as subcomponents elsewhere, also
The icon color overrides work when we place them in buttons or other components (at least as static instances). However, when using interactive prototyping the color reverts back to the same color as the icon component defaults. I don’t understand why it would work as a static instance but when making it interactive it resets?
We have over a hundred icons with 4 variants for each size and really don’t want to keep having to update these, so a long-term solution would be epic!
This is not a “right way”. This is a tedious, unnecessary slog that Figma could fix by just thinking about how web components work, and not reinventing the wheel in awkward triangular shapes every time.
This is a problem that happened a long time ago (before variants and properties). And This is how I solved it. I have a component for the content (icons / text) and I mask it over a rectangle which I use to define the color.
I was able to fix this in the design system file I’m working in!
The issue is that if the icon color in the iconwrapper is defined with a variable, it will NOT be overridden when swapping between sizes/states in nested components and instead reset to the color in the iconwrapper.
If the icon in the iconwrapper is defined as default #000000, it WILL be overridden when swapping between icons/sizes when it’s nested in a component.
Hey there! In this thread someone mentioned using a color mask. This works pretty well as now by exposing the instance of a placeholder icon you can have a lot of control of an atomic button.
For dev handoff, just name the layers correctly so they know what’s going on. We can switch color and sizing with the instance swap and everything retains preselected colors.
Thank you! This solved my issue… had a base component (that held an instance of an icon) that I used to create other components. My colors override was not sticking to the icon when I swapped variants of the base component. I thought it had to do with the nested instances but didn’t realize it had to do with the variables I attached to the original base component.
When I was overriding the background color of the base component, that stuck throughout all the different variants, but then when I changed the color of a nested instance, that didn’t.
Thank you so much for this!
This has finally solved the issue I was having. I have an “Icon” component with different size variants that I nest in all of my other components that use icons, and I was using a variable for the color of that component which was always overriding the color when I switched variants whenever I wanted to use a different sized icon.
Detaching that variable and just using a hex value for the color stopped that from happening and now everything is working as expected!
