Heart Symbols Complete Guide

The heart is one of the most expressive symbols in human communication. Unicode includes over 30 distinct heart characters — from the classic black heart suit ♥ of playing cards to the full palette of coloured heart emoji and the anatomical variants introduced in Unicode 13. This guide covers all of them: code points, HTML entities, rendering differences between text and emoji, and how to use hearts effectively in web design, social media, and code.

Quick Copy-Paste Table

Text-Rendering Hearts

These characters use the current font's text colour and do not require an emoji font. They are reliable across all environments including terminals, PDF generators, and legacy email clients.

♥ Black Heart Suit — U+2665

This is the playing card suit character, defined in the Miscellaneous Symbols block (U+2600–U+26FF). It has been in character sets since long before Unicode and has excellent support everywhere. Despite the name "black" in Unicode terminology, "black" means filled — the character renders in the current CSS color.

.like-button::before {
  content: "♥";
  color: #ef4444; /* red-500 */
}

♡ White Heart Suit — U+2661

The unfilled counterpart to ♥, also from the playing card suits. "White" means outline/hollow. Use ♡ for the unfavourited/unliked state and ♥ for the favourited/liked state — a pure-Unicode alternative to SVG icon swaps.

❤ Heavy Black Heart — U+2764

Defined in the Dingbats block. Visually larger and bolder than ♥. This is the base code point that, when followed by the emoji variation selector U+FE0F, becomes the red heart emoji ❤️. Without U+FE0F, it renders as a text glyph in the active font colour.

heart_text  = "\u2764"          # ❤ — text, uses CSS color
heart_emoji = "\u2764\ufe0f"    # ❤️ — emoji, platform red

❣ Heart Exclamation — U+2763

A heart combined with an exclamation mark. Useful for expressing strong enthusiasm in typographic contexts. Rare but distinctive.

❦ Floral Heart — U+2766 and ❧ Rotated Floral Heart Bullet — U+2767

Two ornamental heart characters derived from the hedera (ivy leaf) of classical typography. The hedera has been used as a paragraph marker and decorative separator since Roman times. These render as elegant, calligraphic heart shapes and work well as drop caps, section dividers, or decorative bullets.

<p style="font-size:2rem; color:#db2777;">❦</p>

Coloured Heart Emoji

All coloured hearts are emoji-only characters — they require the platform's emoji font to render correctly and cannot be themed with CSS color.

The Colour Palette

Heart States and Meanings

Mathematical and Geometric Hearts

Unicode 13.0 (2020) added the anatomical heart (🫀 U+1FAC0) to represent the actual organ rather than the stylised love symbol. It is used in medical contexts, health apps, and biology education.

HTML and CSS Usage

Favourite / Like Button

<button class="like-btn" aria-pressed="false" aria-label="Like">
  <span class="heart">♡</span>
</button>

.like-btn[aria-pressed="true"] .heart::before { content: "♥"; color: #ef4444; }
.like-btn[aria-pressed="false"] .heart::before { content: "♡"; color: #9ca3af; }

Decorative header divider

<div class="divider" aria-hidden="true">❦ ❦ ❦</div>

.divider {
  text-align: center;
  font-size: 1.5rem;
  color: #f9a8d4; /* pink-300 */
  letter-spacing: 0.5em;
  margin: 2rem 0;
}

Email Newsletters (safe inline styles)

Email clients strip <style> blocks. Use inline styles and the text hearts for maximum compatibility:

<p style="color:#dc2626;font-size:24px;text-align:center;">&#x2764;</p>

Social Media and Messaging

Platform rendering of ❤️ (U+2764 + U+FE0F) varies:

To ensure consistent appearance across platforms, use text hearts (♥, ❤) in HTML with CSS colouring instead of relying on emoji rendering.

Keyboard Shortcuts

Windows

Emoji: Use the emoji picker (Windows + .) and search "heart".

macOS

Python and Developer Notes

# All text hearts (no emoji font required)
text_hearts = [
    "\u2665",  # ♥ Black Heart Suit
    "\u2661",  # ♡ White Heart Suit
    "\u2764",  # ❤ Heavy Black Heart
    "\u2763",  # ❣ Heart Exclamation
    "\u2766",  # ❦ Floral Heart
]

# Coloured emoji hearts
emoji_hearts = [
    "\U0001F9E1",  # 🧡 Orange
    "\U0001F49B",  # 💛 Yellow
    "\U0001F49A",  # 💚 Green
    "\U0001F499",  # 💙 Blue
    "\U0001F49C",  # 💜 Purple
]

Summary

Unicode hearts divide cleanly into two categories: text hearts (♥ ♡ ❤ ❦) that obey CSS colour and work in every environment, and emoji hearts (❤️ 💜 💙 etc.) that use platform colour rendering. For UI components, use the text hearts with CSS theming. For expressive communication in messages, posts, and notifications, the emoji hearts carry precise emotional nuances that users have come to associate with specific meanings. The floral hedera variants (❦ ❧) are a typographer's treasure — underused and instantly distinctive.