Skip to main content
Solved

Can't override color of the icon (instance of a component)


Roman_Liminal_Designer

Hello folks! I’m using Figma for a long time, but haven’t seen this issue yet.
I created a set of components for vector icons. The structure of each component:
{icon name} => “Vector” (see video)

When I use an instance of some icon, I can’t change the color of this instance. But if I detach the instance, the color is changing well. Other components that I created work well. I tried to copy icons, detach them and create new components - the result is the same 😦

What’s the problem? I don’t have any ideas why it doesn’t override. Tried both Figma and Figma Beta.

Best answer by Roman_Liminal_Designer

Okay, folks, I fixed the issue. Anyway, would be glad to hear why it was happening.

So, the layer inside of the icon frame called “Vector” was flattened, but to fix the problem, I needed to flatten it once again. It starts to work well only after the second flattening.

Why? I don’t know.

View original
This topic has been closed for replies.

10 replies

Roman_Liminal_Designer

Okay, folks, I fixed the issue. Anyway, would be glad to hear why it was happening.

So, the layer inside of the icon frame called “Vector” was flattened, but to fix the problem, I needed to flatten it once again. It starts to work well only after the second flattening.

Why? I don’t know.


Andrew_M
  • 1 reply
  • February 27, 2022

Thanks for this! 🎉 Following your steps helped fix the issue for about 50% of my troubled icons. I continued messing around to find a solution for the others. For anyone else who comes here in search of guidance:

As noted above, doing flatten a second time works. Doing it a third time created the problem again. Doing it a fourth time fixed the problem. (And so on.) So: don’t flatten multiple times in a row to “make sure it sticks”.

For the remaining icons, I needed to enter the vector editing mode, click on the closed vector areas, change those fills to be some other color, and change those fills back to the color I wanted (default black). That seemed to cause recalculations to fix the issue. Repeat for each icon giving you trouble.


Jordan_Mann

The extra flattening step helped me with my troubled icons, thanks so much, this was really puzzling me!


shohei
  • New Participant
  • 9 replies
  • April 4, 2022

I encountered same trouble but this thread helped me out.

In my case, the problem occurred when I used Fill-Rule-Editor to change the fill rule.

Here is a test case.

Figma – 1 Apr 22

Taylor_Palmer

I’m also using Fill-Rule-Editor like @shohei and having the same issue. Using the repeating flatten technique didn’t work.


shijia.me
  • New Participant
  • 15 replies
  • July 22, 2022

Why figma do it?? I have the same issue. 🥲


Yulia
  • 39 replies
  • August 12, 2022

I have the same issue. 😡

“For the remaining icons, I needed to enter the vector editing mode, click on the closed vector areas, change those fills to be some other color, and change those fills back to the color I wanted (default black). That seemed to cause recalculations to fix the issue. Repeat for each icon giving you trouble.” - Thanks for the tip, this really solves the problem 👍


Cortney_Reber

Ug! Same issue. I have a vector based icon library and I noticed this is only an issue for me when I use icons custom built vs icons pulled in from a third party library (Material Icons). Clearly something they have that the custom icons don’t.


koyali
  • 1 reply
  • August 29, 2022

Same problem here, impossible to override colors from a vector logo I created directly in Figma, unless detatching all components instances… This is totally killing the purpose of working on Figma. I’m very tired of fighting this bug. How can so many months of hopeless workarounds pass without even an answer from Figma about this…?


  • 0 replies
  • November 27, 2022

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings