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?

@tank666 heyy that’s not working out with my case.!

Can you help out with other solutions?

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:

@tank666

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

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?

It functions effectively when the layer names are the same across all icons. In my design system, which comprises approximately 80 icons, the layer names are uniform, leading to seamless functionality.

Hi @Max_Swearl! I came across a similar issue, tried your approach but it still didn’t fix it. This is how my components look like:

I’ve renamed them as you (and the article) mentioned but still when I take out a child of the icon button and change the icon to some other icon and then change the size property (defined in primitive) then the icon takes back the primitive’s icon colour. I’m not sure what I’m doing wrong. 🤨

Any feedback would be appreciated! 🙃

Hi @Deepika_D!

I am not certain, but I think this could be caused by the variants in your icon system.

In my case the primitive component is the simplest version possible and using auto-layout

Thanks @Max_Swearl for the reply!

Is your approach working even when you instance swap the icons?

When I swap the icon then it changes to primitive’s colour. 😕

A glimpse of my issue.

Hi @Deepika_D !

Yes that was actually what I needed to achieve (i.e. instance swap where I would still get the correct color from the parent component e.g. in a navigation menu or a button).

I fiddled a lot with this, and the 3 main things I got from it are:

1. Flatten all the vectors in an icon (and outline all strokes), and give it a generic name like Vector
   
   a. Color it with an unused color so that it’s clearer when it’s not working (good practice), but I’m not certain it changes anything in the end result


2. Use auto-layout and adjust the padding until you get your desired height/width
   
   a. Not sure why I did this but I remember it being important. It may have more to do with dimensions properties of instances


3. When instancing the icon in some other element (e.g. a button), rename the instance to a generic name like Icon

The last thing I got was to refrain using icon variants. For example, I won’t be using a main ic_Chevron_24px icon with 4 variants, but instead create 4 separated components called ic_Chevron_Left_24px, ic_Chevron_Right_24px, ic_Chevron_Up_24px, ic_Chevron_Down_24px.

Thanks for sharing, I’ll try this out