Pixel art UI & icons

Pixel art UI and icons

Buttons, panels, health bars, inventory frames, cursors, and icons. UI is the pixel art a player looks at most and notices least, which makes it the easiest part of a game to get subtly wrong.

The difference from every other sprite on this site is that UI has to be legible rather than beautiful. A gorgeous inventory frame that makes the item inside it hard to see is a failed frame.

Everything sits on one grid

Pick a base unit, usually 8 or 16 pixels, and build every element as a multiple of it.

Panels, buttons, icon cells, and bar segments all snapping to the same unit is what makes an interface feel designed rather than assembled. It also means the whole UI scales together. At 3x, an 8-pixel unit becomes 24 and everything stays aligned, whereas a stray 11-pixel element lands on a fraction and goes soft.

That soft element is what players register as cheap without being able to say why.

Bevels do the work

Pixel UI communicates state almost entirely through a one-pixel bevel.

A raised button is light on the top and left edges, dark on the bottom and right. Pressed is that inverted, plus the label moved down one pixel. Disabled is the bevel removed entirely and the whole element desaturated.

Three states, and none of them needs more than a handful of pixels changed. This is the same visual language as early desktop interfaces and it works because players already learned it decades ago.

Nine-slice panels

A dialog box that must render at any size should be one small sprite split into nine pieces.

Four corners that never stretch, four edges that tile along their axis, and a centre that fills. It is how a 24x24 source sprite renders a panel of any dimensions with the border staying crisp at every corner.

Both Unity and Godot support this directly, and building panels any other way means drawing a new sprite each time a box changes size.

Icons need silhouette, not detail

An icon is read in peripheral vision during play, which is the hardest legibility test in a game.

Test it the same way as an item sprite. Put your icon set in a row, look away, look back. Anything you have to think about has a silhouette problem, and adding detail makes it worse rather than better.

16x16 is the practical size. Below that most concepts stop being distinguishable, and above it icons start competing with the content they label.

Bars are three sprites, not one

A health or mana bar needs an empty track, a fill, and usually a frame around both.

Keep the fill a flat colour or a simple two-tone gradient along its length. A textured fill fights the frame and makes the current value hard to read at a glance, which is the one thing a bar exists to communicate.