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. ❤️
Happy coding! 🎨🧑💻
Top comments (3)
Pretty cool tool for making icon work so much easier. How do you think having all your icons in one place could help teams work better together?
Thanks! That was actually the main reason I built it 🙂
Managing icons across a team can get messy—naming issues, duplicates, hard to keep things consistent.
icomp helps keep everything in one place and makes it easy to update and share.
I plan to add additional features like search, templating, tsx/jsx templating and more in next updates.
Managing icons has always been a bit of a hassle, but this combo of CLI + UI makes it way more seamless. The Figma import + preview features are such a nice touch too. Definitely adding it to my toolbox for upcoming projects. Props to Zura for building something genuinely useful 👏