If I change the icon in a button and then change the state of a button from default to hover, the icon color does NOT change. (works fine if you don’t change the icon)
I’m using stroke icons, and the scope settings in the color variable is set up to handle stroke.
Please let me know what I need to do to so the swapped icon will change color on override.
Video:
https://monosnap.com/file/RUUxOXXXdznZoemEG4Aow5wO4As8Vx
Solved
Icon color not changing on override
Best answer by Jonathan Warrecker
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.
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.
Verify if the layer is unlocked, sometimes this is what causing the problem. If the layer is locked, you cant override the color.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.