Icons' colour override not working properly when they're nested

Ask the community
, , , ,
1

To make use of component properties better and reduce the no. of variants I tried creating my button with primitives which have 2 variants:

  1. Large: Icon size 20px (with instance swap), font style is button large (i.e. font size: 14px)

  2. Small: Icon size 16px (with instance swap), font style is button small (i.e. font size: 12px)

Then I used this large variant to create a new component called ‘Button’ which comprises of all the different types (solid, outline, ghost etc) and states (default, hover, disabled etc.).

Now when I take out a child of this ‘Button’, and change the properties of ‘Button’ first and then of ‘Primitive’ it works fine but when I have done this and try to change the properties of ‘Button’ again, then the icon colour gets back to primitive’s icon colour.

I’m not sure what I’m doing wrong, I’ve kept the name of icons also similar as mentioned by @Molly_Hellmuth in this article for Icon Best Practices.

For better understanding:

Ques
Ques1064×1200 89.8 KB

P.S. If this works fine for you, please try changing the icon and try again if it still works :upside_down_face:

Is this a Figma bug or am I doing something wrong? Any feedback is appreciated :slight_smile:

2

After trying a bunch of combinations, I’ve realised it’s somewhat dependent on the icon, for one icon it works for another it doesn’t. Not sure why, as all my icons are flattened into 1 layer with fill.

BUT the icon always goes back to primitive’s colour if I use instance swap to change it.