I have been working with the new component properties to create buttons but I quickly found an issue.
If the button has an icon and I want to swap an instance, the icon doesn’t change color.
I went over it a couple of times and tried different steps each time but no change.
Is this a bug or am I missing something?
Thank you!
It’s a bug that I’m watching closely because I can’t adopt these features in our design system until it’s resolved. Here’s the other thread, which I think is categorized incorrectly: Component Properties & Variants Bug - #13 by Jared_r
This guy figured it out 
If the icons have the same layer names you wouldn’t be able to search for their unique name! I don’t understand this…
as far as i tested only the layer that recieves the color override needs to have the same name, so you can still name the frame or group
@anon24157657 you might want to check out my reply in another thread in the forum discussing color override preservation for icons.
As @Dominik6 described, the icon component’s frame can have a unique name, but the shape within should be standardized. Something like “Shape”, “Vector”, or “Icon” like this:
@Craig_C, curious if this is a naming issue on your end, or something else? If you have a file you can share view-access to I can take a closer look.
This doesn’t solve the issue for me. My icons have the same layer names (“Icon”) and still, color overrides are not preserved.
Here you can see a link component with the placeholder icon layer called “Icon”.
Here is the icon, with the layer named “Icon”.
Here is the link component in default and hover states. You can see the hover icon remains black, while the text link color is a darker version of the default state.
Has anyone found any other options to fix this?
Hey everyone,
I came across the exact same problem as everyone else. And I found a solution that might work for others, I hope.
All my icons have the same structure and the same naming convention and everything. When changing the component to another variant let’s say another state. From default to disabled. The icon changes in color, however when changing the state back to default, it doesn’t change the color of the icon anymore. It is stuck.
SOLUTION:
Change all your icons colors to something else (Let’s say they were gray, change them all to black). And see if the icons now adopts to the state of the variant. If it does, then now change all your icons colors to your desired color again.
I found out that this is possibly a glitch in the color styles. Hope this works and helps others.
Hi @Sand.on
When you use an icon instance in a new component, you should redefine its color even if it already has the desired color. Just change it to something else and then give it the color you want it to have for that state.
If you don’t define the color of an icon when using it in a component that has multiple states, you’re not giving that component the information it needs to manage the transitions between states.
I hope this solves your issue 
Hi Raphael. Thanks for the reply. I’m not sure I understand though. When you have a button component in a library, for example. I don’t know how you could redefine the color of an icon in a hover state from a project using that library if it’s not your component default.
I did take @Mastermind’s approach though and changed all of the icons’ colors back and forth. That did not fix the issue. So I went back through all of the components in my library and reselected the colors of each placeholder icon back and forth in each component state, then republished my library. Which seems to have updated whatever was causing the issue. This is an obvious bug that Figma hasn’t addressed in months. My library is pretty extensive, but I don’t know what a reasonable fix would be for someone who has hundreds of components. Yikes.
Also don’t mix stroke-based and fill-based icons, or at least be aware that Figma cannot handle color changes between them without false behavior.
That is the reason I always need to convert and flatten each icon component…
Yeah, all of my icons are flat as well. No strokes.
Annnnd my icons are back to not recognizing overrides. Great.
@AlicePackard this actually solved my issue.
If renaming the icon shapes/paths to a unique name is not an option, you could use the base icon/union hack by @rogie (just Google it)
Is the problem from the title of a thread → “An icon doesn’t change color when making an instance swap with the new component properties” still unsolved? @Figma_Support → When do you plan to solve the issue?
Same names everywhere works for me like was mentioned here or in “new” video tutorial (Override preservation on nested icons - YouTube) for classic button.
But then I put buttons into another component like “Button navigation”. And when using it’s instance, inner button’s state property, which changes color of text and button now not change color of icon. Even thougn it works for alone simple button instance 
thank you. The youT solution saved me 
