Building a scalable icon system in Figma

WHAT THIS TESTS Whether you treat icons as a versioned, consistent system that developers can consume predictably, rather than drawing pretty individual glyphs with no shared rules.

A GOOD ANSWER COVERS Start with a consistent foundation: a fixed bounding box, commonly 24 by 24 pixels, with a defined live area and padding so every icon optically aligns, and a uniform stroke weight across the set. Design on a shared grid with consistent corner radii and terminals so the family looks cohesive. Make each icon a Figma component, and organize them in a dedicated page or published library with a clear, predictable naming convention, for example category slash name, so they are searchable and map cleanly to code. Use variants or component properties for sizes and states like filled versus outline. For color, flatten artwork to a single path and avoid baked-in fills so the icon inherits color in code via currentColor, letting one icon serve light and dark themes. For handoff, export optimized SVGs, ideally run through SVGO, and align naming with how developers will import them, or feed a tooling pipeline that generates React components.

COMMON WRONG ANSWERS Mixing canvas sizes and stroke weights so icons look uneven. Hardcoding colors so developers cannot recolor them. Ad hoc, inconsistent names that break search and code generation. Exporting bloated SVGs with editor metadata. Not using components, forcing copy-paste duplication.

LIKELY FOLLOW-UPS How do you keep stroke weight consistent when scaling? Why currentColor over fixed fills? How would you automate SVG to React component generation? How do you version and publish the library?

ONE CONCRETE EXAMPLE You build a 24px grid library, every icon a component named like action/trash or status/check, all with a 1.5px stroke and flattened single-color paths. Designers pull from the published library so updates propagate. At handoff you export SVGs through SVGO and a script wraps each into a typed React component that accepts size and color props, the color flowing through currentColor, so a developer writes a single Trash component that themes itself automatically.