Skip to main content
Question

Component icon color not preserved when changing between states with different colors

  • December 18, 2025
  • 1 reply
  • 56 views
Paulo Cholla

I have a Side bar component set up like this:

  • Base component with Size and Levels variants – here’s where I placed an icon instance
  • Master component with States and Brand/Neutral variants.
    Enabled state: label and icon use color token Content-Secondary.
    Hovered/Focused state: use color token Content-Primary

When users insert the component, they choose the Level and can swap the icon instance to an icon they need. The issue is that the color tokens are not being preserved properly according to the state when you change the states and then change the icon, like this:

  1. Change state from Enabled to Hovered.
    In Enabled, icon color is Content/Secondary.
  2. Swap the left icon (from Settings to any other icon).
    All good, the icon changes color to Content/Primary as expected.
  3. Change state back to Enabled.
    Icon color correctly changes to Content/Secondary.
  4. Swap the left icon.
    It incorrectly swaps the icon color to Content/Primary.
  5. Change state to Hovered.
    Icon color is correct (Content/Primary).
  6. Change state to Enabled.
    Icon color goes back to the correct value Content/Secondary.

Is this a Figma limitation or a bug? I can’t seem to solve this while the icon instance is placed in the base component.

 

Link to a sample file: 

 

1 reply

AlicePackard
  • AlicePackard
  • Power Member
  • May 3, 2026

​@Paulo Cholla first, thank you so much for the detailed post AND providing an example file to play with. I wasn’t able to swap the settings icon for other icons in your library because I didn’t have access to that file, but I made some local icon components as stand-ins and was able to replicate the results you outlined. I experienced the same isse.

I think the problem is you are using a base component (.Side bar base)

Here’s why: .Side bar base uses an instance of your Icon component, and overrides its color from your Content/primary color variable to Color/secondary:

​​​

.Side bar base is styled to be the state=Enabled variants of your downstream Side bar component. That styling becomes understood as “default”. When I tried to “reset instance” on the nested instance of .Side bar base within those state=Enabled variants of Side bar, I did not have the option because no changes have been made. This is not true when I right-click on the nested instance in the state=Hovered variants—that one has a “reset instance” option in the menu (right side of this screenshot) because the color has been overridden to again be Content/primary:

Figma seems to be getting confused about what is a color override and what isn’t… there’s a long chain of changes to keep track of:

Settings uses Content/primary… but then it gets wrapped in Icon component, which uses #000000… Icon component gets used in .Side bar base, and is overridden again to Content/secondary… but only in some variants of Side bar it gets overridden again back to Content/primary.

When I detached the base component instances from within Side Bar, I was able to complete your steps in your file with no unexpected/undesirable color changes! ✅ If you are able to divest from using the .Side bar base component in your file, I strongly recommend doing so.

I write about building excellent Figma components on my blog: https://alicepackarddesign.com/blog
    Terms & ConditionsAccessibility statement