https://www.figma.com/design/QFJo7Bwcbi928Txezem91D/Untitled?node-id=0-1&t=MKIYnm8XsUEAF0II-1

Hey! I’m having a similar problem!

I have 4 sizes of icon buttons using 4 different sizes of icons. I’ve created 4 component variables with text strings to reference the size for each button and icon (Example: MD icon button = MD), so it retains the icon symbol when I change the size of the button. 

• So when I pick an instance of the MD primary button with an arrow icon > swap the icon with a different symbol = color is retained

• When I pick an instance of the MD primary button with an arrow icon > swap the icon with a different symbol > change the button to secondary = color is overriden

BUT

• When I pick an instance of the MD primary button that with an arrow icon > swap the icon with a different symbol > change the button size to LG = icon size changes and the icon remains  (because of the variables) but the color resets to the same color of the icon library

Why?

Thank you Natalia!
Got an email from Figma support and they suggested making the “structure of the icon exactly the same” -including the name. And it worked on the first one I tried….I’ll update if it stops working

Here is an example of the icons same name, same structure, that worked. 

thank you!

Nancy
Product Support Specialist
Figma

Hey Jonathan! Thanks for your reply.

Unfortunately my icons are already with the correct structure and naming you suggested.

My problem is a little bit different from yours because I have different icon sizes applied to different icon button sizes and although I found a way to retain the icon, the colors override.