Changing outline to fill icon on state-change


I’m building a design system, and I’m having an issue with icons in my button. Our buttons can include icons, which for most states are outlined, however on pressed/active states, we want the button to switch to the filled version of the icon. Imagine a bookmark button, or favourite button, or a button that opens a filter-bar, etc.

Our icons are build as separate symbols, with size and outline/fill as their variant. The icons are unified, and all named “icon”, to retain colour-overrides when swapping icons in any insert. Which works fine.

Our buttons are built with the option to have icons to the left, right, none or only.

I am able to change icons after inserting the button, and retain the new icon for all state-changes, with exception of the active/pressed state, where I want the icon to change to its filled variant. What happens now, is that the inserted button returns to the default icon when pressed. Which is super frustrating and confusing in a prototype.

What happens IRL :sob:

Is there any way to solve this? I don’t think it’s an uncommon pattern to switch from outlined to fill icon on an pressed or selected state :thinking:

A bit more context, as I was only allowed to upload one img in my original post.

Our icons are built as such:

Icon variants

Variant properties

Icon layers

Our buttons include states as variants, as well as icons before, after, only or none:

Button properties

Button layers

And finally, what I want to actually have happen:

Any help is MUCH appreciated :pray:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.