Figma tip - The two ways to keep Figma color overrides when switching icon instances

Описание: Check out our new Figma blog at https://obra-figma.ghost.io/ !

---

We recently got the question how to keep color overrides when replacing icons in Figma. Designers might have encountered the problem that when overriding and icon instance, the color of the override does not get preserved.

The easiest fix is making sure that all icons have the same internal layer name. If the icons are flattened to a single vector, then you could make sure that vector has the same layer name for every icon.

Another way, that is a bit more involved, but doesn’t require any modifications to the icons themselves, is using what we call the “pixel override icon hack”. To use this technique, you would create a boolean union of a single small rectangle and the icon itself.

The way that boolean groups work is that if you put a fill on the group itself, the color trickles down to its children. Subsequently, if you now, for example in a destructive button with a red background, make the boolean group have a white fill, then override the child instance on the union, the white fill will “win”; whatever color your icon has doesn’t matter anymore, as its parent union group will control its color.

We call this pixel override hack, since it relies on having a little rectangle in the boolean groups, since you need 2 different layers to create a union. Note that this rectangle can even be hidden as a layer, and the “hack” will still work. Perhaps we should call this the boolean union hack, or something else. Anybody has a suggestion?

A detail on top of this is that a union layer will take on the width and height of its contents. This means you might have to add another parent layer to the union group to make sure the right frame sizing is applied. When other designers find your elaborate stack of layers, they might wonder what is going on.

You can send them here so they have an idea why!