Homepage / Combat Components /

Health Bar

Created by Jack Davies

14th June

Health bars indicate to the player how much health they have before death.

Health bars have the option to include a unit on which to measure their current health in relation to the maximum health available.

76 HP
  • When to use

    • Games that include combat mechanics may want to feed back to the user the current status of the health.
    • When vehicles can receive damage, the health bar may represent how durable the vehicle is and how long until a vehicle becomes unusable.
  • Solution

    • The colour red is often used to represent health, this is usually because it represents the colour of blood. The colour red has been used to represent health and aid before video games with the red cross being the symbol of the combat medic.
    • Icons are optional, although most games that include health bars will use icons (typically a heart) to aid recognition.
    • It is highly recommended that health bars are given units of measurement. This allows players to accurately assess gameplay situations at a glance.

Game Examples:

Tap on or hover over an example thumbnail to view the context of the Health Bar, if a screenshot exists.

  • Heroes of the Storm

  • Dying Light

  • PlayerUnknown's Battleground

  • Smackdown vs Raw

  • Zelda: BotW

  • Smite

  • Mortal Kombat 2

  • League of Legends

  • Horizon Zero Dawn

Technical Details

For any games that include death or combat, it is recommended that the health bar is displayed at all times of gameplay, or at the very least during situations which would result in death or loss of health.

Concerning iconography and health bars, some games such as Minecraft will use icons as a health bar. The heart icon is a famous symbol to represent health.


  • Posted: July 14, 2017 by Mylon

    This needs more details. A great example of a highly detailed health bar is Heroes of the Storm: White portion represents temporary health (shield), orange portion represents damage over time. Dark green represents heal over time. Ticks represent absolute numbers (as opposed to the bar % which is relative). Many games also use flashing red portions to illustrate damage happening.

  • Posted: July 14, 2017 by Angry Beaver

    Red is a common colour for health, and the cross a common symbol for aid or health. But be aware of running afoul of international trademarks of the Red Cross: http://www.redcross.ca/about-us/about-the-canadian-red-cross/red-cross-emblem/it-may-just-be-a-game-to-you-but–it-means-the-world-to-us

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Content


» Common Components

To help orientate the player and help them successfully navigate the environment to points of interest and objectives.

Read more

Saving Indicator

» Common Components

A visual indication that game progress is currently being saved and informs not to exit the game, or turn off the players gaming device.

Read more

Main Menu

» Common Components

The main menu is often included to help the player perform multiple tasks related to the game quickly and efficiently.

Read more