Skip to main content
Question

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

  • December 18, 2025
  • 0 replies
  • 31 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: