Hey everyone!
Our team has built a multi-brand design system that supports three different brand themes, each with both light and dark modes.
All our icons are created as unions. This helps preserve the color override when an icon is swapped inside a component. For example: all icons use the “icon” color variable by default, but within a success inline message component, the icon is overridden with the “icon-success” color variable (green), as the icon should always be green in that context. Swapping, say, a checkmark icon with “icon-success” applied for a shield icon retains the correct “icon-success” variable. So far, so good.
However, when we re-theme the inline message component from Brand 1 to Brand 2, the icon switches to a different brand-specific variant from the icon component set. Here’s where things break: in component instances, the color override (“icon-success”) is lost during this brand switch, and the icon falls back to the default “icon” color variable — which in our case is black. This results in applications where everything re-themes correctly except the icons, which suddenly appear in the wrong color.
We understand this is technically an override, and that swapping icon variants may reset such overrides. But the odd part is: this issue only occurs in component instances. In base components or standalone frames, re-theming works as expected and color overrides persist across variants. It's only in instances that the override is stripped out.
I’ve attached a video showing the issue in action. We’d love any guidance, workarounds, or insights into this — but ideally, we’re hoping for a native Figma fix, as this seems to be an inconsistency in how theming is applied to instances vs. base components.
Thanks in advance!
