I’m building a big library and have a popular problem with icon color override which is not supported.
I’m have read a lot of topics and following them, unfortunately, it doesn’t work all the time in my case.
I created a button variant: a button with icons. Then I’m creating an instance and I’m replacing the icon symbol. The color keeps override. Hurra! I’m changing the state to disabled. The color keeps disabled override, hurra!
But when I’m changing the variant state ONCE AGAIN it keeps the second override.
In my case all icons are grouped into a variant too (per size). When I’m doing that on a figma example created by you, it still has the same issue when I’m changing the button state twice.
What? I have flattened vectors here, my man. Why should I have to need a workaround for them to inherit the colour I told the instance of the button component they appear in to be???
This is a ridiculous mess guys. Icons should ALWAYS inherit the styles of the button they appear in. That’s literally how icons are used. Why is this a problem?
Here’s how I did it. (importing from illustrator: copy/paste or as an svg file)
You will get multiple “layers” of the icon, depending on complexity.
The inner (vector) layers has to be merged (boolean group: union and finally flatten into ONE vector file).
Be careful while merging and flattening. Watch carefully as some may merge/flatten awkwardly, especially icons with a ton of layers. You may have to do it piece by piece until it all becomes one. Tedious. But it works.
That “vector” file should be renamed - consistently (across ALL icons). I named mine “ICON” (yeah, ingenious). You can name the actual icon component to what is appropriate - eg. “circle.”
Create your button etc. variants with updated icon component. Use its child component, and replace it with another icon. This should solve the problem.
Now that ALL the icon components are consistently named (ICON - on the inner vector layer) and has only ONE vectorized layer, this would work.
(VERY tedious, especially when you have already created a ton of icons - not doing it this way. I know. I did. I had to backtrack. But it is worth it and you learn how to do it the right way the next time)
This is an ongoing issue for over a year. If I look back it’s probably been two and Figma still hasn’t addressed it. Don’t expect them to either. We all still have issues with it, and it rarely makes sense. But you can expect 10 Figjam updates in no time, its been quite clear which product takes the priority.
I manage to make it work if the layer icon in the component it’s still named the same (let’s say Icon-left) and if the shape of the icon in the icon component is also still named the same (Icon color).
I’m having the same issue. Icons are all flattened, and have the same name. I’ve tried it with the icons as variants, and as separate components. I tried the mask suggestion, but the mask doesn’t stay connected to the icon when I update the icon.
This type of thing baffles me - it’s like figma designers and developers don’t know how web elements work. Icons inherit div styles, buttons always have at least 4 states (default, hover, focus, disabled), and dropdowns are a thing, my guys, and can have x menu items. Instead of making us build everything from scratch every time, can you not just create components that mirror what actually happens on the web?
You’re giving us flexibility we don’t need. I’ve created a million button components and variants I shouldn’t have to. Give us states as a concept, fix this interminable issue with icon colors (and sizing! wtf!), and give us dropdowns that we can add and remove menu items to as needed
While you’re at it, you can create: checkboxes, radios, tabs and badges as standard components that can be configured. These are components that look and work more or less the same everywhere online, and we’re not out here reinventing the wheel with every project.
I have the same problem as the original poster. This has been around for several years. Wish we could vote on this being a fix. I have to give my designers instructions that when they swap things in some places they have to change the icon colour manually. And i spent time making sure all my icon components have a nice “Vector” in the root, and nothing else.
Response I had from Figma looking at this bug. So I guess take it as final for now. Looks like they’re not going to touch it.
"After looking through the file I can confirm this is currently a known feature limitation in override preservation across multiple levels of nested variant instances.
This is something our engineering would definitely like to improve in the future, however we don’t have any updates on our immediate roadmap."
The reason why you face with this issue is your icons layer are separated from each other. You easily can select all layers from each icon and select “Union Selection” option from top menu. Problem gonna be solved.
it worked for me after i FLATTENED (CMD-E) my vectors and named all layers consistently The little arrow besides the layer disappears if the union or whatever has been flattened:
Problem:
