Skip to main content
Constança Costa
Constança Costa
New Member
September 28, 2026
Question

Icon fill and color are lost when swapping icons in component variants

Description

We are experiencing an issue with icons inside components when switching between states.

Our use case is an icon that (example):

  • In the default state is not filled and uses color #FFFFFF.
  • In the selected state becomes filled and uses color #000000.

When creating the component, we initially use a specific default icon, and the color and fill behavior works correctly across the variants.

However, as soon as we swap/change the icon to a different icon, the selected-state properties are lost:

  • The icon no longer becomes filled.
  • The icon color is no longer changed to the state color.

We have also tried alternative approaches, such as applying a variable that forces the icon to be filled. With this approach, the fill behavior works, but the color property is lost when changing the icon.

Expected behavior

When swapping the icon within the component, the icon should preserve the properties defined by the component variant:

  • State X → unfilled + color X
  • State Y → filled + color Y

These properties should be applied to whichever icon is selected/swapped into the component.

Actual behavior

When the icon is swapped:

  • The state fill property is lost.
  • The state color is lost or not applied correctly.
  • Using a variable to control the fill fixes the fill state but causes the color to be lost.

Steps to reproduce

  1. Create a component with an icon.
  2. Define a default variant where the icon is unfilled and uses color X.
  3. Create a selected variant where the icon is filled and uses color Y.
  4. Swap the icon for a different icon.
  5. Switch between the default and selected variants.
  6. Observe that the fill and/or color properties are no longer inherited as expected.

Question

Is this expected behavior when swapping nested icon instances, or is there a recommended way to structure the component/variables so that the fill and color properties are preserved independently of which icon is swapped in?

    6 replies

    Jaycee Lewis
    Figmate
    Jaycee Lewis
    Figmate
    September 28, 2026

    Hey ​@Constança Costa 🤩 Thank you very much for the detailed write-up. I appreciate the repro steps. While I set that up in my own Figma, I have one request. can you grab a screen recording or GIF of this happening? It’s helpful to share with my internal resources. Thank you 🙌 — Jaycee

    Constança Costa
    Constança CostaAuthor
    New Member
    September 29, 2026

    Hey ​@Jaycee Lewis , 

    Thank you for the quick reply. 

    I've attached two screen recordings. While recording, I noticed the issue doesn't happen everywhere. It seems to depend in some cases also on how deeply the component is nested.

    button.mp4: swapped icon resets to the default
    On button/icon, I swap the icon from Heart to Help while in the default state. When I switch the state to selected, the icon doesn't stay as Help. It resets to the original Heart icon (filled, in the selected color). The fill and color apply, but the swap is lost.

    pivot--toolbar--canonical.mp4: nested layers
    I follow the same component through several levels of nesting, each time with state = selected and a swapped icon:

    1. pivot on its own: Works. The swapped icon is filled and uses the selected color.
    2. pivot inside toolbar-filters / toolbar: Still works.
    3. The same toolbar inside a canonical layout: The icon ("Columns") loses its selected color and renders dark, even though the pivot's properties are identical. The label next to it still shows the correct selected color, so only the swapped icon is affected.

    So the swap plus the variant fill and color work at the first levels. Once the component is nested deeper, the swapped icon loses its color somewhere along the chain.

    Nesting path where it fails: canonical layout →  toolbar → pivot

    Terms & ConditionsAccessibility statement