HTML Entity for Black Club Suit (♣)
What You'll Learn
How to display the Black Club Suit (♣) in HTML using various entity methods. This character is U+2663 in the Miscellaneous Symbols block (U+2600–U+26FF), part of the playing-card suit range (U+2660–U+2667). The clubs suit derives from the Acorns suit in German decks; in Bridge it ranks lowest, while in Skat and Doppelkopf it ranks highest.
Unlike many symbols in this series, ♣ has a named HTML entity: ♣. You can also use ♣, ♣, or \2663 in CSS content. All four methods render the same glyph in modern browsers.
⚡ Quick Reference — Black Club Suit Entity
U+2663Miscellaneous Symbols (playing cards)
♣Hexadecimal reference
♣Decimal reference
♣Most readable option
Name Value
──────────── ──────────
Unicode U+2663
Hex code ♣
HTML code ♣
Named entity ♣
CSS code \2663Complete HTML Example
This example shows ♣ using hexadecimal and decimal references, the named entity ♣, and a CSS content escape on a pseudo-element:
<!DOCTYPE html>
<html>
<head>
<style>
#point:after{
content: "\2663";
}
</style>
</head>
<body>
<p>Black Club Suit using Hexa Decimal: ♣</p>
<p>Black Club Suit using HTML Code: ♣</p>
<p>Black Club Suit using HTML Entity: ♣</p>
<p id="point">Black Club Suit using CSS Entity: </p>
</body>
</html>🌐 Browser Support
U+2663 and ♣ are universally supported in modern browsers:
👀 Live Preview
See the club suit alongside the other playing-card suits (font-dependent):
🧠 How It Works
Hexadecimal Code
♣ uses the Unicode hexadecimal value 2663 to display the Black Club Suit symbol. The x prefix indicates hexadecimal format.
Decimal HTML Code
♣ uses the decimal Unicode value 9827 to display the same character. This is one of the most commonly used methods.
CSS Entity
\2663 is used in CSS stylesheets, particularly in the content property of pseudo-elements like ::before and ::after.
Named Entity
♣ is the semantic named entity — the easiest to read in source HTML and the most self-descriptive option.
Same visual result
All four methods produce ♣. Unicode U+2663 is the clubs suit in the playing-card range U+2660–U+2667 (Miscellaneous Symbols).
Use Cases
The Black Club Suit (♣) is commonly used for:
Hands, suit indicators, and table UI without image sprites.
Poker, Bridge, Skat, Solitaire, and other card interfaces.
Bidding, contracts, and suit-ranking notation in docs.
Rules, strategy guides, and card-game tutorials.
Casino themes, game branding, and playing-card aesthetics.
Hand analysis and move notation in card-game communities.
Pair ♣ with text or ARIA (e.g. “Clubs”); the glyph alone is not enough.
💡 Best Practices
Do
- Prefer
♣for readable, semantic source markup - Use the same font stack for all four suits (♠ ♥ ♦ ♣)
- Remember Bridge suit order: ♣ < ♦ < ♥ < ♠
- Add
aria-labelor visible text for standalone suit glyphs - Test rendering across browsers and devices
Don’t
- Confuse ♣ with ♠ (spades) or other suit glyphs in data or CSS
- Mix entity styles randomly in one codebase
- Use CSS escape
\2663inside HTML text nodes - Assume every visitor knows suit symbols without a legend
- Rely on color alone when red/black distinction matters
Key Takeaways
Four equivalent references render ♣
♣ ♣ ♣CSS content escape
\2663U+2663 is clubs; playing-card suits are U+2660–U+2667
♣ is the most readable named entity for this suit
Pair suit glyphs with text or ARIA for inclusive card-game UX
❓ Frequently Asked Questions
♣ (hex), ♣ (decimal), ♣ (named), or \2663 in CSS content. All produce ♣.U+2663 (hex 2663, decimal 9827). Miscellaneous Symbols, playing-card suits U+2660–U+2667. Unicode name BLACK CLUB SUIT.♣ or ♣) go directly in markup. The CSS escape \2663 is used in stylesheets, typically in the content property of ::before or ::after. Same visual result, different layers of the stack.♣, ♣, and ♣ are equivalent in modern browsers and all render ♣.Explore More HTML Entities!
Discover 1500+ HTML character references — currency symbols, arrows, math operators, emojis, and more.
About the author
8 people found this page helpful