16×16 Heart — UI Icon Example
A health heart at 16×16: why symmetric silhouettes, a two-step red ramp and one white glint are all an icon needs.
palette · 4 colors
01Symmetry is the feature
The heart is mirror-symmetric, so you draw half and mirror it. Symmetry also communicates: players parse symmetric icons as 'system objects' (health, lives) without reading any detail.
02Two reds and a white
Only three visible colors: deep plum-red shadow, bright red body, white glint. The glint sits top-left on the left lobe — the classic placement — and nowhere else. A heart with two glints reads as glass; one glint reads as glossy.
03Dip and point
The two areas that make a heart a heart: the dip between the lobes and the bottom point. Both get crisp single-pixel corners. If either is rounded off by accident, the icon degrades into a blob — check them first when a heart 'looks off'.
04As UI, not world art
Icons live at UI scale, displayed crisp at 1× or 2×. That tolerance for flat color is why the ramp can be this simple — shading subtlety would be invisible in a menu anyway.
Recreate it
Put it to work
Related
8×8 vs 16×16 vs 32×32 Pixel Art
A direct comparison of 8×8, 16×16 and 32×32 pixel art: what fits at each size, side-by-side character examples, and when to use each.
OpenPaletteCyberpunk Neon Palette
A 9-color night-city palette: near-black bases, electric cyan and magenta accents, and a warm amber for signage and lights.
Open