HTML Entity for Heavy Check Mark (✔)
What You'll Learn
How to display the Heavy Check Mark symbol (✔) in HTML using hexadecimal, decimal, and CSS escape methods. This character is U+2714 (HEAVY CHECK MARK) in the Dingbats block (U+2700–U+27BF). It is a bold tick widely used for success states, completed tasks, checklists, form validation, and confirmation in web and app UI.
Render it with ✔, ✔, or CSS escape \2714. There is no named HTML entity. Do not confuse ✔ with U+2713 (✓, lighter CHECK MARK) or U+2718 (✘, heavy ballot X for errors).
⚡ Quick Reference — Heavy Check Mark
U+2714Dingbats block
✔Hexadecimal reference
✔Decimal reference
—Use numeric codes only
Name Value
──────────── ──────────
Unicode U+2714
Hex code ✔
HTML code ✔
Named entity (none)
CSS code \2714
Meaning Heavy check mark
Related U+2713 = check mark (✓)Complete HTML Example
This example demonstrates the Heavy Check Mark (✔) 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: "\2714";
}
</style>
</head>
<body>
<p>Heavy Check Mark using Hexadecimal: ✔</p>
<p>Heavy Check Mark using HTML Code: ✔</p>
<p id="point">Heavy Check Mark using CSS Entity: </p>
</body>
</html>🌐 Browser Support
The Heavy Check Mark (✔) is widely supported in modern browsers when the font includes Dingbats:
👀 Live Preview
Heavy Check Mark (✔) in context, compared with the lighter check mark (✓):
🧠 How It Works
Hexadecimal Code
✔ uses the Unicode hexadecimal value 2714 to display the check mark. The x prefix indicates hexadecimal format.
Decimal HTML Code
✔ uses the decimal Unicode value 10004 to display the same character.
CSS Entity
\2714 is used in CSS stylesheets, particularly in the content property of pseudo-elements like ::before and ::after for success messages and checklist bullets.
Same visual result
All three methods produce ✔. Unicode U+2714 is in the Dingbats block. Next: Heavy Chevron Snowflake (❆).
Use Cases
The Heavy Check Mark (✔) is commonly used in:
Successful actions, completed steps, or “done” states in forms and workflows.
Completed items in task lists, project trackers, and checklist UIs.
Valid or verified fields, confirmation messages, and submission success.
Included features, supported options, or “yes” in comparison grids.
Step completion in wizards, progress indicators, and status dashboards.
Verified accounts, certified items, or approved content badges.
💡 Best Practices
Do
- Pair ✔ with text or
aria-label(e.g. “Completed”, “Success”) - Use
content: "\2714"on list items via::beforeor::after - Declare UTF-8 with
<meta charset="utf-8"> - Test tick glyph weight across fonts and platforms
- Keep one numeric style (hex or decimal) per project
- Use visible labels on status and validation messages
Don’t
- Rely on ✔ alone for accessibility-critical status
- Confuse U+2714 (✔) with U+2713 (✓, lighter check mark)
- Expect a named HTML entity for U+2714
- Use CSS
\2714in HTML text nodes - Use ✔ for errors when ✘ (ballot X) is clearer
Key Takeaways
Two HTML numeric references plus CSS insert U+2714
✔ ✔For CSS, use \2714 in the content property
Unicode U+2714 — HEAVY CHECK MARK (✔)
Not the same as light check mark U+2713 (✓)
❓ Frequently Asked Questions
✔ (hex), ✔ (decimal), or \2714 in CSS content. There is no named entity. All three methods render the Heavy Check Mark (✔) correctly.U+2714 (HEAVY CHECK MARK). Dingbats block. Hex 2714, decimal 10004. The symbol (✔) is widely used for success, completion, and confirmation.✔ or ✔) go in markup. The CSS escape \2714 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