Editor

Open an image (webp / png) or an existing SVG in the File section — or set a canvas size and draw from scratch.

Image SVG

Crop {{cropW}}×{{cropH}}

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

Auto-regenerate on grid change

Background H {{bgOpacity}}%

Layer T {{layerOpacity}}%

Compare with original O

Zoom

Mouse wheel zooms · hold Space to pan

Pick a variant — it becomes the working palette

Size, px

Copied

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

Canvas size

Canvas {{cols}}×{{rows}} · icon {{content ? content.w+'×'+content.h : '—'}}

W H

Relative

Anchor

Pixel Painter SVG pixel art editor

A free in-browser tool by Alex Rel. Redraw logos and icons as crisp pixel art: open an image or an SVG (or start from a blank canvas), snap it into your palette, refine pixel by pixel, then export a compact SVG or PNG. Everything runs locally — your session is autosaved in this browser.

Tools

BPencil · hold Shift for straight / 45° lines EEraser GFill IEyedropper · or Alt+click with any tool VMove layer · drag, or nudge with arrow keys CCrop canvas · drag a frame, tweak by handles, Enter apply · Esc cancel 1–4Brush size

Edit

{{kUndo}}Undo {{kRedo}}Redo

View

HToggle background image TToggle pixel layer OCompare with the original side by side SpaceHold to pan the canvas WheelZoom ?This help

Workflow

Open an image — the pixel grid is detected automatically (adjust in Canvas or press Auto). Generate a draft from the brand or working palette, then paint it clean. Frame the icon with Crop or Resize… (Photoshop-style anchor), Center it, and export: Trim to content shrinks the SVG to the drawing, Full canvas keeps the position on the canvas; Size, px sets the file dimensions.

More tools & projects → alexrel.com