Generate Awesome Icons Inside Cursor & Claude Code Without Leaving the IDE

Generate Awesome Icons Inside Cursor & Claude Code Without Leaving the IDE

I use Cursor AI for most of my scaffolding now. It handles logic, CSS, and database schemas easily, but the moment I need an app icon, the flow usually breaks.

Typically, you have to pause coding, write a design brief, open a generator like Midjourney, and export a few PNGs. Then you're back in the editor asking the AI what specific dimensions the framework needs, only to go back to your graphics tool to resize and export again. It’s a tedious cycle of context switching just to get a placeholder image.

The "Lazy" Trap

Out of frustration, you might ask the AI to "just put an icon there." Often, it will dump a Base64 string directly into your HTML.

Don't do this. It bloats your code and usually results in a blurry, un-editable mess that looks like this:

The SVG Workflow

There is a better middle ground: Ask the AI to generate the icon as an SVG.

Since SVG is just code (XML), LLMs are actually quite good at writing it. Instead of guessing pixels, the AI writes the vector math. Once you have that source file, you can have the AI write the build scripts to handle the format conversions for you.

I’ve been doing this for Electron apps, which require a painful amount of different icon sizes. Here is how the actual workflow looks under the hood.

1. The Source

I ask the AI for a geometric logo and save it as assets/icon.svg. This is the source of truth that scales to any resolution.

Data Privacy | Imprint