Icon System Design: Build Once, Use Everywhere

Why it exists

Icons are foundational to digital products, helping users navigate and understand interfaces. Without a system, icons become inconsistent in size, style, and behavior, slowing down design and development and creating a fragmented user experience. A system makes them scalable building blocks.

The mental model

Think of icons not as individual graphics, but as a standardized kit of parts. Just like you use a consistent font, you should use a consistent set of icons. Each icon is a main component in Figma, and you use instances of it in your designs. This allows you to update an icon's color or shape in one place and have it propagate everywhere.

How it works

The process involves four main steps. First, choose an established icon library like Material Design or Font Awesome to ensure a large selection and font support; avoid creating custom icons unless absolutely necessary. Second, import the icons as SVGs into Figma, preferably using a plugin. Third, standardize every icon: resize its frame to a default size (e.g., 24x24) with internal padding (e.g., 2px), set the vector's fill color to match your brand, and set the vector's constraints to "Scale/Scale" so it resizes correctly. Fourth, turn each standardized icon into a Figma Main Component and organize them with a clear naming convention like "Icon/Close".

When to use it

This approach is critical when building any design system, website, or application that needs to scale. It's the foundation for creating consistent, complex components like buttons and navigation bars. Use it to distinguish between actionable icons (clickable triggers) and informational icons (descriptive visuals).

When not to use it

Avoid creating a custom icon set from scratch unless you have a clear brand requirement and the significant time and skill required. For most projects, using an established icon library is more efficient. A full system is overkill for a quick, one-off wireframe or a very small, static site with only a handful of icons.

One canonical example

A designer sets up a "Close" icon. They import the SVG, resize its frame to 24x24px, leaving 2px of internal padding around the vector shape. They change the vector's fill color to their brand's default gray. They set the vector's constraints to "Scale/Scale". Finally, they turn this prepared frame into a main component named "Icon/Close". Now, they can drag instances of this icon into any button or modal, and if the brand color changes later, they only need to update the one main component.