Figma Support Forum

How to preserve icon color override and size?

I have been trying to find a way to preserve the icon color override within my button component. As you can see here, I used the trick from Rogie (Perserve Icon Color Override) to apply union to the icon, and everything seems work.
Screen Shot 2021-03-04 at 8.24.52 AM

However, now when I swap an icon, the union makes it hard to control the icon size (even though all icons have a frame 24x24, the content inside are vary). It then affects the auto layout and size of the component. Therefore, I tried to add another frame to contain the union layer and set fixed size, but it still didn’t work at all.

With the old approach, which I have to change the color every time, it allows me to constrain the icon size within the button to be 16x16. I am wondering is there a better way to preserve both color override and icon size?

What if only the icon was wrapped in a union, and not the entire component?

You can see this file:

Thanks @tank666 for your file.

I have two large libraries I’m managing for my team (one for icons, one for UI components) and was struggling to make icon colors work for both dark and light theme for several hours this afternoon. Here’s what worked for me:

  1. Do the Union trick from Rogie’s file: for me, I duplicate my expanded icon in place (cmd+d), then union the two dupes, delete one of them, rename the union item to something like “color_fix”, the icon vector itself to “Union”, and the frame containing it all to the name I want for the icon (e.g. “keyboard”). Convert this to a component if it isn’t one already.
  2. Make sure all the items are set to Scale for height and width
  3. Make sure no color styles are applied anywhere in the stack; just some generic black color or whatever
  4. Publish the icon library
  5. Accept the icon library updates in the UI components library
  6. In the UI components library have a component with two icons in it, one for light them and one for dark
  7. Use those icon components throughout the UI components library file.
  8. Apply the colors you want to the light icon and dark icon (I applied the color on the level of the item labeled “color_fix”)

Doing all of that enabled me to actually see the icons scale correctly to several different sizes within different components and also reflect the correct color depending on which theme the UI component pertained to.

Thanks for the advices above. I actually remade all of my buttons :sweat_smile: in order to fix the icon size. One thing I learned is that Rogie’s trick works, but it’s very important to set a frame for the icon first rather than having the union then create a frame to wrap it.

I must say that this sounds like a workaround to a bug. Wondering if this will be fixed soon as it makes using variants and interactive components nearly pointless when there is an icon-placeholder

Update: problem fixed with naming each shape for each icon with the same name. Color override works properly now. There is no bug.


Variant icon color not being static is definitely a bug. I’m totally against hacks like this as it complicates the components, I remember the Sketch icon masks I had to maintain.

I don’t like hacks either, but I do like that my icons are now getting the right color for each theme, even when I override the icon selection for, say, a button. My update to this thread is that I now am no longer using an icon component with a dark and light version; I’m just letting the parent component (say, the button) do the color overriding and it seems to be working. I probably don’t need the icon container anymore, but I also don’t want to touch it because it’s working.

1 Like