How to Make Icons in Figma: Grid Setup, Strokes, and Clean SVG Export

Figma has quietly become the tool most working designers draw icons in — not because it is the best vector editor ever made, but because it is where the rest of the design already lives. And it is genuinely capable at icon work, provided you set it up deliberately. This is the workflow that produces consistent, developer-friendly icons in Figma, plus an honest look at where the tool runs out of road.

Step 1: The Frame and the Grid

Icons are drawn on a fixed artboard, and for interface work the standard is a 24×24 frame (Material and most modern libraries) or 20×20 (compact UIs). Create the frame, then add a layout grid: a 1px pixel grid for snapping, plus keylines — the guide shapes that keep different icons optically aligned. A simple keyline set is a 20px square, an 18px circle, and 20×16 / 16×20 rectangles, all centered with a 2px margin. Draw a component from these once and paste it into every icon frame as a locked, hidden-on-export layer.

Step 2: Draw with Shapes First, Pen Second

Most icons are boolean combinations of primitives — rectangles, circles, and lines — with the pen tool reserved for the few genuinely organic curves. Built from primitives, your geometry stays editable and your corner radii stay consistent. Figma's boolean operations (union, subtract, intersect, exclude) are non-destructive, so you can adjust the underlying shapes long after combining them.

Decide your style rules before icon number one, not during icon number nine: stroke weight, corner radius, cap style, fill policy. These are the seven consistency properties covered in our consistent icon set guide, and they matter more than any individual icon's cleverness.

Step 3: The Stroke Decision

Figma lets you keep strokes as live strokes or convert them to filled outlines (Outline Stroke). Keep them live while designing — editable weight is the whole point. The decision arrives at export time. Live strokes export as SVG stroke attributes, which scale their weight proportionally and can be re-themed with one CSS rule. Outlined strokes export as filled paths — fixed geometry, no weight changes possible, but immune to the scaling quirks some renderers have with strokes.

• Keep live strokes if the icons ship to web developers: stroke="currentColor" theming and weight variants stay possible.
• Outline before export for contexts that mangle strokes: some icon pipelines, laser cutting, embroidery digitizing, and a few older asset systems.
• Never mix outlined and live-stroke icons in the same shipped set — they respond differently to scaling and theming, and the inconsistency surfaces later.

Step 4: Components and Variants

Make each icon a component, and use variants for the dimensions your system needs: size (16/20/24), weight (regular/bold), and style (outline/filled). Name them with a searchable convention — icon/arrow-right, not Vector 47. This is also what makes handoff work: developers can find, inspect, and export any icon without asking you.

Step 5: Exporting SVG That Developers Won't Curse At

Figma's SVG export is decent but not clean. Expect wrapper groups, clip paths from the frame, occasionally odd fill-rule choices, and ids you did not ask for. Three settings help: export from the component (not a screenshot of it), enable "Outline text" if any text survived into the icon, and disable "Include id attribute." Then run every export through an optimizer — the cleanup pass in our SVG optimization guide turns Figma's output into the terse markup that belongs in a codebase, and the componentization step in our design-to-code piece takes it the rest of the way.

Where Figma Runs Out of Road

An honest boundary line, since we build a competing tool for part of this: Figma is excellent for designing a curated set by hand. It has no answer for volume consistency — producing forty icons in one locked style is forty manual drawing sessions. It does not trace: a client PNG or a sketch cannot become paths inside Figma. And animation has to happen somewhere else entirely. Those three jobs are what dedicated generators and tracers are for: generate or trace the draft set in a tool like Icora, do the node-level cleanup there, then bring finished SVGs into Figma as components — the two tools compose rather than compete.