SVG Icon Badge & Frame Generator
Parametric synthesis of SVG icons with custom squircle/hex frames, multi-stop gradients, status badges, and instant framework export.
Direct canvas editing: select a part, then drag to move. Use the picker’s Replace selected or Add layer modes to build a composite SVG.
Pin multiple customized icons and compile a combined symbol sprite sheet.
No icons pinned yet. Pin icons to collect them into one sprite sheet.
Generate AI prompts or improve the icon on canvas
Select a preset, then copy the prompt into your AI tool or improve the icon on the canvas.
AI & Procedural 3D Icon Generator - Badge Builder, Lighting & Prompt Studio
Transform flat monochrome UI icons into vibrant 3D squircle app icons, duotone brand badges, and animated micro-interaction vectors. The Procedural Icon Generator combines SVG <feDropShadow> lighting filters, multi-stop gradients, optical padding, and an integrated AI Prompt Studio for Claude, ChatGPT, Midjourney, and v0.
Catalog vector icons, imported SVG paths, and geometric badge presets
3D-lit SVG, 512/1024 px PNG & WebP badges, and structured AI prompts
Produces crisp vector badge icons under 2 KB instead of heavy raster files
How to use SVG Icon Badge & Frame Generator
-
1
Pick a base icon from the library or import your own SVG path.
-
2
Choose the badge shape (squircle, rounded square, circle) and border.
-
3
Apply gradient stops and 3D lighting, then add badge text if needed.
-
4
Export the ready icon in every target size at once.
A lantern icon path plus badge text "NEW"
PNG 512 with gradient lighting plus matching SVG and CSS background
Limitations
- Badge text metrics depend on the selected font and may shift at small sizes.
- Raster exports are limited to 1024 px per side.
- One badge layout is rendered per run; multi-icon sheets belong to the sprite tool.
- Imported SVG files are capped at 2 MB each.
Files you open or paste in this workspace are processed locally in your browser. Nothing is uploaded to a server.