HTML Entity for White Heart Suit (♡)

Beginner
5 min read
Updated: Sep 2026
1 example
Unicode U+2661
HTML Entity for white heart suit (♡) tutorial illustration
Definition

What Is White Heart Suit?

White heart suit (♡) is Unicode U+2661 (WHITE HEART SUIT) in the Miscellaneous Symbols block. It is the outline hearts suit used in card games and decorative suit UI. HTML5 has no named entity for this character.

Remember
Character     ♡
Unicode       U+2661
Hex entity    ♡
Decimal       ♡
CSS escape    \2661
Named entity  (none)
Not the same  ♥ U+2665 (black heart suit)

All of these produce the same glyph: ♡. Prefer typing ♡ in UTF-8 when you can; use numeric or CSS forms for generated content. Do not use ♥ — that maps to black heart suit (U+2665).

Reference

Quick Reference

One table for every form you will actually use.

FormCodeWhere it goes
Direct character♡HTML text (UTF-8) — preferred
Hex entity♡HTML markup
Decimal entity♡HTML markup
CSS escape\2661Stylesheet content
Named entity—Not defined in HTML5

When to Use Which

SituationUse
Outline / white hearts♡ or type ♡
Filled / black hearts♥ (U+2665)
Other white suits♤ · ♢ · ♧
Icon via CSScontent: "\2661" on ::before
Looking for ♥That is black heart (U+2665) — not this glyph
See it

Live Preview

White heart suit in common study contexts.

Inline suit Ace of ♡
Large glyph ♡
Four white suits ♡ ♢ ♧ ♤
Compared White ♡ · Black ♥
Accessible label hearts Hearts
With entities Hex: ♡ | Decimal: ♡
Code

Complete HTML Example

One page that shows ♡ with hex, decimal, CSS escape, and a typed character. Use View Output or open the live editor.

Hex + Decimal + CSS + Typed

Four ways to produce ♡ in a single document.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>White Heart Suit (♡) in HTML</title>
  <style>
    #point::after {
      content: "\2661";
    }
  </style>
</head>
<body>
  <p>White heart suit using Hex Code: &#x2661;</p>
  <p>White heart suit using HTML Code: &#9825;</p>
  <p id="point">White heart suit using CSS Entity: </p>
  <p>Typed directly: ♡</p>
</body>
</html>
Try It Yourself

How It Works

1. Hex: U+2661 → &#x2661; in HTML. The browser turns it into ♡.

2. Decimal: same code point as 9825 → &#9825;. Same result as hex.

3. CSS: use \2661 in content (not an HTML entity). #point::after appends that ♡ after the paragraph text.

4. Typed ♡: fine in UTF-8 source. There is no named entity — &hearts; is a different character.

Pitfalls & Tips

Common mistakes when working with white heart suit (♡).

♥

Not black heart

♡ is outline. For the filled form use ♥ (U+2665) / &hearts;.

Named?

No named entity

&hearts; and &heartsuit; always mean U+2665. For ♡ use numeric forms only.

♠

Do not swap suits

♡ hearts ≠ ♤ spades ≠ ♢ diamonds ≠ ♧ clubs. Use the matching white-suit code point.

a11y

Say “Hearts”

Screen readers may not announce the suit clearly. Pair the glyph with visible or visually hidden text.

Fonts

Match suit fonts

Use the same font stack for ♧ ♢ ♡ ♤ so white suit glyphs look consistent.

Semicolon

End references

Always finish with ; — write &#9825;, not &#9825.

Compatibility

Browser Support

White heart suit (U+2661) and its entity forms (&#x2661;, &#9825;, CSS \\2661) are supported in all mainstream browsers. Glyph quality depends on font support for Miscellaneous Symbols.

✓ Universal support

White Heart Suit (♡)

Type ♡, or encode with hex, decimal, or CSS escape — same glyph everywhere encoding is supported.

100% Browser coverage
Google Chrome Supported
Yes
Microsoft Edge Supported
Yes
Mozilla Firefox Supported
Yes
Apple Safari Supported
Yes
Opera Supported
Yes
Internet Explorer All versions
Yes
U+2661 / entities Full support

Bottom line: Prefer a typed ♡ or &#x2661; / &#9825; for markup. Use \\2661 only inside CSS content. Do not use &hearts; for this glyph.

Remember

Key Takeaways

  • Unicode: white heart suit is U+2661 (decimal 9825).
  • HTML: prefer typing ♡, or use &#x2661; / &#9825;.
  • CSS: use \2661 inside content for generated icons.
  • Watch out: no named entity; ♡ ≠ ♥; &hearts; is black heart.

One line: U+2661 → type ♡ / &#x2661; / &#9825; / CSS \2661.

Frequently Asked Questions

Use &#x2661; (hex), &#9825; (decimal), or the CSS escape \2661 in the content property. All render ♡. You can also paste ♡ directly if your file is UTF-8. There is no named HTML entity.
U+2661 (hex 2661, decimal 9825). Unicode names it WHITE HEART SUIT. It belongs to the Miscellaneous Symbols block in the playing-card suit range U+2660–U+2667.
No. HTML5 does not define a named entity for white heart suit. Use &#x2661; or &#9825;. The named forms &hearts; and &heartsuit; map to black heart suit (U+2665), not this character.
♡ (U+2661) is the outline white heart suit. ♥ (U+2665) is the filled black heart suit with named entities &hearts; / &heartsuit;. They are different code points.
HTML entities (&#9825; or &#x2661;) go in markup. The CSS escape \2661 is used in stylesheets (usually in the content property of ::before/::after). Both render ♡.
Use ♡ when you want an outline hearts glyph for card UI, decorative suits, or light-on-dark designs. Prefer ♥ (&hearts;) for the common filled hearts suit in games and Bridge notation.

Did you know?

White heart suit is Unicode U+2661 (decimal 9825) in the Miscellaneous Symbols block — official name WHITE HEART SUIT. HTML5 has no named entity for it. It is not black heart suit (U+2665 ♥ / &hearts;).

Next: White Left Pointing Index

Learn the HTML entity for white left pointing index (☜).

Continue tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

HTML Entity | White Frowning Face HTML Entity | White Left Pointing Index