HTML Entity for White Diamond Suit (♢)

Beginner
⏱️ 5 min read
📚 Updated: Jun 2026
🎯 1 Code Example
Unicode U+2662
HTML entity for White Diamond Suit (U+2662) — hex, decimal, and CSS tutorial

What You'll Learn

How to display the White Diamond Suit (♢) in HTML using hexadecimal, decimal, and CSS escape methods. This character is U+2662 (WHITE DIAMOND SUIT) in the Miscellaneous Symbols block (U+2600–U+26FF), part of the playing-card suit range (U+2660–U+2667). It is the outline counterpart to the filled black diamonds suit ♦ (U+2666).

Render it with ♢, ♢, or CSS escape \2662. There is no named HTML entity for ♢—use ♦ only when you need the black diamonds glyph ♦. All three numeric methods render the white/outline diamonds symbol in modern browsers.

⚡ Quick Reference — White Diamond Suit

Unicode U+2662

Miscellaneous Symbols (playing cards)

Hex Code ♢

Hexadecimal reference

HTML Code ♢

Decimal reference

Named Entity —

Use numeric codes only

Reference Table
Name           Value
────────────   ──────────
Unicode        U+2662
Hex code       ♢
HTML code      ♢
Named entity   (none)
CSS code       \2662
Meaning        White (outline) diamonds suit
Related        U+2666 = ♦ (black diamond suit, ♦)
               U+2667 = ♧ (white club suit)
Block          Miscellaneous Symbols (U+2660–U+2667 playing cards)
1

Complete HTML Example

A simple example showing White Diamond Suit (♢) using hexadecimal code, decimal HTML code, and a CSS content escape:

html
<!DOCTYPE html>
<html>
<head>
 <style>
  #suit:after{
   content: "\2662";
  }
 </style>
</head>
<body>
<p>White Diamond Suit (hex): &#x2662;</p>
<p>White Diamond Suit (decimal): &#9826;</p>
<p id="suit">White Diamond Suit (CSS): </p>
</body>
</html>
Try It Yourself

🌐 Browser Support

U+2662 is supported in modern browsers when the font includes Miscellaneous Symbols glyphs:

Chrome1+
Firefox1+
Safari1+
Edge12+
Opera4+
Android4.4+
iOS Safari1+

👀 Live Preview

See White Diamond Suit (♢) alongside related playing-card symbols:

Large glyph♢
White vs black diamonds♢ ♦
Black suits (filled)♠ ♥ ♦ ♣
Not the same as♦ (U+2666, black diamond, &diams;)
Numeric refs&#x2662; &#9826; \2662

🧠 How It Works

1

Hexadecimal Code

&#x2662; uses the Unicode hexadecimal value 2662 to display the White Diamond Suit symbol. The x prefix indicates hexadecimal format.

HTML markup
2

Decimal HTML Code

&#9826; uses the decimal Unicode value 9826 to display the same character. A common method for symbol characters in HTML.

HTML markup
3

CSS Entity

\2662 is used in CSS stylesheets, particularly in the content property of pseudo-elements like ::before and ::after.

CSS stylesheet
=

Same visual result

All three methods produce ♢. Unicode U+2662 is the white diamonds suit in the playing-card range U+2660–U+2667. Not the same as ♦ (black diamond, &diams;).

✅

Use Cases

White Diamond Suit (♢) is commonly used in:

🃏 Card game sites

Outline suit indicators and lightweight card UI without image sprites.

🎮 Gaming apps

Poker, Bridge, Solitaire, and other playing-card interfaces.

🎨 Decorative design

Casino themes, game branding, and playing-card aesthetics.

🎓 Teaching

Rules, strategy guides, and card-game tutorials.

💬 Forums

Hand analysis and move notation in card-game communities.

🖥 UI elements

Buttons, badges, and navigation with a diamonds motif.

♿ Accessibility

Pair ♢ with text or ARIA (e.g. “Diamonds”); the glyph alone is not enough.

💡 Best Practices

Do

  • Use ♢ when you need the outline diamonds glyph; use ♦ / &diams; for filled black diamonds
  • Use the same font stack for all suit symbols in a card UI
  • Add aria-label or visible text for standalone suit glyphs
  • Pick one numeric style (hex or decimal) per project for consistency
  • Test rendering across browsers and devices

Don’t

  • Confuse ♢ (white diamond) with ♦ (black diamond) or &diams;
  • Assume &diams; renders ♢—it renders ♦
  • Mix up decimal 9826 (♢) with 9830 (♦)
  • Use CSS escape \2662 inside HTML text nodes
  • Assume every visitor knows suit symbols without a legend

Key Takeaways

1

Type ♢ directly, or use hex/decimal references

&#x2662; &#9826;
2

For CSS stylesheets, use the escape in the content property

\2662
3

Unicode U+2662 — WHITE DIAMOND SUIT (playing-card range)

4

No named entity; &diams; is for U+2666 (black diamond) only

5

Previous: White Club Suit (♧)   Next: White Down Pointing Index (☟)

❓ Frequently Asked Questions

Use &#x2662; (hex), &#9826; (decimal), or \2662 in CSS content. There is no named HTML entity. In UTF-8 you can also type ♢ directly.
U+2662 (WHITE DIAMOND SUIT). Playing-card suits U+2660–U+2667 in Miscellaneous Symbols. Hex 2662, decimal 9826.
On card game websites, playing-card interfaces, casino and gaming UI, educational content, and decorative designs that need an outline diamonds suit glyph.
HTML entities (&#9826; or &#x2662;) go directly in markup. The CSS escape \2662 is used in stylesheets, typically in the content property of ::before or ::after. Same visual result, different layers of the stack.
HTML named entities cover the four filled black suits (&clubs;, &hearts;, &diams;, &spades;) but not the white/outline variants. Use &#9826; or &#x2662; for ♢.

Explore More HTML Entities!

Discover 1500+ HTML character references — symbols, punctuation, and more.

All HTML Entities →

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

White Club Suit (♧) White Down Pointing Index