How to draw a pixel heart — 3 methods with free grid templates

Just want a pixel heart now?

Generate a pixel heart instantly →

Done in 10 seconds. Read on if you want to learn to make them yourself.

Why pixel hearts?

The pixel heart is iconic. It's been the universal symbol for health in games since the 1980s. From Zelda to Undertale, this simple shape communicates "life" instantly.

Common uses:

• Health bars and HP indicators
• Lives remaining counter
• Love/affection meters
• Collectible items
• UI decorations
• Social media graphics

Let's make one.

Method 1: Manual drawing (the classic way)

This is the foundational approach. Once you understand it, you can create pixel hearts at any size.

The 8x8 pixel heart

The smallest practical size. Perfect for UI elements.

. . # # . # # .
. # # # # # # #
. # # # # # # #
. # # # # # # #
. . # # # # # .
. . . # # # . .
. . . . # . . .
. . . . . . . .

Step by step:

1. Row 1: Two bumps (2 pixels each, 1 pixel gap)
2. Rows 2-4: Fill the middle, keep outer edge curved
3. Rows 5-6: Taper inward
4. Row 7: Single pixel point

That's it. 7 rows, one color, instant recognition.

The 16x16 pixel heart

More room for detail and shading.

. . . # # . . . . . # # . . . .
. . # # # # . . . # # # # . . .
. # # # # # # . # # # # # # . .
. # # # # # # # # # # # # # . .
. # # # # # # # # # # # # # . .
. # # # # # # # # # # # # # . .
. . # # # # # # # # # # # . . .
. . # # # # # # # # # # # . . .
. . . # # # # # # # # # . . . .
. . . . # # # # # # # . . . . .
. . . . . # # # # # . . . . . .
. . . . . . # # # . . . . . . .
. . . . . . . # . . . . . . . .
. . . . . . . . . . . . . . . .

Proportions that work:

• Two lobes should be equal size
• Center dip is 1-2 pixels
• Point tapers smoothly (no jagged steps)
• Symmetrical left-to-right

Adding depth with shading

A flat heart works, but shading makes it pop.

3-color approach:

1. Base red - Main fill (#FF0000 or softer #E53935)
2. Dark red - Right and bottom edges (#B71C1C)
3. Light red/pink - Top-left highlight (#FF8A80)

Apply the shading:

• Light source: top-left (standard)
• Highlight: top curve of each lobe (1-2 pixels)
• Shadow: right edge and bottom point
• Base: everything else

. . . L L . . . . . L L . . . .
. . L L B B . . . B B L L . . .
. L L B B B B . B B B B B S . .
. L B B B B B B B B B B B S . .
. B B B B B B B B B B B B S . .
. B B B B B B B B B B B S S . .
. . B B B B B B B B B B S . . .
. . B B B B B B B B B S S . . .
. . . B B B B B B B S S . . . .
. . . . B B B B B S S . . . . .
. . . . . B B B S S . . . . . .
. . . . . . B S S . . . . . . .
. . . . . . . S . . . . . . . .

L = Light, B = Base, S = Shadow

The outline decision

With black outline:

• Maximum visibility on any background
• Retro game aesthetic (NES/SNES style)
• Takes 1 pixel from each edge

Without outline:

• Softer, modern look
• More interior space for detail
• Needs contrasting background to read

Selective outline:

• Outline only the shadow side
• Best of both worlds
• Slightly more complex

Method 2: AI generation (the fast way)

Why spend 5 minutes when you can spend 5 seconds?

Basic prompts

Simple heart:

pixel art red heart, game health icon, transparent background

Detailed heart:

pixel art heart, red with pink highlights, shading,
game UI style, 32x32, clean edges

Stylized hearts:

pixel art crystal heart, blue gem, shiny, magical item

pixel art broken heart, cracked, two pieces, sad

pixel art golden heart, special item, glowing, rare

Generate a simple red heart →

Generate a crystal heart →

Generate a broken heart →

After generating

Use the pixel editor to:

• Clean up any rough edges
• Adjust colors to match your game's palette
• Add or refine the outline
• Resize if needed

AI gets you 90% there. A quick edit makes it perfect.

Method 3: Convert an existing image

Have a heart image you like? Convert it to pixel art.

Online converters

Tools like PixelMe or Pixel Art Village can convert photos and vectors to pixel art.

Best source images:

• Simple, flat heart shapes
• High contrast (red on white)
• No complex gradients
• Vector graphics work best

After converting:

• Colors may need adjustment
• Edges often need cleanup
• May not match your game's style

The limitation

Converters pixelate what exists. They can't create the clean, intentional pixels that make good game art. For UI elements like hearts, generation or manual drawing usually beats conversion.

Pixel heart variations

Animated hearts

Make your heart feel alive:

Pulsing heart (4 frames):

1. Normal size
2. 1 pixel larger (scale up)
3. Normal size
4. 1 pixel smaller (scale down)

Loop this at 4-6 FPS for a gentle pulse.

Sparkling heart (4 frames):

1. Normal
2. Add small white pixel (top-left)
3. Move sparkle (top-right)
4. Sparkle fades

Style variations

8-bit style (NES):

• Hard black outline
• 3-4 colors max
• No anti-aliasing

16-bit style (SNES):

• Softer outline (dark red instead of black)
• More color gradations
• Subtle shading

Modern pixel art:

• No outline
• Smooth gradients
• Higher resolution (32x32+)

Minimalist:

• Single color
• Smallest readable size
• Maximum simplicity

Color variations by meaning

Using hearts in your game

Health bar patterns

Individual hearts (Zelda style):

• Show exact HP count
• Satisfying to collect
• Takes horizontal space

Heart container:

• Single heart that empties
• Clean, compact UI
• Less granular feedback

Animated damage:

• Flash white when hit
• Shake on low health
• Crack before breaking

Implementation tips

For empty hearts:

• Use same shape, different fill
• Gray outline with transparent center
• Or dark/desaturated version of full heart

For partial hearts:

• Half-heart sprites (left and right halves)
• Or use a fill meter inside the heart shape

Positioning:

• Top-left is standard (follow conventions)
• Add padding from screen edge (8-16px)
• Scale appropriately for resolution

Common mistakes

1. Asymmetrical lobes - Mirror your pixels exactly
2. Jagged point - Taper smoothly, don't step randomly
3. Too much detail - Hearts are simple shapes
4. Wrong aspect ratio - Hearts are wider than tall at the top, taller than wide overall
5. Inconsistent style - Match your game's other UI elements

Quick templates

Copy these for your projects:

8x8 (minimal)

. . 1 1 . 1 1 .
. 1 1 1 1 1 1 1
. 1 1 1 1 1 1 1
. . 1 1 1 1 1 .
. . . 1 1 1 . .
. . . . 1 . . .

12x12 (balanced)

. . 1 1 1 . . 1 1 1 . .
. 1 1 1 1 1 1 1 1 1 1 .
1 1 1 1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1 1 1 1
. 1 1 1 1 1 1 1 1 1 1 .
. . 1 1 1 1 1 1 1 1 . .
. . . 1 1 1 1 1 1 . . .
. . . . 1 1 1 1 . . . .
. . . . . 1 1 . . . . .
. . . . . . . . . . . .

16x16 (detailed)

See the full grid in Method 1 above.

Next steps

Made your first heart? Now try:

• Building a complete UI set with matching palette
• Other 16x16 sprites like items and characters

Want hearts without the work?

• Zelda-style heart container →
• Shattered glass heart →
• Steampunk mechanical heart →
• Frozen ice heart →

Create your pixel heart

Three options:

1. Draw manually using the templates above
2. Generate with AI → in 10 seconds
3. Use the pixel editor to refine either approach

The pixel heart is a rite of passage for game developers. Now you know how to make one.

Related posts

Blog

2D pixel art for games: complete style guide

A practical style guide for 2D pixel art in games. Covers pixel art styles from 8-bit to modern HD, resolution choices, color theory, and keeping your assets consistent.

Blog

Anime pixel art — the JRPG tradition that never left

How anime pixel art evolved from SNES JRPGs to modern indie games. Techniques for eyes, hair, poses, and palettes at small scales.

Blog

How to make a pixel art game — the practical roadmap

A step-by-step plan for making your first pixel art game. Engine choice, art pipeline, scope control, and the tools that save the most time.