Skip to main content
Question

Code Connect + Icon architecture

  • April 10, 2026
  • 2 replies
  • 40 views
Seden

Hi everyone,

I’m currently building a design system in Figma that is intended to work well with Code Connect, and I have a question regarding icon architecture.

When I use a single icon set with variants, I can map everything under one Code Connect connection — which is great.

However, selecting icons inside components becomes very difficult and impractical (huge dropdown).

I’m considering switching to separate icon components (e.g. icon/add, icon/close) and using them via instance swap.

👉 My questions:

• Can multiple icon components be grouped under a single Code Connect mapping?

• Or would each icon require its own mapping?

• Is there a better way to handle icon selection via instance swap without breaking Code Connect?

Thanks!

2 replies

AlicePackard
  • AlicePackard
  • Power Member
  • April 14, 2026

This is a super worthy problem to solve! Commenting so I can follow along. Keeping icons as separate components and not wrapping them into a variant set OR using instance swapping (or slots) to change out the icon glyph being displayed is absolutely the best way to store these components for designers in Figma for numerous reasons.

I am not familiar enough with code connect to weigh in on how to establish that connection when all the icons are separate components, but if a solution is found, I’m very interested. Engineers on my DS team are wondering the same thing.

Seden
  • Seden
  • Author
  • New Member
  • April 16, 2026

Here’s the answer from Figma Support Team:

Individual Component Mapping: Each separate icon component (icon/add, icon/close, etc.) would need its own Code Connect mapping. This aligns with your instance swap approach and provides clear, specific connections for developers.
Manual Mapping Option: You can map components manually by pasting the relevant file path or URL and component name without requiring a GitHub connection, which might give you more flexibility in how you structure your mappings.
Recommendation: The separate icon components approach with individual mappings would likely work better for your use case, as it maintains the improved design usability you're seeking while still providing clear code connections for developers.
 

Terms & ConditionsCookie settingsAccessibility statement