Guide

Icon Generator App: Build a Custom One in 30 Seconds

Every icon generator app on page one ships the same three presets: flat, gradient, 3D. If your actual need is anything more specific, you usually end up hacking around the generic tool. There is a faster path: describe the icon generator you want and let mk0r build it.

m
mk0r
5 min
4.8from 10K+ creators
Under 30s build time
Real HTML, CSS, JS output
Self-tested in a real browser

The problem with generic icon generator apps

Open the top five results for this keyword and you will see the same pattern. A square canvas, a glyph picker sourced from one of three icon packs, a color picker, a gradient toggle, a shadow slider, and a PNG export. That covers the median case, and when your case is the median, these tools are fine.

The moment you need something specific (a strict viewBox for your design system, a PWA manifest with correctly sized maskable icons, a line-icon set that inherits currentColor for dark mode, a generator that produces a family of icons at once with consistent optical weight), the generic tool starts working against you.

The alternative everyone assumes is writing the generator yourself. mk0r is a third option: describe it, and get a working generator back in seconds.

What you actually get

Quick mode

A single standalone HTML file. Inline CSS, inline JavaScript, no build step. Claude Haiku streams the code token by token so you watch the icon generator take shape. Good for simple cases: a canvas, a few controls, a PNG or SVG download.

VM mode

A full Vite + React + TypeScript project scaffolded at /app inside a Freestyle VM. Tailwind v4 is already wired. The dev server runs on port 5173. Best when your generator needs real components, state, or multi-file structure.

The part no other icon generator mentions

In VM mode, the agent does not stop at writing code. The VM ships with Playwright MCP attached. After the agent finishes editing files, it opens Chromium inside the VM, navigates to http://localhost:5173, and drives the app the way a user would: clicks generate, clicks export, inspects the resulting blob.

This matters for icons specifically. A canvas-based PNG export can silently break from a tainted-canvas cross-origin image. An SVG export can stringify to something that looks right but fails to re-render because of an unresolved font URL. A manifest can be valid JSON and still invalid as a PWA manifest. None of those surface until someone actually tries to use the export. In VM mode, the agent is that someone, before you ever see the result.

The system prompt for this agent is in src/app/api/chat/route.ts: step four of its workflow is literally "Open Chromium and navigate to http://localhost:5173 to verify the app works."

Describe the icon generator you need

No account. No setup. Watch it build in real time.

Start Building

Prompts that work well

PWA favicon kit

"Icon generator app that takes a single letter and a gradient, renders a rounded-square icon, and exports PNG at 512, 192, 180, 32, and 16, plus an SVG, plus a manifest.json with maskable entries."

Dice glyph set for a game

"Generate 20 dice-roller glyphs (d4 through d20), SVG only, 24x24 viewBox, strokeWidth 1.5, stroke currentColor, no fill. Zip download."

Brand icon family

"App that takes a list of nouns and produces a consistent line-icon for each one, 32x32, 2px stroke, tuned for dark and light mode. Preview grid plus SVG download for each."

When to use a pre-built icon generator instead

If you need one icon, once, and any of the standard presets work, use the first tool that ranks for your query. Opening a new tab is cheaper than prompting an agent.

mk0r pays off when the generator itself needs to be specific: a private tool for your team, a generator embedded in a product, a repeatable pipeline for a design system. You are not generating an icon. You are generating the thing that generates icons.

Frequently asked questions

Why build my own icon generator app instead of using an existing one?

Generic icon generator apps optimize for breadth: flat, gradient, 3D, a few color pickers, a PNG export. If you need something specific (SVG with a fixed viewBox, a full PWA manifest with maskable icons, emoji-only glyph sets for a game, monochrome line icons that inherit currentColor), you either hack around the generic tool or write it yourself. mk0r writes it for you in the same time it takes to Google an alternative.

What exactly does mk0r generate?

In Quick mode you get a single standalone HTML file with inline CSS and JavaScript that draws and exports your icons. In VM mode you get a full Vite + React + TypeScript project with Tailwind v4 already configured, served by a dev server on port 5173 inside a cloud VM. Both are real code you own and can download.

Can the generated app export SVG, PNG, and ICO?

Yes, if you ask for it in the prompt. A typical prompt looks like: 'icon generator app that renders a glyph on a rounded-square background, exports PNG at 512, 192, 180, 32, and 16, exports SVG, exports a 48x48 favicon.ico, and emits a manifest.json with maskable entries.' The agent writes the Canvas and SVG code, wires up the download buttons, and tests the export flow in a real browser before handing it back.

Does it verify the icons actually render?

In VM mode, yes. The VM ships with Playwright MCP attached. After writing the code, the agent opens Chromium inside the VM, navigates to http://localhost:5173, clicks the generate and export buttons, and checks that the resulting blobs are valid. If a CORS header or canvas taint breaks export, it sees the error and fixes it before reporting complete.

How is this different from Figma plugins or icon libraries?

Figma plugins and icon libraries give you icons. mk0r gives you an icon generator app: a working tool you can rerun with different parameters, embed in your product, or hand to a non-technical teammate. You are generating the generator, not just the output.

Can I use my brand colors and typography?

Yes. Put them in the prompt. 'Use #0D9488 and #06B6D4 as the two-stop gradient, Inter as the glyph font, 24px safe area inside a 512px canvas.' The generated app bakes those into the defaults and still exposes controls in case you want to deviate.

Ready to describe your icon generator? One sentence is enough.

Build Your Icon Generator