Icon instance color overrides when switching sizes (16px ↔ 24px) in component properties

I’ve been STUCK with this icon override issue for a week now and need help 🙃

Context:

• I have an icon library structured as so: 

  

   

• In my button component, I’m using instances of this icon component and I’m applying specific tokens to override the default icon color. 

What’s working:

• Switching between icon variants (same size, e.g. 24px → 24px) works as expected

• The icon correctly inherits the color token from the button

The issue:

• When switching icon sizes (e.g. 24px → 16px), the icon resets to its default color

• It overrides the token that was being applied from the button

• This breaks the expected “inherit color” behavior

What I’ve checked/tried:

• Verified layer structure is consistent across icons

• Confirmed the token is applied at the button level (not hardcoded on the icon)

• Instances behave correctly until the size variant changes

Question:
Is this expected behavior when swapping component instances across different sizes?
Or is there a recommended way to structure icon components/variables so color inheritance is preserved across size changes?

Would love any guidance or examples of how others are handling icon systems with multiple sizes + token-driven color 🙏