Pixel hearts

141 sprites

Pixel hearts for health bars, UI, and valentines. Free pixel art heart sprites in classic 8-bit and 16-bit styles.

141 sprites

No sprites match these filters.

Pixel hearts

The heart is the most reused sprite in games, and it is a UI element first and art second. That changes what makes a good one.

It has to read at a glance, mid-fight

A health heart is looked at during combat, in peripheral vision, while the player is doing something else. That is a harder requirement than looking good.

Which means high contrast against whatever your HUD sits on, a silhouette that survives being three quarters ignored, and absolutely no fine detail. A beautifully rendered heart with subtle shading is worse at this job than a flat one with a hard outline.

The three-state set

A health bar needs three sprites, not one.

Full, half, and empty. The half is not a separate drawing, it is the left side of the full heart composited onto the right side of the empty one. Build it that way and it will always line up exactly, which hand-drawing it will not.

Empty hearts keep the identical silhouette in grey. Changing the shape when a heart empties makes the bar flicker as the outline shifts, and players notice it as a glitch even when they cannot say what moved.

Eight by eight is the canonical size

Two bumps, a point, three colours. The Zelda-style heart is 8x8 and it is what most people picture when they think of a game heart at all.

16x16 gives room for a proper highlight and a second shadow tone. Beyond that you are drawing an illustration of a heart rather than a health icon, which is fine for a title screen and wrong for a HUD.

Hearts outside health bars

Valentine and decorative hearts play by different rules, because they are art rather than UI.

There the detail is welcome. Gradients across the face, a glossy highlight, outlines in a colour other than black, sizes up to 64x64. What would be a liability on a health bar is the whole point on a decorative sprite.

Worth knowing which one you are making before you start, because the two briefs pull in opposite directions.

Pixel-perfect symmetry

A heart is symmetrical and any error is doubled and obvious.

Draw the left half, then mirror it. Mirror sprite does this exactly, and it guarantees the two halves match in a way that hand-drawing both sides never quite will.

The one exception is the highlight, which sits on one side only. Add it after mirroring, never before.

FAQ

8x8 for the Zelda-style heart and 16x16 for a heart with visible shading. Both are standard, and the 8x8 version is the one most players picture when they think of a game heart.

Draw the full heart and the empty heart, then composite the left half of one onto the right half of the other. Three sprites, full, half, and empty, cover every state a health bar needs.

Three tones. A bright red base, a darker red for the lower right shadow, and one near-white highlight in the upper left. Empty hearts use the same shape in grey at the same three values.

Yes, every one downloads as a free PNG with a transparent background.

We use cookies to enhance your experience. Essential cookies are required for the site to function. You can choose to accept all cookies or only essential ones.

Cookie policy