Skip to main content
Question

Figma Sites - Icon's nested in components not rendering properly.

  • May 15, 2026
  • 2 replies
  • 12 views
Jared B

Hey guys,

 

So I just started playing with Figma sites, and I’ve pulled in components from a component library I built in Figma design. The components are built with nested icon components that are setup flattened and named consistently so that I can create interactive prototypes. In Figma the buttons with nested icon buttons render properly maintaining the variable token colour assigned to them.
But when I bring these components across to Figma sites. The buttons work as expected, but the nested icons appear to ignore the colour style variable overrides applied to them.
In the editor I can change the variant states of the buttons and the icons appear and render as expected with the proper color rendering.
But as soon as I preview or publish the site. These same components no longer render the same.
Looking into the code it appears that the fill is being applied properly to the divs, but for some reason, the svg layer is ignoring this style override and reverting back to it’s original black hex value.
This is really frustrating as I had a whole bunch of design system work I was hoping to utilise Figma sites for but this bug means I won’t be able to test any of it with this product at the moment and will instead have to resort to simply using Figma design.

2 replies

adamsmasher
Figmate

Hey, ​@Jared B!

 

Totally understand why this is frustrating for you since it’s preventing you from using Figma Sites, and even more so since it’s preventing you from testing all the design system work you completed. Where exactly are the color style variables being applied? Is this within the nested icon component or on the parent frame of the icon component?

 

There is another thread where someone reported something similar that includes a temporary solution, but I wasn’t sure if your file and components are structured similarly and applying the fill in the same way. The solution from that thread was to remove the style from the parent frame and apply it directly to the child icon component instead.

 

One other thing which might be helpful to know: what happens if you add the icon component itself to your Figma Sites file? Does it show the same behavior as it does when nested in another component?

 

 

Jared B
  • Jared B
  • Author
  • New Participant
  • May 18, 2026

Yeah so I’m not 100% sure if this is the same issue as the one you’ve linked too. I did have a read of that one before I raised this here, but as this issue is only occuring when I bring in a shared component from Figma design I was sure if the root cause was the same.
So for more information I’ve included some more context below.
The structure of the button component setup is a shown below, where we utilise a dedicated nested icon component instance in the button component.

The master component for the button component looks like this:

Where the icon colour is the same for all states except for the disabled state. So technically the colour of the icon shouldn’t change and it doesn’t in Figma Design, but the issue is that it does in sites.
The setup for the icon component shown below follows Figma’s guidelines around naming, where all the vector layers for all of the icons are flattened and have the same name ‘vector’.
We setup this dedicated icon component so that we could easily manage being able to configure solid and outline icon sets inside of components as well as being able to control their colour, size and we are utilising the instance swap property to be able to change the nested icon.

The colour variable is applied only on the vector layers of the icon, with no other colours being applied to either the container layer or the component variant layer.

So something I did try which seems to work but is not a suitable solution is to simply grab the vector layer of the icon extract it to the top layer of the component. In this setup the icon seems to retain the token variable, but then this completely makes having a component library setup unworkable as you would have to have x multiplier for each variant against each icon type required and there’s no way this makes any commercial sense to even consider.

I also tried to add the icon component into a Figma sites and the same fall back behaviour seems to occur, where the icon colour just reverts back to the original hex black colour when interacted with.

So hopefully there’s enough information here, but yeah as it stands while this issue remains I’m kind of out of practical options with Figma sites for the moment.

Terms & ConditionsAccessibility statement