Game UI & HUD Pixel Art Lesson 3 of 5
Giving an icon depth
A dark rim and one highlight turn a flat shape into a solid object.
A flat, single-color icon reads, but it looks like a sticker. Two cheap moves give it weight without adding clutter: a darker rim around the outside, and a single highlight where the light hits. The rim separates the icon from whatever is behind it in the HUD; the highlight tells the eye it is a rounded, physical object.
- Outline the icon in a darker shade of its own color (not pure black — that reads harsh at this size)
- Add one small highlight on the top-left, where your light source hits
- Stop there — one rim, one highlight; over-shading a 16px icon just muddies it
Practice on a coin: a dark rim on the outside, a lighter face inside. That single contrast is what makes it read as a round, metal object.
Your turn
Draw a coin: dark rim, light face.
Use the dark color for the outer rim and the light color for the face inside. The rim is what makes a small icon pop off the HUD.
Match 85% to pass · now at 0%
Colors