Pixel Art Maker. Sprites, drawn in the browser.

How to use the Pixel Art Maker

This editor lets you draw pixel art on a square grid from 8 by 8 up to 64 by 64 cells. Each cell holds one color or stays transparent, and the export turns every cell into a block of real pixels in a PNG. It is for sprites, game assets, icons, favicons and small retro drawings.

Step by step

1. 1
   Pick a grid size

   Choose a size from the Grid dropdown in the toolbar, from 8 × 8 to 64 × 64. It starts at 16 × 16. If you change the size later, the top-left part of your drawing is kept and anything outside the new size is cut off.

2. 2
   Choose a color

   Pick a Palette: NES-ish (16 colors), Pastel (12) or Mono (6), then click a swatch. For any other color, use the Custom color box. Colors you pick there are added to Recent, which keeps your last 8.

3. 3
   Draw

   Use Pencil (P) to click or drag single pixels and Eraser (E) to make them transparent again. Line (L) and Rectangle (R) show a preview while you drag and draw when you release; the rectangle is an outline. Fill bucket (F) fills the connected area of the same color. Color picker (I) copies a color from the canvas.

4. 4
   Use symmetry

   Tick Mirror-X to copy every stroke to the opposite side of the vertical center line. It works with the pencil, eraser, fill, line and rectangle, so you only draw half of a face or a character.

5. 5
   Adjust the view

   Use Zoom out and Zoom in to change how big each cell looks, from 4 to 40 screen pixels. Untick the Grid checkbox to hide the cell lines and see the drawing clean. Neither setting changes the export.

6. 6
   Fix mistakes

   Press Undo (Ctrl+Z) or Redo (Ctrl+Y or Ctrl+Shift+Z). The editor keeps your last 80 steps. Clear canvas empties the grid, and Undo brings it back.

7. 7
   Export or import

   Choose 1× pixels, 8× scale (the default) or 16× scale, then press Download PNG. To keep working on an existing sprite, press Import PNG and pick an image; it replaces the current canvas.

What you get

• The text under the canvas shows the grid size, for example 16 × 16. The value between the zoom buttons, such as 28px, is only how large one cell appears on your screen.
• The PNG is the grid size times the export scale. A 16 × 16 drawing at 8× scale is 128 × 128 pixels and is saved as pixel-art-16x16-8x.png.
• Empty cells are transparent in the PNG. The dark checkerboard you see behind them is only there on screen.

Tips and common mistakes

• Use 1× pixels when the sprite goes into a game engine or another editor. Use 8× or 16× when you share it, because many apps blur small images when they enlarge them.
• Set the grid size before you press Import PNG. The image is scaled to fill the current grid, so a non-square image gets stretched, and pixels that are less than half opaque become transparent.
• Choosing a smaller grid cuts off the right and bottom of your drawing. If that was a mistake, press Undo straight away.
• The editor autosaves one drawing per browser, so two open tabs overwrite each other's saved drawing. Download a PNG of anything you want to keep before starting something new.

Privacy and limits

Drawing, importing and exporting all happen in your browser. Your grid, pixels, current color and recent colors are autosaved in this browser's local storage so the drawing is still there when you come back; nothing is uploaded. Clearing your site data deletes the saved drawing.

Back to the tool

Everything a sprite editor should do.

Frequently asked questions.

More design tools.

Browse the full free-tool library →