albert nahas

Posted on Feb 4

I Built an AI-Powered SVG Icon Generator with CLI, MCP Server, and Web App

#webdev #ai #showdev #cli

Every developer knows the pain: you need an icon for your project, but you either can't find the perfect one, or you spend hours scrolling through icon libraries. What if you could just describe what you want and get a unique, production-ready SVG icon in seconds?

That's exactly why I built IcoGenie — an AI-powered SVG icon generator that creates custom icons from text prompts.

The Problem

As developers, we often need icons for:

Side projects and MVPs
Documentation and READMEs
UI components and dashboards
Presentations and diagrams

The typical workflow is painful:

Search icon libraries (Font Awesome, Heroicons, etc.)
Find something "close enough" but not quite right
Compromise on your vision or spend time in Figma

The Solution: IcoGenie

IcoGenie generates unique, customizable SVG icons from simple text prompts using AI. Here's what makes it different:

Web App

The easiest way to get started. Just visit icogenie.xyz, type a prompt like "rocket ship launching with flames", and get your icon instantly.

CLI Tool

For developers who live in the terminal:

npm install -g @icogenie/cli

# Generate an icon
icogenie generate "coffee cup with steam"

# Save directly to file
icogenie generate "database server" -o ./icons/database.svg

MCP Server

Here's where it gets interesting. IcoGenie includes an MCP (Model Context Protocol) server that integrates with AI assistants like Claude. This means you can ask your AI assistant to generate icons while you're coding!

npm install -g @icogenie/mcp

Add it to your Claude Desktop config and you can literally say "generate me an icon of a lightning bolt" while pair programming with Claude.

Output Formats

IcoGenie doesn't just give you SVGs. You get multiple export formats:

SVG — Vector format, scales infinitely
PNG — Raster format at various sizes
JSX — Ready to drop into React components
HTML — Inline SVG for quick embedding

Tech Stack

For the curious, here's what's under the hood:

Frontend: Next.js 15 with App Router
Backend: Supabase (PostgreSQL + Auth)
AI: GPT-4 for prompt optimization + Gemini 2.5 Flash for image generation
Monorepo: Turborepo + pnpm workspaces

Try It Out

Website: icogenie.xyz
CLI: npm install -g @icogenie/cli
MCP: npm install -g @icogenie/mcp

The web app has a free tier so you can try it out immediately. I'd love to hear your feedback!

What icons would you generate first? Drop your ideas in the comments!

DEV Community