An icon doesn't change color when making an instance swap with the new component properties

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 😃

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!