Preserving duo tone icon color with component properties in variants

Ask the community
1

Having trouble getting this to work. Here is the situation:

  • I have a duot tone icon set
  • Icons have a variable number of layers (all labeled “vector”)
  • I have a set of buttons, relaying on component properties to get it lean
  • Primary state is a solid button, secondary is outline

I started with a single icon set, but changing the fill and border for for primary and secondary state was failing to redefine the colors correctly (some borders would update, others would not, only the simplest shapes like a magnifying search icon would work).

So then I duplicated the set, one for the primary button state and a reversed set for the secondary button state. This ensured that the icon colors worked in all cases.

However, each state required it own property name in the component properties to support icon selection in the instance. So each state uses its own icon set. The side effect of this is the icon selection is not preserved when toggling the button between primary and secondary states.

Is there a way to either:

  • Make duotone icons take color updates correctly so I can use just one icon set?
  • OR, if I have to use 2 independent sets, preserve icon select between state changes?

Here are the two variants and an instance:

image
image1391×702 25.6 KB

2

For me having two identical icon sets with different colors kills the whole idea of reusable components. I would assume your issue is this

  • Icons have a variable number of layers (all labeled “vector”)

First and foremost I would recommend to read Figma manuals to get better idea on how overrides work.

Then I would try structure the icon so each instance has two layers to work with, each layer to have unique name, like “outline” and “fill”, or “vector-1” and “vector-2”. You can use vector unions to merge multiple layers into one in non destructive manner.

With this when you apply colors Figma will remember that layer one uses one color and layer two uses another color

Check your magnifying glass icon, what makes it different from others?

1 Like
3

Thanks. Already read the docs. That’s why I’m asking the question.

I didn’t make the icons. They are from a commercial set. Reconstructing all of them is the worst option.

It may be that there is no elegant way out of this. Again, that’s why I’m asking here in case there is a solution not obvious to me.

Edit:
Using 2 icons sets also fails, because each variant needs its own component property name for the icons, otherwise all the variant end up containing the same icons (meaning, the same icon set). This this is also a non-starter.