Build a Consistent Icon System in Figma

Start with a grid and stick to it. Common conventions

• Web: 16px, 24px, 32px base sizes (commonly increased to 48px, 64px for touch interfaces).
• Mobile: 24px, 48px (iOS), 24px, 48px (Android).
• Desktop app: 16px (UI elements), 32px (toolbar), 64px (app icon).

In Figma, set up your artboard at 64px × 64px with a 2px padding (leaving 60px × 60px for content). This gives buffer space and scales cleanly to 16px (÷4), 24px (×3/8), 32px (÷2).

Enable Pixel Grid (View > Pixel Grid) and Guides to snap all paths to grid. For strokes, enable Snap to Pixel in export settings.

All icons in a system must use the same stroke weight. Common standards

• Thin (1.5px): Minimal, modern aesthetic. Works at 24px and above.
• Regular (2px): Most versatile. Works at 16px–64px.
• Bold (2.5–3px): Emphasizes icons, used sparingly for important states.

Choose one primary stroke weight, then optionally offer a bold variant. Apply uniformly

1. Stroke alignment: Center (scales predictably). Never mix inner/outer.
2. Corner radius: Consistent joins (rounded vs. sharp). Set caps to Round for softer appearance.
3. Filled vs. outlined: Separate these into different sets (outlined for default, filled for active/hover states).

Verify consistency by toggling between icons at 16px preview. Mismatches stand out immediately.

Establish a naming schema before creating 200+ icons. Example

`icon-[name]-[size]-[weight]`

• `icon-home-24-regular`
• `icon-menu-24-bold`
• `icon-chevron-right-16-regular`

Or, if size and weight are uniform across your set

`icon-[descriptive-name]` (e.g., `icon-home`, `icon-menu`, `icon-chevron-right`)

In Figma, organize as components with variant properties

• Base component: `icon`
• Variant 1: `name=home|size=24|state=default`
• Variant 2: `name=home|size=24|state=filled`

This makes swapping variants in designs instant for design teams.

Before exporting

1. Preview at target sizes: Export a test set at 16px, 24px, 32px. Open in browser or image viewer. Legibility drops off fast at 16px.
2. Check antialiasing: Zoom to 100% in your browser. Look for rough edges or misaligned strokes. If evident, enable Pixel Snapping in Figma.
3. Contrast test: Ensure icons work on both light and dark backgrounds. Export a white version on a dark canvas; export dark on light.
4. Pair with type: Icons rarely stand alone. Test icons next to text at the size you'll use them. Ensure visual balance.

Figma's SVG export includes editor metadata (IDs, layer names, unused styles). Before shipping

1. Export from Figma: Select icon, right-click > Copy as SVG (or Export > SVG).
2. Run SVGO: `svgo icon-home.svg --output icon-home.opt.svg`. Removes metadata, simplifies paths, reduces file size by 30–50%.
3. Verify rendering: Open optimized SVG in browser. Compare to original. Some optimization may strip essential data; adjust SVGO config if needed.
4. Inline or link: For web, inline SVGs in CSS `background-image` or use `<img src>`. Inline gives more styling control; linked keeps markup clean.

Store your icon system with clear structure

``` icon-system/ ├── figma/ (source file) ├── src/ │ ├── 16px/ │ ├── 24px/ │ ├── 32px/ │ └── 64px/ ├── dist/ (optimized SVG) ├── package.json (version, metadata) └── README.md (usage guide) ```

Version your icon set (e.g., v1.0, v1.1, v2.0). When adding new icons, increment minor version; breaking changes (renamed icons, grid changes) bump major. Publish to npm or a private package registry for easy consumption.

For design teams, set up Figma components with auto-layout

1. Create a 24px × 24px component frame.
2. Add the icon path inside.
3. Set auto-layout with 0 padding and no spacing.
4. Enable Resizable: All selected (so designs can scale the component).
5. Publish to a Figma library for team access.

Designers can now drag icons into designs, resize instantly, and stay in sync when you publish updates.