This guide walks you through building a production-ready icon system in Figma from scratch. By following each step, you will have a fully componentised icon library with size variants, colour modes, and a naming convention that scales with your product team. Most designers complete this in under two hours.

What You'll Build

  • A master icon component with frame, base layer, and configurable colour using Figma Variables
  • Size variants (16, 20, 24, 32px) generated with Auto Layout, not manual duplication
  • A naming structure that maps directly to your design tokens and developer handoff
  • A published icon library that any teammate can swap into a live design without hunting for assets
  • A documentation page inside the same Figma file so new designers onboard in minutes

Prerequisites

  • Figma Professional or Organisation plan (Variables require this as of 2026)
  • A set of SVG icons ready to import, ideally at 24px on a square artboard
  • Basic familiarity with Figma Components and Auto Layout
  • At least one existing colour token collection if you want to wire icons to your design system

Step 1: Set Up Your Icon File Structure

Create a new Figma file called Icon System. Inside it, create four pages: Icons, Variants, Tokens, and Docs.

Keeping icons on a dedicated page prevents them from being buried inside product design files. It also makes publishing the library simpler later.

On the Icons page, create a section called _base. This is where your raw SVG imports live before you turn them into components. Prefix it with an underscore so it sorts to the top and stays visually separate from your finished components.

Why does the file structure matter this early?

Figma's component search is file-scoped. A consistent folder structure inside the component name (using forward slashes) determines how icons appear in the Assets panel. Getting this right at the start saves a painful rename later when you have 300 icons.

Step 2: Import and Clean Your SVGs

Drag your SVG files onto the _base section. Select all imported icons and run Flatten (Cmd/Ctrl + E) on each one. This collapses groups, masks, and redundant layers into a single vector path.

After flattening, check each icon for the following:

  • Frame size is exactly 24x24px
  • No strokes (convert all strokes to outlines before importing)
  • Fill is set to a single colour, ideally black or your base icon colour
  • No clipping masks hiding parts of the path

Strokes that are not outlined will break when you change icon size. Converting strokes to outlines at import is a step many teams skip and later regret.

What if an icon looks wrong after flattening?

Undo the flatten, inspect the original SVG in a code editor, and look for fill="none" on a parent group combined with stroked children. Export the SVG from your design tool with outlines enabled, then reimport.

Step 3: Create the Master Icon Component

Select one of your cleaned 24px icons. Press Cmd/Ctrl + Alt + K to create a component.

Name it using this pattern: icon/size=24/name=arrow-right. The forward-slash naming tells Figma to create nested groups in the Assets panel automatically.

Inside the component, wrap the vector path in a frame. Set the frame to 24x24px with Auto Layout enabled. Set padding to 0 on all sides. Set the frame's fill to none. This wrapper frame is what you will resize in later steps without touching the vector itself.

How should you handle the icon colour?

Do not hardcode a colour value on the vector fill. Instead, open the Figma Variables panel and bind the fill to a colour variable such as icon/default. This single change means every icon in your system responds to light and dark mode switches without manual updates. If your team uses Figma Modes, create a Light and Dark mode inside the same variable collection and map icon/default to the appropriate hex value in each mode.

Step 4: Build Size Variants with Component Properties

With your master component selected, open the Component Properties panel on the right sidebar. Add a property called Size with type Variant. Set the values to 16, 20, 24, 32.

For each size variant, select the wrapper frame and update its width and height to match. Then select the vector path and scale it proportionally to fit. Hold Shift while dragging in Figma, or type exact values in the width and height fields with the constraint lock enabled.

At 16px, icons often need optical corrections. Slightly heavier stroke weights or simplified shapes read better at small sizes. If your icon set has a 16px-optimised version, swap the vector path in the 16px variant rather than simply scaling down the 24px original.

Should you use separate components or variants for each size?

Use variants for sizes within the same icon. Use separate component sets for icons that have fundamentally different visual styles, such as filled vs outlined versions of the same icon. Mixing style and size into one enormous variant matrix makes the Assets panel hard to navigate and slows down Figma's rendering on lower-spec machines.

Step 5: Apply a Consistent Naming Convention

Rename every icon component following this structure: icon/category/name. For example: icon/navigation/arrow-right, icon/action/edit, icon/status/warning.

Categories should map to how developers will import icons in code. If your front-end team uses a library like Lucide or Heroicons, match the category groupings they already use. This reduces translation errors during handoff.

Use kebab-case for all names. Avoid spaces, capital letters, and underscores inside the name segment. Figma's search strips formatting inconsistently, and developers querying your design tokens will expect kebab-case to match CSS and JSON conventions.

Step 6: Publish the Icon Library

Before publishing, move all finished component sets from the _base section to a section called components. Leave the _base section in place for future imports.

Go to Assets panel > Team Library > Publish changes. Write a short changelog note such as "Initial icon system: 48 icons, 4 sizes, light/dark variable support." Future updates should always include a changelog so teammates know what changed without opening the file.

Once published, any Figma file in your organisation can enable this library from their Assets panel. Icons will appear under the library name you set for the file.

What if teammates can't see the published library?

Check that the file is in a Team or Organisation project, not a personal draft. Drafts cannot be published as shared libraries. Move the file to the correct project, then publish again.

Step 7: Build the Documentation Page

Switch to the Docs page. Create a simple layout with three sections.

The first section is Usage Guidelines. Paste two or three icon instances and annotate when to use filled vs outlined icons, minimum touch target sizes (48x48px following WCAG 2.2 guidance), and how to swap icons using the Component Properties panel.

The second section is Naming Reference. Create a table showing the naming convention with examples. This is the most-used part of the doc page for new designers joining the team.

The third section is Changelog. Date each entry and list additions, removals, and renames. Icon renames break existing designs if teammates are not warned. A visible changelog prevents silent breakage across product files.

Teams at agencies like Lenka Studio often add a fourth section linking to the developer implementation guide, so the Figma file becomes a single source of truth for both design and engineering.

Step 8: Hand Off to Developers

Export the complete icon set as SVGs. In Figma, select all 24px base icon frames (not the component wrappers), then go to Export > SVG. Set the export suffix to nothing. This gives you clean filenames like arrow-right.svg rather than [email protected].

If your team uses a design tokens pipeline, the colour variables you set up in Step 3 will already map to your token names. Pass the exported SVGs and a token reference sheet to your front-end developer. They can wire the icons to your CSS custom properties or Tailwind config using the same variable names.

For teams building with React, a simple SVG sprite or a component wrapper that accepts a name prop and a size prop mirrors the exact variant structure you built in Figma. This reduces implementation drift significantly.

Frequently Asked Questions

How many icons should a starting icon system include?

Start with 30 to 60 icons covering your core UI needs: navigation, actions, status indicators, and common objects. A smaller, well-organised set ships faster and causes less confusion than a 500-icon dump that lacks clear naming.

Can I use this workflow with an existing icon library like Heroicons or Phosphor?

Yes. Import the SVGs from the open-source library, flatten them, and follow Steps 3 through 8 as written. The advantage is you get a locally controlled copy with your colour tokens applied, rather than depending on a third-party Figma community file that may update unexpectedly.

Does this icon system work with Figma's Dev Mode?

Yes. Dev Mode reads component properties and variable bindings directly. Developers inspecting an icon instance in Dev Mode will see the size and name values, and the colour variable reference, without needing to ask a designer for clarification.

How do I keep icons in sync after the initial publish?

When you update the icon file, Figma sends a notification to all files using the library. Teammates accept updates from the Assets panel. For large teams, send a Slack or Teams message alongside the Figma notification so nobody misses a breaking rename.

What is the difference between using variables and using styles for icon colours?

Figma Styles do not support Modes. Variables do. If your product has a dark mode, or plans to add one, variables are the correct choice. Styles are still useful for text and effects, but for fills tied to theme switching, use Variables as of Figma's 2025 and 2026 feature updates.

Next Steps

Once your icon system is live, connect it to your broader design token pipeline. If you are also building out a component library or a full design system, the icon naming convention you established here will feed directly into your button, input, and notification components.

If you manage social media content for your brand and want a reliable way to plan visual assets alongside your icon work, the free Lenka Studio social media toolkit includes a content calendar template that keeps design and marketing output in sync.

If you would like help scaling this icon system into a full design system or integrating it with a front-end codebase, the team at Lenka Studio works with product teams across Australia, Singapore, Canada, and the US on exactly this kind of work. Get in touch and describe where you are in the process.