Icon Generator
Bundled SVG icons with custom size, color, and SVG/PNG export.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this icon generator
- Pick an icon from the dropdown — twelve commonly-used icons ship bundled (star, heart, check, cross, arrow-right, home, cog, bell, user, search, download, upload).
- Set the size in pixels (8–512) and the icon color with the color picker.
- For stroke icons (most of them), tune the stroke width; for the filled icons (like the star) the stroke control is disabled.
- Optionally change the backdrop so you can see the icon against light or dark backgrounds.
- Press Generate SVG to surface the markup, then Copy SVG, or use Download SVG / Download PNG to save the file.
About this icon generator
The icon generator is a fully in-browser SVG renderer. The icons ship inside the page as path data — there are no requests to remote icon libraries at runtime — and the tool re-emits each as a complete `<svg>` document at the size, color, and stroke width you choose. PNG export uses an in-page canvas: the SVG is drawn into a `<canvas>` element at the chosen size, then `toBlob` produces a real PNG you can download. Everything is client-side, which means it works offline and never leaks your design choices.
Worked example: pick `star`, size 48, color #6366f1, backdrop #f9fafb. The tool emits: ``` <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" aria-label="star icon"> <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77 5.82 21.02 7 14.14 2 9.27l6.91-1.01L12 2z" fill="#6366f1"/> </svg> ``` Paste that into a React component, an Astro `.astro` file, or directly into HTML. For a stroke icon like `arrow-right` the path uses `stroke` + `stroke-width` instead of `fill`, and changing the stroke control re-emits the markup.
FAQ
- Where do the icons come from?
- They are hand-curated path data shipped inside this tool. There is no runtime request to a CDN or external icon library — the icons live in the page bundle so the tool works offline.
- What is the difference between stroke and filled icons?
- Stroke icons (most outline-style icons in this set) have `fill="none"` and use `stroke` + `stroke-width` to draw outlines. Filled icons (like the star) use a single `fill` color across the whole shape. The Stroke width control only applies to stroke icons; it is greyed out for filled icons.
- How does PNG export work?
- The SVG markup is loaded into an HTMLImageElement, drawn into a `<canvas>` of the target size, then exported via `canvas.toBlob("image/png")`. All of this happens in your browser; no server is involved.
- Can I add my own icons?
- Not from this UI — the icon set is bundled. If you have a custom SVG, paste its `d=""` attribute into a stylesheet or component directly and apply the same `stroke` / `fill` pattern you see in the generated markup.
- What is the viewBox?
- Every icon uses a 24×24 viewBox, the de-facto standard for UI icon grids. Rendering at any width/height scales cleanly because the viewBox is independent of the pixel size.