Keep icon color when swapping in Figma

Question

If I replace an icon that's inside another component, the color of that icon also changes. What I want is being able to set one color for the component, and every icon I swap should take over that color.

The icon itself has a color style applied.

This is what currently happens:

The icon should stay blue in this instance, and not change to the color style that comes with the icon.

How can I accomplish this?

Answer 1

This is occurring because the colors are different (blue kebab-icon and gray edit-icon) in the master components. Depending on your use case, you can achieve the desired output in the following 2 ways:

• Prepare color styles and apply it to all master components before swapping.
• Create a color style, swap icon instance, and select the desired color style, thus only affecting the single instance instead of the master component.

Answer 2

There is an answer in the Figma community that helps achieving exactly what you want.

Ensure that all icons that might be placed in the button have the same structure. Specifically, the layers that inherit new colors must have the same names.

This worked just fine for me.