← All tools

SVG Icon & Shape Studio

Build simple icons and logos from a shape library on a square grid — move, scale, rotate, snap, layer, and combine shapes with real boolean operations (unite / subtract / intersect), then export optimized SVG or PNG. Everything runs in your browser.

How it works & boolean-op limits (click to expand)

Every shape is stored parametrically but flattened to polygons (64 segments per full circle) for hit-testing, booleans, and export. Boolean operations use a Greiner–Hormann polygon clipper written inline — shapes are combined bottom-to-top in layer order, and results use fill-rule="evenodd" so holes (donuts, counters) work.

  • Works well for the common icon cases: circle − circle (crescents, donuts), star ∪ circle (badges), overlapping rounded rects, chains of those.
  • Limits: self-intersecting inputs are not supported, open shapes (line / polyline) can't participate, and heavily nested multi-hole chains can occasionally produce even-odd artifacts. Undo (Ctrl+Z) always gets you back.
  • Keyboard: Ctrl+Z / Ctrl+Shift+Z undo/redo, Ctrl+D duplicate, Delete remove, arrow keys nudge (with Shift ×5), Esc deselect. Shift-click for multi-select.
  • Share via URL hash when the project is small enough; otherwise save/load the project as JSON.
Add shape
Canvas Add a shape from the library, or load the sample.
Preview
Layers
Style
Arrange
Boolean select 2+ closed shapes
Export
Project
Import an SVG path d string
M/L/H/V/C/S/Q/T/A/Z supported; curves & arcs flattened to segments.