I went over this with Figma support for days…they finally issued it as a bug. So, hopefully it will be fixed in the near future.
2023 and this bug still seems to happen.
Swapping the icon instance in a button causes icon to revert back to the original color instead of keeping the color set in the button component.
Tried some hacks people mentioned in a closed thread with no success, such as:
- Create a union operation of the icons then move them out of the union
- Force the icons to another color then back to the desired color
- Make sure icons are flat and vector layer is named the same across all icons
Been trying to find a solution for this but I’m just stuck.
I have a component created on the right here. And a few instances on the left.
Say I want to make an update to the colours and I change them on the component, everything (the tag, the circle) automatically updates the new colours to the instances EXCEPT for the icons. The only instance that has the override is the one identical to the parent component (i.e. profile icon). The rest stays to the original colour.
I have every layer named the same with the same structure as suggested in the thread above. Any idea what I could do to make this work so I won’t have to manually change each and every instance?
Adding an additional example - I am creating an Icon-Button component - and the default settings of that icon are the “More” icon using a Gray color style. This button component works well for most of our needs, but our Top Navigation is dark blue and uses white icons. When I want to use an instance of our icon button and change the default color to white + swap the icon from the default “More”, it does not receive the color override correctly.
My screenshot shows the layers
- Icon Button (Instance)
- Icon Name (More/Help/Email, etc)
- Icon Layer Name (Vector)
If I’ve read this thread correctly, will I have to change the Icon Name layer? I’ve flattened all my individual Icons
Here are the expected/ideal changes
-
Icon Default State - More Icon, Gray (working)
-
Icon Hover State - Light background color, teal icon (working)
-
Icon White Instance Default State - Any icon, white (working)
-
Icon White Instance Hover State - light background color, teal icon (broken)
Hey guys I found a fix for this: Just change the opacity of the layer!
Use Blend Mode Opacity!
Change the opacity of the icon instance (Blend Mode= Normal = 50%) ! Works great for me
2023 and I’m going crazy trying to create an IconButton and avoid this from happening. Did you manage to fix it?
You looked at the file and prototype from this post: Vector fill color (nested component) doesn’t change back to the one specified in the default variant after interaction - #12 by tank666? Is it not working for you?
This is very strange, because the union trick always works almost without problems.
See the following:
Thanks for such tricks…
But in my case I flattened the icons and Renamed the vector layer as vector for all the icons which helps Figma to do 1:1 Mapping…
It might be useful for the community
Outlining strokes, then flattening everything and renaming every vector to “Vector” worked for me on basic elements.
However, it doesn’t work on nested instances!
In my case I am using a Primitive Button that is controlling the height, padding and font weight of my buttons, that is then instantiated in my default button component.
In this case, my icon color becomes the one defined inside the Primitive Button, and isn’t overridden by the default button…
Any help on this would be greatly appreciated
After a day of fidgeting with this I have figured out how to fix my problem, so for anyone having the same issue:
When using icons as atoms, you should also rename the instance inside your primitive element so that the override works correctly.
Here I have renamed my instance of ic_Placeholder_24px to Icon Left and Icon Right, and my buttons now work as expected!
I am glad to have found a solution for this (special thanks to @Molly_Hellmuth’s discussion on Icon Management Best Practices), but I still think this is a feature that is important enough that it should not be this confusing to work with.
Yes that works for me as well!
But renaming instances every time is tiring job I wish we could have solution for this too
Easiest fix for now, thank you!
I’m not even sure how to reproduce that I managed to make a component with an instanse with union it. Couldn’t make the union where it needs to be and transform the other union to vector. I copied an ucin from that file to watch it but no success. Other topics with solutions don’t work on my side and are closed for coments. Aslo isn’t that quite time consuming to make it for a whole set? I’m despared
I’m not doing sth right. I don’t know how to meke the object be a vector and with inion it’s not working
You don’t need to use Union, try using Flatten instead
But do so in the main icon component. There, rename the vector to something generic like Vector, then reset all changes in the button icon component, and that should be it.
Thank you, but I still have the same issue. With the lock it still gets grey no metter what and with the other icon some part are ok, others not. I updated in the original file, published the changes, updated in the current file. I aslo tried
making the input component inside the icon file
Also doesn’t this means that all of the icons would have the same name? How do you search in the library in that case?