Introducing icomp: Generate & Explore Your SVG Icons Like a Pro

Zura Jijavadze — Mon, 14 Apr 2025 07:48:53 +0000

Hey folks! 👋

If you’ve ever worked on a design system or just managed a bunch of custom icons in a frontend project, you know the pain of maintaining consistency, reusability, and discoverability. I’ve felt that pain too — so I built a tool to fix it.

Say hello to icomp — a CLI + UI combo for generating React components from your SVG icons and giving you a clean UI to browse and use them easily.

🛠️ What is icomp?

icomp is a dev-friendly npm package that helps you:

Convert SVG files into React components
Automatically generate TypeScript types
Host a web explorer ui for all your icons
Copy JSX snippets directly from the UI

It’s built for teams and individuals who want to keep their icon workflow smooth, automated, and well-organized.

📦 How it works?

icomp has two main parts:

1. CLI Tool

Run this once and let it do all the boring stuff.

npx icomp generate --input ./icons --output ./src/com/icons --watch

This will:

Parse all your svg icons from input folder
Clean and optimize svg xml data
Replace all fill and stroke colors with currentColor
Bind width, height and size to component props
Generate TSX components in output folder
Generate index.ts with exports for each icon
Output them in a structure that’s ready to import in your project

Optional --watch or -w flag will listen input folder for changes and if you add or change any icon, tool will generate corresponding components immediately.

2. Explorer UI

Spin up a local UI to preview, manage and copy icon snippets instantly:

npx icomp ui --input ./icons --output ./src/com/icons

In UI mode you can:

Explore icons form input folder
Generate selected or all icons with one click
Edit icon name and keywords (keywords will be used for search in future updates)
Remove selected icons
Import icon by dragging svg file
Import icon by pasting svg code or file directly into ui dashboard
Directly import icon from Figma or any similar graphic apps (just copy as svg and paste in UI)

Why I built it

I was juggling dozens of SVGs across multiple projects. Some icons were duplicated, others hard to find, and sharing code snippets became a mess.

I wanted:

One source of truth for icons
Easy browsing
No manual component creation
Instant code snippet access

There were tools out there, but most were either too limited or expensive. So I built icomp — customizable, dev-friendly, and tailored for modern React workflows.

🚀 Try it out

You can get started in seconds. Install package as dev-dependency in your project:

npm install icomp --save-dev

And don’t worry—it works great with TypeScript, Vite, and Create React App setups.

For detailed instructions you can visit page on Github

🤝 Contributing

icomp is an open-source project, and I’d love your help to make it even better!

Whether you want to:

Fix a bug 🐛
Suggest a feature 💡
Improve the docs 📖
Refactor code 🧼
Or just open a discussion 💬

your contribution is welcome!

Check out the GitHub repo to get started. Even small improvements are super appreciated. ❤️