Design Your Own 16x16 Pixel-Art Cursor (Beginner Tutorial)

Open Aseprite (or any pixel editor) and draw a clean, readable pointer in five passes — silhouette, shadow, fill, highlight, and accent. · 10 min read

A pixel cursor is one of the smallest, most repeatedly-viewed pieces of art you will ever make. People stare at it for thousands of hours. The good news: it only takes about an hour to design one that does not look like garbage.

Tooling

You need a pixel editor with onion-skinning and palette swatches. Aseprite is the standard. Free options include LibreSprite and Piskel. Avoid Photoshop unless you really know how to disable every form of antialiasing.

Pass 1 — Silhouette

Pick a 16×16 canvas and draw the cursor in pure black on white. No palette decisions yet. The silhouette has to read as the correct cursor type at one inch from your face. If you cannot tell whether your pointer is pointing or your hand is grasping, the silhouette is wrong.

Pass 2 — Shadow / outline

Add a one-pixel black outline around the silhouette. This is the trick every readable cursor uses: it lets the cursor sit on top of any background — black, white, or hot pink — without disappearing.

Pass 3 — Fill color

Pick exactly one color for the body of the cursor. White is the safe default. Anything else is a strong style choice; if you go with red, every game you play will feel like an FPS HUD.

Pass 4 — Highlight

Add one or two pixels of bright highlight on the upper-left edge to give the cursor depth. This is the difference between a “sticker” cursor and a “sculpted” cursor. One pixel is usually enough.

Pass 5 — Accent

Optional. Drop one or two pixels of an accent color (the magenta in CursorCraft’s palette is a good example) somewhere unexpected — the underside of an arrow, the cuff of a hand, the dot of an i-beam. This is what gives the cursor a brand.

Export

Export to .png, then convert to .cur using a tool like RealWorld Cursor Editor (Windows). The hotspot is set during the conversion. For an animated cursor, repeat the design at 6–10 frames and export to .ani.

Test on a busy background

Move your cursor over a YouTube thumbnail grid, a code editor, and a white text doc. If you can lose it on any of those, ship a thicker outline and try again.

More guides