HTML Entity for Heavy Black Heart (❤)
What You'll Learn
How to display the Heavy Black Heart symbol (❤) in HTML using hexadecimal, decimal, and CSS escape methods. This character is U+2764 (HEAVY BLACK HEART) in the Dingbats block (U+2700–U+27BF). It is one of the most recognizable symbols for love, favorites, and likes in UI and content.
Render it with ❤, ❤, or CSS escape \2764. There is no named HTML entity. Do not confuse ❤ with U+2665 (♥, black heart suit) or emoji hearts in other blocks; on many systems U+2764 may render red, but the code point is the heavy black heart.
⚡ Quick Reference — Heavy Black Heart
U+2764Dingbats block
❤Hexadecimal reference
❤Decimal reference
—Use numeric codes only
Name Value
──────────── ──────────
Unicode U+2764
Hex code ❤
HTML code ❤
Named entity (none)
CSS code \2764
Meaning Heavy black heart
Related U+2665 = heart suit (♥)Complete HTML Example
This example demonstrates the Heavy Black Heart (❤) using hexadecimal code, decimal HTML code, and a CSS content escape. There is no named HTML entity:
<!DOCTYPE html>
<html>
<head>
<style>
#point:after{
content: "\2764";
}
</style>
</head>
<body>
<p>Heavy Black Heart using Hexadecimal: ❤</p>
<p>Heavy Black Heart using HTML Code: ❤</p>
<p id="point">Heavy Black Heart using CSS Entity: </p>
</body>
</html>🌐 Browser Support
The Heavy Black Heart (❤) is widely supported in modern browsers when the font includes Dingbats:
👀 Live Preview
Heavy Black Heart (❤) in context, compared with the playing-card heart suit (♥):
🧠 How It Works
Hexadecimal Code
❤ uses the Unicode hexadecimal value 2764 to display the heart. The x prefix indicates hexadecimal format.
Decimal HTML Code
❤ uses the decimal Unicode value 10084 to display the same character.
CSS Entity
\2764 is used in CSS stylesheets, particularly in the content property of pseudo-elements like ::before and ::after for favorite or like buttons.
Same visual result
All three methods produce ❤. Unicode U+2764 is in the Dingbats block. Next: Heavy Check Mark (✔).
Use Cases
The Heavy Black Heart (❤) is commonly used in:
Favorite, Like, or Love buttons in e-commerce, social apps, and content platforms.
Romance themes, greeting cards, and love-related messaging.
Reactions, profile badges, and match or like indicators.
Save for later and add-to-favorites in catalog UI.
Helpful votes and positive review highlights.
Decorative hearts in headers, footers, and brand assets.
💡 Best Practices
Do
- Pair ❤ with text or
aria-label(e.g. “Add to favorites”, “Like”) - Use
content: "\2764"on buttons via::beforeor::after - Declare UTF-8 with
<meta charset="utf-8"> - Test glyph color and shape across fonts and platforms
- Keep one numeric style (hex or decimal) per project
- Use visible labels on interactive favorite controls
Don’t
- Rely on ❤ alone for accessibility-critical actions
- Confuse U+2764 (❤) with U+2665 (♥, heart suit)
- Expect a named HTML entity for U+2764
- Use CSS
\2764in HTML text nodes - Assume color is always red on every OS (font-dependent)
Key Takeaways
Two HTML numeric references plus CSS insert U+2764
❤ ❤For CSS, use \2764 in the content property
Unicode U+2764 — HEAVY BLACK HEART (❤)
Not the same as black heart suit U+2665 (♥)
Next: Heavy Check Mark (✔)
❓ Frequently Asked Questions
❤ (hex), ❤ (decimal), or \2764 in CSS content. There is no named entity. All three methods render the Heavy Black Heart (❤) correctly.U+2764 (HEAVY BLACK HEART). Dingbats block. Hex 2764, decimal 10084. The symbol (❤) is widely used for love, favorites, and likes.❤ or ❤) go in markup. The CSS escape \2764 is used in stylesheets, typically on ::before or ::after. Both produce ❤.❤) or decimal (❤) codes, which is standard for characters in the Dingbats block.Explore More HTML Entities!
Discover 1500+ HTML character references — symbols, math, and more.
About the author
8 people found this page helpful