Made a CLI tool so I stop hand-writing typed SVG icon components — IconCodegen

Nibin Kurian — Tue, 21 Jul 2026 08:13:01 +0000

Hey all — I built IconCodegen, a small CLI tool that runs a local
dashboard for browsing icons and generating strictly-typed React
components from them.

The problem I kept running into: grabbing an SVG icon, converting
it to a React component by hand, and making sure the props were
typed correctly (React.SVGProps, no any) got old fast, especially across a few hundred icons in a design system.

What it does:
Searches 200,000+ open icons via Iconify (Lucide, Phosphor,
Material Symbols, etc.) with live filtering by pack/style
Customize stroke width, size, and color before generating
Outputs typed .tsx or .jsx, arrow or standard function style
Zero runtime deps — generates raw svg components, no bundled icon font Also supports reverse-rendering private/premium icon packages(e.g. Untitled UI Pro) fully offline

Quick start:
npx iconcodegen init
npx iconcodegen

It's genuinely early — I built it a few weeks ago. Would love
feedback, bug reports, or feature requests if anyone tries it.

GitHub: https://github.com/nibin-org/iconcodegen
npm: https://www.npmjs.com/package/iconcodegen
Docs/demo: https://iconcodegen.vercel.app

Tired of Manually Syncing Design Tokens — So I Built a Figma Plugin

Nibin Kurian — Tue, 10 Mar 2026 03:54:41 +0000

I built a Figma plugin to sync design tokens between Figma and code

If you’ve worked with design systems, you probably know this workflow:

Design tokens live in Figma.
Code lives in GitHub.
And every time something changes… someone manually syncs them.

I’ve been that someone.

So I built Tokvista — a Figma plugin to make the design token workflow smoother between design and development.

What Tokvista does

• Sync Figma Variables
• Generate token systems with AI
• View tokens in visual, table, or JSON formats
• See a full token diff before publishing
• Export to CSS Variables, SCSS, Tailwind config, or tokens.json
• Publish directly to GitHub with versioned snapshots
• Share a live preview link so developers can explore tokens

One feature that people seem to like is the AI token generator.

You can type something like:

“dark fintech app, neutral grays, tight spacing”

Tokvista generates a full foundation + semantic token system that can be imported into Figma instantly.

The goal is simple: make design tokens actually work as the bridge between design and engineering, instead of becoming another manual step in the workflow.

Still improving the plugin and would love feedback from people working with design systems or design tokens.

You can check it out here:
https://www.figma.com/community/plugin/1609493358238428587/tokvista

DEV Community: Nibin Kurian

Made a CLI tool so I stop hand-writing typed SVG icon components — IconCodegen

Tired of Manually Syncing Design Tokens — So I Built a Figma Plugin