A pixel art editor that runs in your browser
This pixel art editor is a small, focused drawing tool for sprites, icons, emoji, game tiles and retro portraits. Pick a grid from 8 × 8 to 64 × 64 pixels, choose a colour from a classic palette, and draw with a pencil, eraser, flood fill, straight lines and rectangles — with mirror symmetry for faces and characters, up to four layers and unlimited-feeling undo.
When you are done, export a crisp PNG scaled up to 32 times with no blurring, an SVG made of rectangles that stays sharp at any size, or a project file you can open again later. Your current drawing is also saved automatically in this browser, so closing the tab does not lose your work. Nothing is uploaded.
How to use the Pixel Art Editor
- Choose a Canvas size and press Apply size (existing pixels are kept from the top-left corner).
- Pick a colour from a Palette — PICO-8, Game Boy, CGA 16, Grayscale or Skin & earth — or use the colour picker and HEX box. Add colour saves it to “My colours”.
- Select a tool: Pencil (B), Eraser (E), Fill (G), Line (L), Rect (R) or Picker (I), and draw on the grid. Turn on Symmetry to mirror strokes.
- Use Layers for outlines, colours and shading on separate levels: click a name to draw on it, the eye to hide it, arrows to reorder.
- Press Undo/Redo (Ctrl+Z / Ctrl+Y) to step back, then export a PNG at the scale you need, an SVG, or Save project.
Pixel Art Editor features
Six drawing tools
Pencil and eraser with gap-free strokes (Bresenham interpolation), 4-way flood fill, line and rectangle tools with a live preview, and a colour picker.
Layers and symmetry
Up to four layers with visibility and ordering; mirror left-right, top-bottom or four ways.
Retro palettes
PICO-8, original Game Boy greens, the 16 CGA colours, eight greys and a warm skin-and-earth set, plus your own colours.
Lossless exports
PNG at 1×–32× with nearest-neighbour scaling and transparent background; SVG with one rectangle per horizontal run of colour.
Autosave and projects
The drawing is kept in local storage and can be saved to or opened from a JSON project file.
Pixel art sizes and scales
Always scale pixel art by whole numbers (2×, 3×, 4×…). Non-integer scaling makes some pixels wider than others and blurs edges, which is why the PNG scale here is fixed to whole multiples.
| Use | Canvas | Typical export |
|---|---|---|
| Favicon | 16 × 16 or 32 × 32 | 1× and 2× PNG, then the Favicon Generator |
| Game sprite or tile | 16 × 16 or 32 × 32 | 1× PNG for the engine, 4× for previews |
| Emoji / sticker | 32 × 32 | 8× PNG (256 px) or 16× (512 px) |
| Avatar or portrait | 48 × 48 or 64 × 64 | 8× PNG or SVG |
| Print, merch, large display | any | SVG — scales without blur |
How the exports are made
Visible layers are flattened from bottom to top, with upper layers covering lower ones. For the PNG each pixel becomes a solid square of the chosen size on a transparent background — no smoothing is applied. For the SVG, neighbouring pixels of the same colour in a row are merged into one <rect>, and shape-rendering="crispEdges" stops browsers from anti-aliasing the seams, so a 16 × 16 icon is often only a few dozen rectangles.
Tips for cleaner pixel art
- Limit your palette: 4–16 colours keeps sprites readable. Generate a harmonious set with the Color Palette Generator.
- Draw the outline on one layer and colours on the layer below it, so recolouring never damages the outline.
- Avoid “jaggies”: lines should step in consistent lengths (1-1-1 or 2-2-2), not 1-3-1.
- Shade with a darker, slightly more saturated version of the base colour rather than plain black.
- Turning a photo into pixels? Start with Pixelate Image and clean it up here.
Pixel Art Editor FAQ
Is this pixel art editor free?
Yes — free, with no account, no watermark and no limits on exports.
Where is my drawing saved?
Automatically in this browser’s local storage. It stays until you clear site data. Use Save project to keep a copy you can move to another device.
How do I make the PNG bigger without blur?
Choose a PNG scale such as 8× or 16×. Each pixel becomes an 8 × 8 or 16 × 16 block, so edges stay perfectly sharp.
Can I import an existing image?
You can open projects saved by this editor. To start from a picture, pixelate it first with the Pixelate Image tool and trace it here.
Does it support animation or onion skinning?
No. This editor makes single images; there are no frames, so onion skinning does not apply. Export separate PNGs for each frame if you need a sprite sheet.
Why does fill not cover everything?
Fill replaces connected pixels of the same colour on the current layer only (4-way: up, down, left, right). Diagonal gaps and other layers are not crossed.