Need a heart symbol for your project or social media caption? Click on any symbol below to copy it to your clipboard instantly. This list includes standard text hearts, colorful emojis, Japanese Kaomoji, and the technical HTML/CSS codes for developers.

Text & Outline Heart Symbols (Black & White)

These symbols are text-based, meaning they will adopt the color of your font rather than displaying as a pre-colored image. They are perfect for minimalist designs, username decorations, or coding projects where you need a monochromatic look.

  • Black Heart Suit
  • White Heart Suit
  • Rotated Heavy Black Heart Bullet
  • Heavy Heart Exclamation Mark Ornament
  • Tibetan Mark Rwa (Fancy Heart)
  • Floral Heart
  • Rotated Floral Heart Bullet

If you are looking for other functional text icons for your layout, you might also find our Star Symbol and Bullet Point Symbol guides useful.

Colored Heart Emojis & Meanings

Unlike text symbols, these emojis render with their own colors regardless of your font settings. Each color carries a specific nuance in digital communication.

  • ❤️ Red Heart: The classic symbol of love and romance.
  • 🧡 Orange Heart: Often represents friendship and care, slightly less intimate than red.
  • 💛 Yellow Heart: Symbolizes happiness, friendship, and positivity.
  • 💚 Green Heart: Popular for nature, healthy living, or jealousy.
  • 💙 Blue Heart: Represents trust, loyalty, and peace.
  • 💜 Purple Heart: Associated with glamour, wealth, or sometimes specifically used by fandoms.
  • 🖤 Black Heart: Used for dark humor, sorrow, or edgy aesthetic.
  • 🤍 White Heart: Symbolizes pure love, weddings, or minimalism.
  • 🤎 Brown Heart: Represents stability, earthiness, and warmth.
  • 💔 Broken Heart: Expresses sadness or heartbreak.
  • ❤️‍🔥 Heart on Fire: Represents extreme passion or lust.
  • ❤️‍🩹 Mending Heart: Symbolizes healing and recovery.

Heart Kaomoji (Japanese Emoticons)

Kaomojis use a combination of special characters to create cute, expressive faces. These are widely used in gaming chats and forums to show affection in a unique way.

  • ( ˘ ³˘)♥
  • (vZv)
  • (✿ ♥‿♥)
  • ♥(ˆ⌣ˆԅ)
  • (っ◔◡◔)っ ♥
  • ( ◜◒◝ )♡
  • ╰(✿´⌣\✿)╯♡

Technical Reference (HTML, CSS, Unicode)

For developers and designers working on web projects, simply copying the symbol might not be enough. Below is the reference table for integrating heart symbols directly into your code using HTML Entities or CSS Content values.

SymbolDescriptionUnicodeHTML EntityCSS Code
Black Heart SuitU+2665\2665
Heavy Black HeartU+2764\2764
Rotated Heart BulletU+2765\2765
Heart ExclamationU+2763\2763
White Heart SuitU+2661\2661
💔Broken HeartU+1F494💔\1F494

When using these in CSS, remember to set the content property properly, for example: content: "\2764";`.

How to Type Heart Symbol on Keyboard?

If you want to type a heart without copying it from a site, you can use keyboard shortcuts.

For Windows Users (Alt Code): Make sure your NumLock is ON. Hold down the Alt key and type 3 on the number pad.

  • Alt + 3 = ♥

For Mac Users: Mac OS does not have a direct Alt code for the heart symbol like Windows. The fastest way is to open the Character Viewer:

  1. Press Control + Command + Space.
  2. Type heart in the search bar.
  3. Double-click the symbol you want to insert.

If you are expanding your UI toolkit, check out our Cross Symbol page for close buttons and negative indicators.