How do you let designers swap a component's icon without detaching?

WHAT THIS TESTS: Your understanding of Figma component properties and how to build scalable design systems. The interviewer wants to see if you know the difference between visibility toggles and true instance swapping, and whether you prioritize keeping instances intact over destructive edits.

A GOOD ANSWER COVERS: First, ensure the icon inside your component is itself a component instance rather than a group or vector layer. Second, apply an instance swap property to that icon layer so any designer using the component can replace it directly from the right sidebar. Third, set preferred instances to point to your team's icon library components so the swap menu shows only approved icons and reduces decision fatigue. Fourth, mention that this keeps the main component structure intact and avoids the need to detach. Optionally note that a boolean property could be added separately if the icon needs to be hidden entirely, but it is not a substitute for swapping.

COMMON WRONG ANSWERS: Suggesting boolean properties as the solution, which only toggles layer visibility and does not allow changing the icon asset. Recommending detaching the instance to change the icon, which breaks the link to the main component and destroys design system integrity. Proposing variants for every possible icon combination, which creates exponential variant explosion and is unmaintainable at scale.

LIKELY FOLLOW-UPS: How would you handle icons that need different colors or sizes within the same component? What happens if the replacement icon has different dimensions? How do you document which icons are recommended for each component? Would you use a slot property instead, and when?

ONE CONCRETE EXAMPLE: Imagine a button component with a leading icon. Inside the button main component, the icon is an instance of an icon component from your library. You add an instance swap property to that icon layer and set preferred instances to your icon library file. A designer places the button on a canvas, opens the right panel, clicks the instance swap property, and chooses a different approved icon. The button remains an instance, auto-layout adjusts if configured, and the designer never touches the layers panel or detaches anything.