HTML Entity for Envelope (✉)
What You'll Learn
How to display the Envelope (✉) in HTML using hexadecimal, decimal, and CSS escape methods. This character is U+2709 (ENVELOPE) in the Dingbats block (U+2700–U+27BF)—widely used for email icons, contact links, and communication UI without loading an image.
Render it with ✉, ✉, or CSS escape \2709. There is no named HTML entity for this symbol. For accessible email links, pair the glyph with clear link text (e.g. “Email us”), not the symbol alone.
⚡ Quick Reference — Envelope
U+2709Dingbats
✉Hexadecimal reference
✉Decimal reference
—Use numeric codes only
Name Value
──────────── ──────────
Unicode U+2709
Hex code ✉
HTML code ✉
Named entity (none)
CSS code \2709
Block Dingbats (U+2700–U+27BF)Complete HTML Example
This example demonstrates the Envelope (✉) using hexadecimal code, decimal HTML code, and a CSS content escape. There is no named HTML entity for this symbol:
<!DOCTYPE html>
<html>
<head>
<style>
#point:after{
content: "\2709";
}
</style>
</head>
<body>
<p>Envelope using Hexadecimal: ✉</p>
<p>Envelope using HTML Code: ✉</p>
<p id="point">Envelope using CSS Entity: </p>
</body>
</html>🌐 Browser Support
The Envelope entity is universally supported in modern browsers:
👀 Live Preview
See the envelope (✉) inline and as an email-link prefix:
🧠 How It Works
Hexadecimal Code
✉ uses the Unicode hexadecimal value 2709 to display the Envelope symbol. The x prefix indicates hexadecimal format.
Decimal HTML Code
✉ uses the decimal Unicode value 9993 to display the same character.
CSS Entity
\2709 is used in CSS stylesheets, particularly in the content property of pseudo-elements like ::before and ::after.
Same visual result
All three methods produce: ✉. Unicode U+2709 in the Dingbats block (U+2700–U+27BF). No named HTML entity—use numeric codes in markup. Serve HTML as UTF-8.
Use Cases
The Envelope (✉) commonly appears in:
Prefix or accompany mailto: links in footers and contact pages.
Contact sections and business cards on the web.
Communication features without loading icon images.
Subscribe prompts and mailing-list signup areas.
Lightweight email affordances in web apps and dashboards.
Dingbats and UI symbol reference pages.
💡 Best Practices
Do
- Use
✉or✉for lightweight email icons - Pair ✉ with descriptive link text for accessibility
- Use
::before+contentfor consistent icon spacing in CSS - Serve pages with UTF-8 (
<meta charset="utf-8">) - Test on mobile where Dingbat glyphs can vary by font
Don’t
- Expect a named entity—none exists for U+2709
- Use ✉ as the only label on a mailto link (add visible text)
- Put CSS escape
\2709in HTML text nodes - Assume every font renders the same envelope design
- Rely on ✉ alone when a branded SVG icon is required
Key Takeaways
Two HTML numeric references render ✉
✉ ✉For CSS stylesheets, use the escape in the content property
\2709Unicode U+2709 — Dingbats ENVELOPE
Ideal for email and contact UI without image files
Three methods, one glyph — no named HTML entity
❓ Frequently Asked Questions
✉ (hex), ✉ (decimal), or \2709 in CSS content. There is no named entity. All produce ✉.U+2709 (ENVELOPE). Dingbats block (U+2700–U+27BF). Hex 2709, decimal 9993.✉ or ✉) go in markup. The CSS escape \2709 is used in stylesheets, typically in the content property of pseudo-elements. Same visual result, different layers of the stack.✉ or ✉ in HTML, or \2709 in CSS.Explore More HTML Entities!
Discover 1500+ HTML character references — Dingbats, punctuation, math symbols, and more.
About the author
8 people found this page helpful