Heart Icon Pixel Art Template
A 16×16 UI icon in three visible colors — symmetry, one glint, and the two pixel corners that make a heart a heart.
Palette · 4 colors
Create your own
Design breakdown
01Mirror symmetry
Draw half, mirror the other. Symmetry is also communication: players parse symmetric icons as system objects (health, lives) before reading any detail.
02Dip and point
The dip between the lobes and the bottom point each get crisp single-pixel corners. When a heart 'looks off', it is almost always one of these two spots rounded over.
03Three colors, one glint
Plum shadow, bright red body, one white glint top-left on the left lobe. As UI, the icon displays crisp at 1–2× — shading subtlety would be invisible, so the ramp stays minimal.
How to customize
- Recolor for status: cool blues for mana, green for stamina, gold for special.
- Add a 1px darker outline pass to survive busy backgrounds.
- Draw a 'broken' variant by splitting the bottom point into two offset halves.
Animation ideas
- Pulse: two frames, the second 1px wider on both lobes, alternating at ~300ms.
- Fill-up: export 4 variants from empty outline to full red for a health bar.
- Pickup burst: one frame with two white sparkle pixels diagonal from the glint.
Related
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.
OpenGuide8×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.
OpenTutorialStart from a template
Take apart a finished sprite to learn its palette and shading, then remake it in your own colors.
Open