HTML Entity for White Heart Suit (♡)
What You'll Learn
How to display the White Heart Suit symbol (♡) in HTML using hexadecimal, decimal, and CSS escape methods. This character is U+2661 (WHITE HEART SUIT) in the Miscellaneous Symbols block (U+2600–U+26FF)—the outline heart suit from playing cards.
Render it with ♡, ♡, or CSS escape \2661. There is no named HTML entity for U+2661. Do not confuse ♡ with ♥ (black heart suit, ♥) or red heart emoji ❤.
⚡ Quick Reference — White Heart Suit
U+2661Miscellaneous Symbols
♡Hexadecimal reference
♡Decimal reference
—Use numeric codes only
Name Value
──────────── ──────────
Unicode U+2661
Hex code ♡
HTML code ♡
Named entity (none)
CSS code \2661
Meaning White heart suit (playing cards)
Related U+2665 = ♥ (black heart suit, ♥)
U+2662 = ♢ (white diamond suit)
U+2664 = ♤ (white spade suit)
U+2667 = ♧ (white club suit)
Block Miscellaneous Symbols (U+2600–U+26FF)Complete HTML Example
A simple example showing White Heart Suit (♡) using hexadecimal code, decimal HTML code, and a CSS content escape:
<!DOCTYPE html>
<html>
<head>
<style>
#heart:after{
content: "\2661";
}
</style>
</head>
<body>
<p>White Heart Suit (hex): ♡</p>
<p>White Heart Suit (decimal): ♡</p>
<p id="heart">White Heart Suit (CSS): </p>
</body>
</html>🌐 Browser Support
U+2661 is supported in modern browsers when the font includes Miscellaneous Symbols glyphs:
👀 Live Preview
See White Heart Suit (♡) in context:
🧠 How It Works
Hexadecimal Code
♡ uses the Unicode hexadecimal value 2661 to display the character. The x prefix indicates hexadecimal format.
Decimal HTML Code
♡ uses the decimal Unicode value 9825 to display the same character. A common method for symbol characters in HTML.
CSS Entity
\2661 is used in CSS stylesheets, particularly in the content property of pseudo-elements like ::before and ::after.
Same visual result
All three methods produce the glyph: ♡. Unicode U+2661 is the white heart suit. Not the same as ♥ (black heart, ♥).
Use Cases
White Heart Suit (♡) is commonly used in:
Romantic pages, Valentine’s content, and affection-themed layouts.
Posts and comments expressing love, appreciation, or warmth.
Poker apps, solitaire UI, and playing-card interfaces.
Headers, footers, and design accents with heart ornamentation.
Dating platforms, relationship blogs, and romantic content.
Gift shops, romantic gift sections, and seasonal promotions.
Pair ♡ with visible text or aria-label; do not rely on the glyph alone.
💡 Best Practices
Do
- Use ♡ for an outline heart suit; use ♥ or
♥for the filled black variant - Pair heart glyphs with accessible text or
aria-labelwhen conveying meaning - Pick one numeric style (hex or decimal) per project for consistency
- Use fonts that support Miscellaneous Symbols characters
- Test rendering across browsers and devices
Don’t
- Confuse ♡ (white heart suit) with ♥ (
♥, black heart suit) - Assume
♥renders ♡—it renders ♥ (U+2665) - Mix entity styles randomly in one file
- Use CSS escape
\2661inside HTML markup - Expect a named HTML entity for U+2661—none exists
Key Takeaways
Type ♡ directly, or use hex/decimal references
♡ ♡For CSS stylesheets, use the escape in the content property
\2661Unicode U+2661 — WHITE HEART SUIT (Miscellaneous Symbols)
U+2661/U+2665 are white/black heart suit pairs; only U+2665 has ♥
Previous: White Frowning Face (☹) Next: White Left Pointing Index (☜)
❓ Frequently Asked Questions
♡ (hex), ♡ (decimal), or \2661 in CSS content. There is no named HTML entity for U+2661. In UTF-8 you can also type ♡ directly.U+2661 (WHITE HEART SUIT). Miscellaneous Symbols block U+2600–U+26FF. Hex 2661, decimal 9825.♡ or ♡) go directly in markup. The CSS escape \2661 is used in stylesheets, typically in the content property of ::before or ::after. Same visual result, different layers of the stack.♥ renders ♥ (U+2665, black heart suit). For the white outline heart use ♡ or ♡ for U+2661.Explore More HTML Entities!
Discover 1500+ HTML character references — symbols, punctuation, and more.
About the author
8 people found this page helpful