A character sprite can take up half the screen and that's fine, but the icon next to a health bar or sitting in an inventory slot usually has to work inside 24-32 pixels or less. At that size, "does it look nice" matters far less than "can a player tell what it is in half a second." This guide covers the ground rules for HUD and inventory icons that stay legible in that tiny amount of screen space.
Silhouette comes before color
An icon should still be recognizable filled in with a single flat gray. A sword should read from the blade-and-hilt silhouette alone; a potion should read from the bottle outline alone. Color is a later step - if the silhouette is ambiguous, no amount of good coloring will save it once it's shrunk down. Get in the habit of test-filling a sketch with one flat color early on and checking whether it's still recognizable.
Prioritize contrast over detail
On a canvas as small as 24x24, chasing shading or highlights usually just muddies the shape. What matters more is clear contrast between the icon and its background, and between the icon's most important part (a blade's edge, a potion's liquid color) and everything else. When several icons sit side by side, as in an inventory grid, giving each item category a distinct base tone (cool tones for weapons, warm tones for consumables, say) lets players get a rough read on category from color alone, before they've even parsed the shape.
A common health bar mistake
A health bar is one of the UI elements players glance at most often, and for the shortest amount of time. A heavily gradiented or decorated health bar makes it harder to register "how much is left" in that split second during actual play. A flat fill color that contrasts clearly against the background, combined with threshold-based color changes at, say, 25%/50%/75% (green to yellow to red), lets players read danger level intuitively without reading a number at all.
Showing state: equipped, on cooldown, disabled
Inventory and skill icons often need to look different depending on state. The usual approach isn't to redraw the icon - it's to lay an overlay on top of the same base icon. An equipped item might get a different border color or a checkmark; a skill on cooldown gets darkened with the remaining time overlaid as a number; an unusable item gets desaturated and made semi-transparent. This way you only ever draw one base icon, and every state is just a combination of overlays - which also cuts down on the total amount of art you need to produce.
Practical checklist
- 1. Test as a flat silhouette firstfill it with one gray and check the shape still reads.
- 2. Preview at actual display sizecheck it at the size it'll actually appear in-game (say, 32x32), not the zoomed-in original.
- 3. Contrast over detail, alwaystrim detail before you sacrifice contrast against the background or within the key shape.
- 4. Handle state with overlaysdon't redraw for equipped/cooldown/ disabled - layer an overlay on the base icon instead.
Need reference icons before you start drawing your own? The Pixel Image Picks page has 57 original 8-bit icons free to download. If you don't see what you need, leave a request on the Image Request board.
Frequently asked questions
What pixel size should HUD icons be?
Draw at the size the icon actually displays in-game (usually 16-32px) and check it shrunk to that size. If it only reads well in the zoomed-in original and mushes at real size, cut detail.
Do I have to add an outline?
If your game has busy backgrounds or backgrounds that change brightness a lot, a 1px dark outline reliably separates the icon from what's behind it. If the background is always a dark flat panel, you can skip it.
What should I do for colorblind players?
Don't carry information by color alone the way a green/yellow/red health bar does - pair it with shape, a number, or an icon. In the danger zone, for example, also make the bar blink or attach a warning icon.
Related guides: Choosing a color palette · Sprite size · Outlines and shading