Skip to main content

When I try to change the colour of the icon, sometimes it will only change some parts of the icon.


The icons consist of a single vector shape and the variants have standardised layer naming and default colour white. Changing colour, the “selection colors” section in the right-hand side tool bar shows the change although nothing has visually changed.


I maintain a component library and use its components on other file. My icon24 component has currently 146 variants and I have issue currently with 7 of them. Changing the colour of the icons in the component library does what you would expect and does not reproduce a similar issue. The issue is present only on other files that use this component and it is the same icon variants that behave inappropriately.


Recreating a variant removes the issue but it might appear randomly on any of the other variants.


Please help 🥲


image

Difficult to tell tbh. Can I see the file?



  1. Remove the editable part, just in case it confuses Figma.




  2. Since you have them as a single vector, yet some parts get painted differently, it seems like Figma considers them to be vectors of different colors. I recommend you use a Union boolean operation on the original icon and then flatten to make sure they are all a single vector with the same color.



Thank you for your reply! I did what you suggested and removed the editable part. I had already used Union operation and then flattened the icons but I made sure I have done that for all of the icons. Nothing changed; the same 7 icons still have this weird behaviour.


I tried isolating the case by duplicating the component in the library and reducing the icons to two: one of which is expected to behave normally and another with this issue. Even this new component produces the error with the outlined icon as previously.


Component in library


This is how the component looks in the library


Component in use

This is how the component looks when in use in another file. I tried to change the colour.

There you go.

Figma – 8 Oct 24

Thanks! This seems like a bug that I suggest you report to Figma support. They need to fix this.

Is the issue that you cannot have one icon with the same colour? Put it simply…what’s the problem? I’ve looked in the file and I can change the whole icon to black, pink or whatever colour.

The main component seems to work just fine. Try changing the colour of the instance.


I think I’ve described the issue in detail above. If you took a look at the image where I tried to change the colour to green you’d be able to tell it’s not behaving as one would expect. Note how the “selection colors” show green only.

Okie dokie, best submit a ticket.

Looks like someone fixed this in your file by flattening the icon, I tested in a copy and that seems to work. So I guess you need to flatten it twice after doing a union?

Yes it’s always worked for me.

I sent a bug report to Figma and will mark this thread solved as it requires no additional discussion.

Reply


Terms & ConditionsCookie settings