HTML Entity for Floral Heart (❦)
What You'll Learn
How to display the Floral heart symbol (❦) in HTML using hexadecimal, decimal, and CSS escape methods. This character is U+2766 (FLORAL HEART) in the Dingbats block (U+2700–U+27BF)—a decorative heart-shaped dingbat, also called the rotated floral heart bullet, used in love-themed content, cards, and elegant design.
Render it with ❦, ❦, or CSS escape \2766. There is no named HTML entity. Do not confuse ❦ with ❥ (floral heart, different orientation) or emoji hearts (❤, U+2764).
⚡ Quick Reference — Floral Heart
U+2766Dingbats block
❦Hexadecimal reference
❦Decimal reference
—Use numeric codes only
Name Value
──────────── ──────────
Unicode U+2766
Hex code ❦
HTML code ❦
Named entity (none)
CSS code \2766
Meaning Rotated floral heart bullet (decorative)
Related U+2765 = Floral heart (❥); U+2764 = Heavy black heart (❤)Complete HTML Example
This example demonstrates the Floral 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: "\2766";
}
</style>
</head>
<body>
<p>Floral Heart using Hexadecimal: ❦</p>
<p>Floral Heart using HTML Code: ❦</p>
<p id="point">Floral Heart using CSS Entity: </p>
</body>
</html>🌐 Browser Support
The Floral heart symbol is widely supported in modern browsers with a suitable font:
👀 Live Preview
See the floral heart (❦) in decorative and love-themed context:
🧠 How It Works
Hexadecimal Code
❦ uses the Unicode hexadecimal value 2766 to display the Floral heart symbol. The x prefix indicates hexadecimal format.
Decimal HTML Code
❦ uses the decimal Unicode value 10086 to display the same character.
CSS Entity
\2766 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+2766 is in Dingbats. Rotated floral heart bullet. No named HTML entity.
Use Cases
The Floral heart symbol (❦) is commonly used in:
Elegant heart accents in headers, footers, dividers, and decorative blocks.
Valentine’s Day content, love messages, romance, and relationship sites.
Digital greeting cards, invitations, and thank-you messages.
Decorate posts, captions, and blog content with a distinctive heart.
Custom bullets or list markers for favorites, tips, or feature lists.
Gift guides, lifestyle articles, and product pages with heart motifs.
💡 Best Practices
Do
- Add
aria-label="floral heart"when the symbol carries meaning - Use the CSS escape in
::before/::afterfor bullets and dividers - Use a font that supports Dingbats (Segoe UI Symbol, etc.)
- Use
❦or❦consistently within a project - Serve pages with UTF-8 (
<meta charset="utf-8">)
Don’t
- Confuse ❦ with ❥ (different floral heart) or ❤ (heavy black heart)
- Expect a named entity—none exists for U+2766
- Put CSS escape
\2766in HTML text nodes - Use purely decorative hearts without accessible text when they convey structure
- Mix entity styles randomly in one file
Key Takeaways
Two HTML numeric references plus CSS render ❦
❦ ❦For CSS stylesheets, use the escape in the content property
\2766Unicode U+2766 — FLORAL HEART (rotated floral heart bullet)
Dingbats block (U+2700–U+27BF)
Three methods, no named HTML entity
❓ Frequently Asked Questions
❦ (hex), ❦ (decimal), or \2766 in CSS content. There is no named entity.U+2766 (FLORAL HEART). Dingbats block (U+2700–U+27BF). Hex 2766, decimal 10086. Decorative heart-shaped dingbat; rotated floral heart bullet.❦ or ❦) go in markup. The CSS escape \2766 is used in stylesheets, typically in the content property of pseudo-elements. Same visual result, different layers of the stack.Explore More HTML Entities!
Discover 1500+ HTML character references — dingbats, hearts, and decorative symbols.
About the author
8 people found this page helpful