Creating and Exporting an Icon Library in Figma: Best Practices

The friction between design and development often peaks during the handoff of assets. When dealing with SVG icons, a poorly structured Figma file leads to exported files with weird dimensions, hidden layers, and random hex codes instead of clean currentColor fills.

To build a seamless pipeline, the icon library must be structured correctly inside Figma before a single SVG is exported. Here are the best practices for creating and exporting an icon library in Figma.

1. The Frame and ViewBox Foundation

The most critical rule of icon design is consistency in the bounding box.

Standardize the Frame: Every icon should be drawn inside a dedicated Frame (not a Group, not a Rectangle) of the exact same size. The industry standard is 24x24 pixels.
The ViewBox Guarantee: When Figma exports an SVG, the Frame size dictates the SVG viewBox. A 24x24 frame becomes <svg viewBox="0 0 24 24">. If your frames vary in size, developers will have a nightmare trying to align them in CSS.

Never use fractional pixels

Ensure your Frame’s X and Y coordinates on the canvas are whole numbers. Fractional positions can occasionally cause rounding errors during export, leading to microscopic blurring on lower-resolution screens.

2. Flattening and Outlining Strokes

Figma allows you to draw with strokes, layer masks, and boolean operations (Unions, Subtracts). While this is great for the design process, it creates bloated, complex SVG code.

Before publishing an icon to the library:

Outline Strokes: Select the icon vectors and use Shift + Cmd + O (Mac) or Shift + Ctrl + O (Windows) to convert all strokes into solid fill paths.
Flatten Selection: Use Cmd + E (Mac) or Ctrl + E (Windows) to flatten all overlapping shapes into a single, unified vector network.

An optimized icon should ideally consist of a single layer inside the Frame.

3. Strict Naming Conventions

The name of the Figma Component directly dictates the filename of the exported SVG. If a designer names a component Icon / Navigation / Menu V2 Final, the exported file will likely be messy.

Adopt Kebab-Case: Agree on a strict kebab-case naming convention across the team.

Good: menu.svg, chevron-down.svg, user-profile.svg
Bad: Menu, Chevron Down, User_profile

Using Slashes for Organization: Figma uses slashes (/) to organize components into folders within the Asset panel. You can use names like icon/ui/chevron-down. When writing automated export scripts, you can strip out the prefix and keep the final filename clean.

4. Preparing for CSS Styling (The Color Rule)

Most icons on the web are monochrome and change color on hover or in Dark Mode. To achieve this, the SVG must use CSS inherited colors.

In Figma, set the fill color of your flattened icon to pure black (#000000).

Why black? Because during the automated export process (using tools like SVGO), it is trivial to write a script that finds #000000 and replaces it with the CSS variable currentColor.

// SVGO configuration to replace black with currentColor
{
  name: 'addAttributesToSVGElement',
  params: {
    attributes: [{ fill: 'currentColor' }],
  },
}

If designers use various shades of gray, the automation script won’t know which colors to replace, resulting in hardcoded hex values in your source code.

5. Automated Exporting (The Developer Handoff)

Do not rely on designers right-clicking and exporting SVGs manually to a zip file. That method is prone to human error.

Use Figma Plugins

Plugins like Icon Resizer or SVG Export can batch process files, ensuring consistent settings.

The Advanced Route: Figma REST API

For true enterprise workflows, use the Figma API. You can write a GitHub Action that:

Pings the Figma API for a specific file ID.
Finds all components on the “Icons” page.
Downloads the SVGs.
Runs SVGO to clean them.
Commits them directly to your repository.

Summary

A clean SVG icon pipeline starts in Figma. By enforcing consistent 24x24 frames, flattening strokes, using strict kebab-case naming, and sticking to pure black fills, designers ensure that the resulting SVG code is clean, predictable, and ready for automated consumption by developers.