Pixel Art Maker

Draw sprites on an 8, 16, 24 or 32 cell grid with a 16 colour palette, undo and redo, then export a crisp transparent PNG at 20 pixels per cell.

🌐 Español

Exports as 320 × 320px

Click, or click-and-drag, on the grid to paint. Changing the grid size clears the canvas — see the FAQ.

Transparent cells stay transparent in the exported PNG — nothing you draw is ever uploaded to a server.

🔒 Private by design: everything runs locally in your browser and never uploaded to any server.

Written and maintained by Last updated

A grid editor, not a paint program

Pixel art is a discipline of constraints. Every cell is a decision, the palette is small on purpose, and the whole point is that you can see each individual square. A general purpose paint program fights that: brushes have soft edges, colours blend, and zoom levels blur.

So this is a grid and nothing else. Four sizes, sixteen colours, an eraser, undo, redo, clear, and an export button. There are no layers, no brush shapes and no gradients, because none of them belong in a 16 by 16 sprite.

Everything lives in the page while it is open. Nothing is uploaded and nothing is saved to your device automatically, so treat the export as the save button.

Drawing a 16 by 16 sprite

  1. Pick a Grid size. The four options are 8, 16, 24 and 32 cells square, and the hint beside the dropdown tells you the pixel size of the export.
  2. Click a colour swatch in the palette. Hovering over a swatch shows its name.
  3. Click a cell to paint it, or click and drag to paint a run of cells in one stroke.
  4. Click Eraser to clear cells back to transparent, and click any swatch again to go back to painting.
  5. Undo and Redo step through your strokes. Both buttons disable themselves when there is nothing left to step to.
  6. Clear empties the canvas without changing the grid size, and is itself undoable.
  7. Click Download PNG to save the result. The file is named after the grid, so a 16 cell drawing becomes pixel-art-16x16.png.

Start at 16 unless you have a reason not to. It is the size most sprite work assumes, it is big enough for a recognisable character and small enough to finish, and 8 is genuinely hard rather than easy.

Twenty pixels a cell, and why that matters

The canvas you draw on and the file you download are the same resolution: twenty screen pixels for every cell of the grid. That is not an accident of layout. Keeping one scale for both means the drawing you see is exactly the drawing you get, with no separate downscaled preview to disagree with the export.

The blocky look survives because smoothing is switched off before every draw. Browsers interpolate scaled images by default, which is right for photographs and completely wrong here, so the flag is turned off explicitly and each cell renders as a hard square.

The practical consequence is that your export is already a usable asset. A 32 cell drawing lands at 640 by 640, which is large enough to post, to use as an avatar, or to drop into a design without anything upscaling it further and softening the edges.

Undo that matches what you expect

Two details make the history behave the way a drawing tool should.

The first is stroke granularity. While you hold the pointer down, painting happens on a working copy of the grid, and only when you release is the finished result committed as one history entry. Drag a diagonal across thirty cells and one undo removes all thirty.

The second is the redo rule. Undo something, then draw something new, and the redo stack is emptied. This is the correct invariant and it is easy to get wrong: keeping the old redo path alive would let you jump to a state that never existed on the path you are currently on.

History is capped at a hundred entries in each direction, so a long session cannot grow it without limit.

Where the export goes next

A transparent PNG at 320 or 640 pixels square is a good starting point for several things. For a browser tab icon, Favicon Generator will produce the sizes and formats a site needs from a single square image.

If you want to choose your own colours rather than work from the built-in sixteen, Color Palette Generator will give you a coordinated set of hex values to sample from in another editor. For freehand drawing with real brushes rather than cells, Online Whiteboard is the right tool, and Signature Generator covers the specific case of a transparent handwritten signature. The rest of the set is on the image tools hub.

See it in action

Screenshot of the Pixel Art Maker tool with a paintable canvas with grid sizes from 8x8 to 32x32 exporting at 320x320px, a colour swatch and eraser, undo, redo and clear, and a note that transparent cells stay transparent in the downloaded PNG
Pixel Art Maker mid-process: a paintable canvas with grid sizes from 8x8 to 32x32 exporting at 320x320px, a colour swatch and eraser, undo, redo and clear, and a note that transparent cells stay transparent in the downloaded PNG.
Diagram: where the work happens on a SysFenix page that has no file input at all: the tool arrives as ordinary JavaScript inside the page, works the answer out on your own device and renders it in place, so the upload, queue and server-side record a typical online tool needs never happen
Where the work happens on a SysFenix page that has no file input at all: the tool arrives as ordinary JavaScript inside the page, works the answer out on your own device and renders it in place, so the upload, queue and server-side record a typical online tool needs never happen.

Frequently asked questions

How big is the exported PNG?

Twenty pixels per cell, always. An 8 cell grid exports at 160 by 160, a 16 cell grid at 320 by 320, a 24 cell grid at 480 by 480 and a 32 cell grid at 640 by 640. The figure is shown next to the grid size dropdown so you never have to work it out. The same scale is used for the canvas you draw on, which is why the editing view and the exported file always match.

Why not export at one pixel per cell?

Because a 16 by 16 PNG is unusable almost everywhere. Chat apps, forums and image previews scale small images up with smooth interpolation, and your sharp sprite arrives as a blurry smudge. Exporting at twenty times the size bakes the blockiness in, so the art survives being resized by software that does not know it is looking at pixel art.

What happens to my drawing if I change the grid size?

It is cleared, and you get a fresh empty canvas at the new size. This is deliberate rather than an oversight. Resampling pixel art between resolutions is genuinely ambiguous, since there is no correct answer for which of four cells a single cell should become, and a wrong guess is worse than starting again. Export what you have before you switch.

Does undo step back one cell or one stroke?

One stroke. A click and drag that paints thirty cells is committed to history as a single entry when you release the pointer, so one undo takes the whole stroke back. That is what people mean by undo, and it is much less frustrating than thirty presses. Painting a cell that already holds that colour is not recorded at all, so a stray click cannot fill your history with nothing.

How far back can I undo?

One hundred steps in each direction. Beyond that the oldest snapshot is dropped. Redo works normally until you draw something new, at which point the redo path is discarded, which is the standard behaviour every editor uses. Clearing the canvas is itself an undoable step, so an accidental clear is recoverable.

Why sixteen colours and not a full colour picker?

Because a fixed palette is a feature in pixel art rather than a limitation. The set covers black, white, two greys, the primary and secondary hues, navy, teal, pink, brown and two skin tones, which is enough for sprites, icons and avatars. If you need an exact brand colour, export the PNG and recolour it in an editor that has a picker.

Does the transparent background survive?

Yes. Erased and never-painted cells stay genuinely transparent in the PNG, since PNG carries an alpha channel. That is what makes the output usable as a sprite over any background. Convert it to JPG afterwards and the transparency becomes solid, because JPG has no alpha channel to hold it.

Related tools