Skip to main content
maria.perlovskaya
maria.perlovskaya
February 1, 2023
Question

Icon with size variants doesn't change color in variants of component

  • February 1, 2023
  • 2 replies
  • 827 views

I have an icon pack in which every icon has a variant with 24 and 16px sizes. When I use these icons in button components (with variants too) – they don’t change color according to the button variant style.
I know I have to color override my icons – they all have the same naming and structure. But it looks like Figma doesn’t recognize the same naming because of variants in the icon. Is there any chance to use variants in the icon and have the correct color change at the same time?

Снимок экрана 2023-02-01 в 16.18.25

This topic has been closed for replies.

2 replies

maria.perlovskaya
maria.perlovskayaAuthor
February 6, 2023

Solved!
Figma doesn’t keep the icon’s style if the icons have a different amount of variants for each icon. In my case, there were 3 variants in the star icon currently used in the button component, and two variants in the arrow icon components.
When I left only two variants in every icon – keeping styles starts to work properly.

Anelia-IMT
Anelia-IMT
March 12, 2024

I have the same exact problem and I don’t seem to find any way to fix it.
I am dealing with icons that have 24px and 16px size variants used in inputs and buttons, however the variants using the 24px icon change icon and apply color accordingly, but when we come to the smaller variants the color is not applying properly to the same icons.
Any ideas ?

Terms & ConditionsAccessibility statement