Game UI & HUD Pixel Art Lesson 2 of 5
Readable icons
An icon is a silhouette first. Draw the heart, then judge it small.
A UI icon is a tiny sprite that has to be recognised in a fraction of a second, so — like any sprite — it lives or dies by its silhouette. A heart, a coin, a key, a potion: each should be identifiable from its solid outer shape alone, before you add a single interior pixel. If the silhouette is unclear, no amount of shading will save it.
- Pick a shape with a strong, unmistakable outline (heart, key, droplet, shield)
- Draw it as a solid block first and check it reads as the object
- Keep it symmetrical or deliberately not — wobble reads as a mistake at this size
- Leave a clear one-pixel gap between the icon and anything next to it so shapes do not merge
Try it now: fill in the classic heart below. It should read as a heart from the solid shape alone.
Your turn
Fill in the heart icon as one solid shape.
Paint every cell of the heart in one color — the silhouette is what makes a UI icon readable. Match the faint guide to pass.
Match 85% to pass · now at 0%