albert nahas

Posted on Feb 12

Stop Hunting for Icons: How I Use AI to Generate Production-Ready SVGs in Seconds

#webdev #ai #productivity #mcp

You know the drill. You're building a side project at 2 AM, and you need an icon. A simple one. Just a "home" icon or a "notification bell" or whatever. So you:

Open Figma
Search "free icon packs"
Find something... close enough
Resize it, export it, realize it's not quite right
Repeat 3-4 times
Settle for something generic because you just want to ship

Or worse — you ping your designer friend at midnight asking if they have "just a quick sec."

This is broken. In 2026, why are developers still hunting for icons like it's 2015?

The Problem: Icon Generation Isn't Developer-Friendly

Existing solutions fall into three camps:

Icon libraries (Heroicons, Lucide, etc.) — Great quality, but limited. If your concept isn't in the library, you're out of luck.
Design tools (Figma, Illustrator) — Powerful, but slow. Not scriptable. Not something you'd run in CI/CD.
AI image generators (Midjourney, DALL-E) — Produce raster images or complex illustrations, not clean SVG icons optimized for UI.

What I wanted was simple: describe an icon in plain English, get a production-ready SVG out. So I built IcoGenie.

Three Ways to Use IcoGenie

1. Web App (Quick One-Offs)

Head to icogenie.xyz, type a description like "a rocket launching from a laptop," and get 1-4 variations in seconds. Pick the one you like, download a ZIP with everything you need:

icon.svg — Clean, optimized SVG
Icon.jsx — Drop-in React component with TypeScript types
png/ — Pre-rendered at 16, 32, 192, and 512px
meta.html — Copy-paste <link> tags for favicons
AGENTS.md — Machine-readable docs for AI agents

No post-processing needed. Unzip, copy to your project, ship.

2. CLI (Automation & CI/CD)

This is where it gets interesting for developers who hate context-switching:

# Install globally
npm install -g @icogenie/cli

# Authenticate once
icogenie login

# Generate an icon
icogenie generate "notification bell with badge" --style outline --output ./icons/

# Generate a full icon set for your app
icogenie bundle "e-commerce app icons" --output ./icons/

The CLI costs 1 credit per preview, 5 per download. You can script it, pipe it into your build process, or run it in GitHub Actions.

3. MCP Server (The Game-Changer)

This is the one I'm most excited about. If you use Claude Desktop or Claude Code, you can generate icons without leaving your conversation.

Setup (2 minutes)

Add this to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "icogenie": {
      "command": "npx",
      "args": ["-y", "@icogenie/mcp"]
    }
  }
}

Restart Claude. Done. IcoGenie tools now appear in the tool panel.

Real Workflow Examples

Example 1: Single icon while coding

You: "I need a settings gear icon for my dashboard sidebar, outline style"

Claude: [calls generate_icon] Here are 2 variations. Which one works?

You: "The first one, save it to ./src/assets/icons/"

Claude: [calls download_icon] Done! Saved settings-gear.zip with SVG,
JSX component, 4 PNG sizes, and HTML meta tags.

Example 2: Full icon set for a new app

You: "Generate a complete icon set for a food delivery app"

Claude: [calls normalize_bundle] I've planned 8 icons:
- Home, Search, Cart, Orders, Profile, Restaurant, Delivery, Settings

Want me to generate all of them?

You: "Yes, go ahead"

Claude: [calls generate_bundle] All 8 icons generated.
[calls download_icon] Saved the full bundle to ./public/icons/

Example 3: Iterating on a design

You: "The cart icon is too detailed, make it simpler"

Claude: [calls regenerate_icon] Here's a simplified version. Better?

No browser tabs. No Figma. No "let me find an icon real quick" interruptions. Just natural language → production assets, inline with your coding flow.

What You Get in Every Download

Every icon download is a complete package:

rocket-icon/
├── icon.svg          # Optimized vector, legible at 16px
├── Icon.jsx          # React component with TS types
├── png/
│   ├── icon-16.png   # Favicon
│   ├── icon-32.png   # Small UI
│   ├── icon-192.png  # PWA manifest
│   └── icon-512.png  # App store / splash
├── meta.html         # <link> tags for HTML head
├── README.md         # Usage instructions
└── AGENTS.md         # Machine-readable docs for AI tools

The AGENTS.md file is worth highlighting — it contains CLI commands and API examples so AI agents (Claude, Copilot, Cursor) can understand how to regenerate or modify the icon in future sessions. It's documentation for machines, not humans.

Why Not Just Use Heroicons / Lucide / etc.?

Icon libraries are great when they have what you need. But:

"Brain with circuit connections" — doesn't exist in any library
"Rocket launching from a laptop" — too specific for pre-made sets
"A medical stethoscope forming a heart shape" — good luck finding that

IcoGenie fills the gap between "standard icon" and "hire a designer." It's for the icons that should exist but don't.

That said, if Heroicons has what you need, use Heroicons. IcoGenie is for everything else.

Pricing (Simple & Fair)

No subscriptions. Credit-based, pay for what you use:

8 free credits on signup (no credit card)
1 credit = preview
5 credits = download full package
Credits start at $1 for 10, with volume discounts
Credits never expire

Bundle discounts kick in for icon sets: 20% off for 5+ icons, 30% off for 10+.

Why credits instead of monthly plans? Because if you need 5 icons for a side project, you shouldn't pay $20/month. And AI agents generating icons programmatically don't care about monthly limits — they care about per-unit cost.

Try It

Web: icogenie.xyz — 8 free credits, no signup required to browse

CLI:

npm install -g @icogenie/cli
icogenie login
icogenie generate "your icon idea" --output ./icons/

MCP Server (Claude Desktop/Code):

{
  "mcpServers": {
    "icogenie": {
      "command": "npx",
      "args": ["-y", "@icogenie/mcp"]
    }
  }
}

I'd love to hear what icons you generate — drop a comment with your best (or worst) results. And if you hit any issues with the CLI or MCP server, open an issue on GitHub.

Links:

DEV Community