Drop image or SVGExisting pixel artwork will be protected before replacement

Editor

Open, drop, or paste an image (webp / png) or an existing SVG — or set a canvas size and draw from scratch.

{{hover[0]}},{{hover[1]}} shape {{shapeInfo.w}}×{{shapeInfo.h}} {{cols}}×{{rows}} icon {{content.w}}×{{content.h}} {{layerSize}} px

Image

Thickness, cells

Drag on the canvas · Esc cancels the shape

Shift snaps the line to 45° steps

Shift locks a {{tool==='rect' ? 'square' : 'circle'}} · hold Alt while dragging to grow from the center

Transform

{{selectionLabel}} {{selectW}}×{{selectH}}

Floating above the canvas — pixels underneath stay intact until you place it

Transform

cell ≈ {{(img.width/cols).toFixed(1)}}px of source

Offset X

Offset Y

Scale %

Move and scale the reference image under the pixel grid

Remove background

No flat background detected

Dither

Auto-regenerate on grid change

Background H {{bgOpacity}}%

Layers T {{layerOpacity}}%

Compare with original O

Right-drag (or hold Space) to pan · Ctrl/⌘+wheel to zoom

Opacity{{activeLayerOpacity}}%

Draw on the selected layer. Hidden layers do not export; locked layers cannot be edited.

Preview only · never exported

Pick a variant — it becomes the working palette

Size, px

Copied

Saved

Build reusable semantic steps manually.

Pixel Painter — convert PNG into SVG pixel art