Beyond Icon Export: Building Reusable Icon Systems Inside Figma

Muhammad Mousa — Mon, 11 May 2026 19:35:25 +0000

Over the past few months, I’ve been exploring a different way of thinking about icon workflows between design and development.

Initially, I thought the main problem was simply exporting icons from Figma.

But once projects and design systems start scaling, the real friction becomes something else entirely:

keeping icon naming consistent
managing reusable libraries across projects
preserving stable codepoints
avoiding fragmented handoff workflows
exporting only what’s actually needed
keeping outputs developer-friendly

That realization pushed me to rethink the workflow around a more reusable system-oriented approach instead of a simple export flow.

So I started evolving IconNova around a few core ideas:

reusable SVG library workflows
structured developer-ready outputs
cleaner React / Vue / JSX / CSS handoff
stable icon font generation
favorites & reusable collections
categorization and organization at scale
smoother workflows directly inside Figma

One thing I found especially interesting:
the workflow slowly started feeling less like “asset export” and more like lightweight design infrastructure living inside Figma itself.

We recently crossed 1,500+ users, and a lot of the recent improvements came directly from workflow feedback and edge cases shared by designers and frontend teams.

I’m genuinely curious:

How are teams here currently managing icon consistency and reusable workflows between design systems and production?

Are you relying mostly on:

large icon libraries
custom pipelines
SVG-only workflows
icon fonts
or integrated tooling directly inside Figma?

Would love to hear what’s working well, and where the biggest friction still exists today.

https://www.figma.com/community/plugin/1619361051850350459

Rethinking Icon Workflows from Figma to Production

Muhammad Mousa — Tue, 05 May 2026 19:39:49 +0000

Rethinking Icon Workflows from Figma to Production

Lately, I’ve been experimenting with different ways to handle icon workflows from Figma to production, especially when working on design systems.

One thing I kept running into:

Most setups either:

rely on huge icon libraries
or require multiple disconnected steps (export → clean → generate fonts → integrate)

After a while, the process starts feeling fragmented.

So I started exploring a more “all-in-Figma” approach with a plugin called IconNova.

A few things stood out to me:

Generating ready-to-use outputs (React, Vue, JSX, Tailwind, fonts) in one flow
Keeping everything offline (no data leaving Figma)
Managing selection, favorites, and export without jumping between tools
Exporting only what’s actually used instead of entire libraries

The interesting part is that it started feeling closer to a real dev workflow rather than just a design tool.

I’m curious how others are handling icon handoff today in real projects.

Do you prefer:

icon libraries (Iconify, Hugeicons, etc.)
custom pipelines
or something more integrated inside Figma?

Would love to hear what’s working well, and what still feels painful in your workflow.

If anyone’s curious, this is what I’ve been experimenting with:
https://www.figma.com/community/plugin/1619361051850350459

DEV Community: Muhammad Mousa

Beyond Icon Export: Building Reusable Icon Systems Inside Figma

Rethinking Icon Workflows from Figma to Production

Rethinking Icon Workflows from Figma to Production