This is an ongoing issue in Figma and many people have different opinions and fixes.

You might want to do some searching and research on similar issues to see varying thoughts and form your own way of trying to fix it.

There are folks that insist it is as simple as making sure every icon and nested object is named exactly the same. I have had terrible luck trying this and I just get angry.

Personally, I put every icon in a UNION. This is a little difficult to get used to because a union will hug everything and make you mad because you want it to be a set size. To fix that, put your icon in a union (you kinda have to do two icons to apply a union, then delete one)…put the union in a FRAME. Apply constraints or auto layout to the frame and set size on that. It is easy…but tedious.

APPLY YOUR COLOR SETTINGS TO THE UNION, not to the nested icon.

The Figma help has decent info in explaining unions. But it takes some effort to wrap your head around it for some of us.

" * Union selection: Union combines the selected shapes into a boolean group. If the objects overlap, the new shape’s outer path consists of the composite of its sublayers’ paths minus any segments that overlap. The stroke would then be applied to that outer path ignoring any path segments which overlap each other."

https://help.figma.com/hc/en-us/articles/360039957534-Boolean-operations#:~:text=Union%3A%20Union%20combines%20the%20selected,segments%20which%20overlap%20each%20other.

Google around for Figma Union Hack to find a lot of info.

https://www.figma.com/community/file/1308188795212541398

If you want to post your file, I can make you an example and send it back.

Oh boy! That’s a long thread.

Thank you for sharing those references with me. I’ve read their fixes and I tried those that I haven’t tried yet.

Here are my findings:

• Keeping the same name (vector, icon) on the layer for color override isn’t working (current state)


• I tried changing all the icons to another color and then assigning the “original colour” back, but it didn’t work either


• I did a “union” test with a single icon, but I think that I didn’t quite get what the users were suggesting? I am not sure that I’m following the suggested structure (?)
  
  
  
  
  
  
  

I’d be very grateful if you could look at my file and see if you can spot the hack. I moved my components to this new file so feel free to move and modify what has to be done.

Button File.fig (185.0 KB)

Thank you for your help.

It is literally shorter than your initial ask thread.

Oh, I was referring to the threads that you shared (the answers make them a long read).

I just realised that my writing might have sounded like a complaint but it wasn’t 🙂.

I am grateful for the help on pointing me to the possible solutions to my bug.

Thank you.

Update:

The error was on the naming of each flattened vector.

At first sight is hard to see, but some icons had a space after the name: 'Vector ’ instead of ‘Vector’.

If you’re facing a similar issue, you’ll have to check each icon, one by one to make sure you don’t have any spaces on your names!

Maybe you could just change your tokenization. It would be Best practice to use one local variable called Button/Font/Hover/”Color” and Connect both colors to this. You could then reffer another token „Font/Color/”Color”.

Thats a different approach of connecting colors to different tokens.