Skip to main content
Solved

Color inheritance with variables when using icon subcomponents in button

  • March 12, 2026
  • 2 replies
  • 13 views

jjortanez

Hi, I’m having issues with color inheritance using Figma variables/tokens. 

The goal is to have our icons within button components inherit the token applied on the parent component (button). The icons are subcomponents exposed as an Instance Swap within the button component, so whenever we swap icons, ideally we want the icons to inherit the token applied on button. However, the icons inherit the default token applied to the subcomponent (Icon). 

How do we persist the button icon token instead of overriding it? 

 

Example setup: 
<> = component
 

<Icon> vectors have token color/icon/default applied, which is Gray. 

<Button> has <Icon> as a subcomponent, and <Icon> is exposed as an instance property. 

We applied the token button/icon , which is White, to the <Icon> within <Button> 

 

 

 

 

Best answer by Eric_Carl

I was just having the same problem. A similar question was asked here and the solution was to make sure that the artwork layer in each icon component has the same name: 

I made that change and it resolved the problem for me. Good luck!

2 replies

Eric_Carl
  • New Member
  • Answer
  • March 13, 2026

I was just having the same problem. A similar question was asked here and the solution was to make sure that the artwork layer in each icon component has the same name: 

I made that change and it resolved the problem for me. Good luck!


jjortanez
  • Author
  • New Member
  • March 13, 2026

I was just having the same problem. A similar question was asked here and the solution was to make sure that the artwork layer in each icon component has the same name: 

I made that change and it resolved the problem for me. Good luck!

oh my gosh, THANK YOU. I was trying to solve this for hours. The layer naming is such a minor detail that it’s easily overlooked. Really appreciate you sharing this solution