Skip to main content
Matej_Koutsky
New Member
January 23, 2026
Question

Prototype doesn’t reflect icon instance swap after variant change in nested component?

  • January 23, 2026
  • 3 replies
  • 227 views

Hi everyone,

I’ve been struggling with a prototyping issue for several hours and haven’t been able to figure out a solution. Hoping someone here has encountered a similar problem or has a workaround.

Setup:

  • I have a button component that contains only an icon (also a component), and the icon is set up to be swappable via instance swap.

  • This button is used inside a navigation component, which has two variants (expanded/collapsed).

  • Each variant is supposed to use a different icon inside the button — a left oriented arrow for expanded state and a right oriented arrow for collapsed state.

  • In design mode, everything works as expected. Switching between the navigation variants shows the correct icon in the button.

Problem:

  • In prototype mode, the icon does not change to the right oriented icon when the navigation component switches (via a "Change to" interaction).

Question:

Is this a known bug or limitation when swapping component instances in nested structures during variant changes in prototypes?
Is there a reliable workaround to ensure the icon updates as expected when switching variants?

I’ve attached a simple test file that demonstrates the issue.

Any help or insight would be hugely appreciated!

 

This topic has been closed for replies.

3 replies

Matej_Koutsky
New Member
February 17, 2026

Anyone please?

Tascha
Active Member
March 16, 2026

I’ve run into the same issue just now… From what I just tested, it has to do with those two things:
1. the button being an instance inside another instance and
2. the icon being a property

if you change any of those two things, then it works again.

Ofc that is absolutely not ideal and just removing your instance property in the component will result in all your instances loosing their assigned icons, so be careful!

Workaround I did was duplicating the original component, so I have 2 identical ones now that I can use interchangeably every time I run into this issue…

top button is the “icon button 2”, bottom one “icon button”


Again, absolutely not ideal, but at least it works for now. Hope it’ll help you too ✌ 

Matej_Koutsky
New Member
March 17, 2026

Thank you very much for your answer ​@Tascha! I was afraid I was the only one.

Your workaround is a good idea! But for my use-case I finally decided not to give the icon the "instance swap" option at all.

I would be quite interested if it's just supposed to work like this or if it's a bug. Someone from Figma, can you please comment on this?

You just made my day, thanks again. 🖐