DEV Community

Muhammad Mousa
Muhammad Mousa

Posted on

Beyond Icon Export: Building Reusable Icon Systems Inside Figma

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

Top comments (0)