Skip to main content

icon-generator-svg

An SVG icon generator lets you compose simple custom icons from primitive SVG shapes — circles, rectangles, polygons, paths, text — adjusting fill, stroke, and arrangement, then exporting clean SVG markup ready for use in HTML, React, Vue, or design tools. The ZTools SVG Icon Generator runs entirely in the browser, supports a 24×24 / 48×48 / 64×64 canvas, layered shape composition, snap-to-grid alignment, and exports valid SVG markup with optimised path data.

Use cases​

Custom UI icon for a unique feature​

Existing icon libraries (Lucide, Heroicons) cover common cases; sometimes a feature needs a bespoke icon. Generator handles 1-off needs without requiring full vector software.

Brand-specific icon set​

A small icon set with a unified visual style — a stroke width, a corner radius, a fill rule. Build once; reuse across product.

Quick prototype mark​

Wireframe / prototype needs a placeholder icon. Generator outputs something usable in minutes.

Educational / illustrative​

Tutorial or blog post needs a simple inline SVG. Quick build vs licensing concern of using random web images.

How it works​

  1. Pick canvas size — 24×24 (most common UI icons), 48×48 (larger detail), 64×64. Standard sizes for icon libraries.
  2. Add shapes — Circle, rectangle (rounded or square), polygon, path. Each shape has fill + stroke + position.
  3. Compose + align — Shapes layer top-to-bottom; reorder via panel. Snap-to-grid (1px) ensures crisp pixels at small sizes.
  4. Set styles — Fill: solid color, none. Stroke: width 1-4px, color. Outline matched to icon-library conventions.
  5. Export SVG — Output: clean SVG markup, optimised paths, no inline styles. Drop into JSX as <svg>…</svg> or save as .svg file.

Examples​

Input: 24×24 plus icon: 2 rectangles forming +

Output: <svg viewBox="0 0 24 24"><rect x="11" y="4" width="2" height="16"/><rect x="4" y="11" width="16" height="2"/></svg>

Input: Custom checkmark with thick stroke

Output: Single SVG path with stroke-width 3, rounded line caps; clean React-component-ready output.

Input: Stylised arrow combining triangle + rectangle

Output: Two-shape compound; export keeps both as separate <polygon> + <rect> for easy editing later.

Frequently asked questions​

Should I use SVG or icon fonts?

SVG. Icon fonts (FontAwesome) were popular pre-2018; modern best practice is inline SVG (smaller, more flexible, accessible, no font loading). All major libraries (Lucide, Heroicons, Tabler) ship SVG.

Why 24×24?

Material Design + iOS conventions standardised on 24×24 for UI icons. Predictable size lets design systems align icon + text baseline cleanly.

Are exported SVGs accessible?

Add an aria-label to the surrounding wrapper. SVG itself doesn't carry semantic meaning by default; pair with appropriate HTML attributes.

Can I import existing SVG?

Paste raw SVG markup; tool re-renders shapes for further editing. Useful for tweaking icons from libraries.

Is the SVG uploaded?

No — entirely client-side. Your custom icons stay private.

How small can SVGs be?

Simple icons are <500 bytes. Optimised SVG (no metadata, condensed paths) often beats equivalent PNG by 10-50x.

Tips​

  • Pixel-snap for small icons (24×24 etc.) — sub-pixel coordinates produce blurry rendering.
  • Maintain consistent stroke width across an icon set — visual harmony matters.
  • Run output through SVGO (or the bundled svg-optimizer tool) before shipping for production.
  • Avoid embedded fonts in icons — they bloat. Use simple shapes or paths instead.
  • Test at multiple sizes (12px, 24px, 48px) — what reads at large can fail at small.

Try it now​

The full icon-generator-svg runs in your browser at https://ztools.zaions.com/icon-generator-svg — no signup, no upload, no data leaves your device.

Open the tool ↗

Last updated: 2026-05-05 · Author: Ahsan Mahmood · Edit this page on GitHub