HTML Entity for Black Spade Suit (♠)

Beginner
⏱️ 5 min read
📚 Updated: Jun 2026
🎯 1 Code Example
Unicode U+2660
HTML entity for Black Spade Suit (U+2660) tutorial illustration

What You'll Learn

How to display the Black Spade Suit (♠) in HTML using various entity methods. This character is U+2660 in the Miscellaneous Symbols block (U+2600–U+26FF), part of the playing-card suit range (U+2660–U+2667), approved in Unicode 1.1 (1993). It represents the spades suit—derived from the French pique (pike). In Bridge, spades rank highest; the ace of spades is often a trump or high card in many games.

Unlike many symbols in this series, ♠ has a named HTML entity: &spades;. You can also use &#x2660;, &#9824;, or \2660 in CSS content. In Bridge, suit order is clubs < diamonds < hearts < spades (♣ < ♦ < ♥ < ♠). All four methods render the same glyph in modern browsers.

⚡ Quick Reference — Black Spade Suit Entity

Unicode U+2660

Miscellaneous Symbols (playing cards)

Hex Code &#x2660;

Hexadecimal reference

HTML Code &#9824;

Decimal reference

Named Entity &spades;

Most readable option

Reference Table
Name           Value
────────────   ──────────
Unicode        U+2660
Hex code       &#x2660;
HTML code      &#9824;
Named entity   &spades;
CSS code       \2660
1

Complete HTML Example

This example shows ♠ using hexadecimal and decimal references, the named entity &spades;, and a CSS content escape on a pseudo-element:

html
<!DOCTYPE html>
<html>
<head>
 <style>
  #point:after{
   content: "\2660";
  }
 </style>
</head>
<body>
<p>Black Spade Suit using Hexa Decimal: &#x2660;</p>
<p>Black Spade Suit using HTML Code: &#9824;</p>
<p>Black Spade Suit using HTML Entity: &spades;</p>
<p id="point">Black Spade Suit using CSS Entity: </p>
</body>
</html>
Try It Yourself

🌐 Browser Support

U+2660 and &spades; are universally supported in modern browsers:

Chrome 1+
Firefox 1+
Safari 1+
Edge 12+
Opera 4+
Android 4.4+
iOS Safari 1+

👀 Live Preview

See the spade suit alongside the other playing-card suits (font-dependent):

Large glyph ♠
All four suits ♠ ♥ ♦ ♣
Bridge order (low→high) ♣ < ♦ < ♥ < ♠
Named entity &spades;
Monospace refs &#x2660; &#9824; \2660

🧠 How It Works

1

Hexadecimal Code

&#x2660; uses the Unicode hexadecimal value 2660 to display the Black Spade Suit symbol. The x prefix indicates hexadecimal format.

HTML markup
2

Decimal HTML Code

&#9824; uses the decimal Unicode value 9824 to display the same character. This is one of the most commonly used methods.

HTML markup
3

CSS Entity

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

CSS stylesheet
4

Named Entity

&spades; is the semantic named entity — the easiest to read in source HTML and the most self-descriptive option.

HTML markup
=

Same visual result

All four methods produce ♠. Unicode U+2660 is the spades suit in the playing-card range U+2660–U+2667 (Miscellaneous Symbols).

✅

Use Cases

The Black Spade Suit (♠) is commonly used for:

🃏 Card game sites

Playing cards, hand notation, and suit indicators without images.

♠ Poker & Bridge

Poker hand displays, Bridge bidding, and spades suit notation.

🎮 Gaming apps

Solitaire, Spades, Hearts, and other card game interfaces.

📚 Educational content

Card game tutorials, rules, and strategy guides.

🎨 Decorative design

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

💬 Forums & chat

Card game discussion, hand analysis, and move notation.

♿ Accessibility

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

💡 Best Practices

Do

  • Prefer &spades; for readable, semantic source markup
  • Use the same font stack for all four suits (♠ ♥ ♦ ♣)
  • Remember Bridge suit order: ♣ < ♦ < ♥ < ♠
  • Add aria-label or visible text for standalone suit glyphs
  • Test rendering across browsers and devices

Don’t

  • Confuse ♠ (U+2660) with ♥, ♦, ♣, or emoji symbols (different code points)
  • Mix entity styles randomly in one codebase
  • Use CSS escape \2660 inside HTML text nodes
  • Assume every visitor knows suit symbols without a legend
  • Rely on color alone when red/black distinction matters

Key Takeaways

1

Four equivalent references render ♠

&#x2660; &#9824; &spades;
2

CSS content escape

\2660
3

U+2660 is spades; playing-card suits are U+2660–U+2667

4

&spades; is the most readable named entity for this suit

5

Pair suit glyphs with text or ARIA for inclusive card-game UX

❓ Frequently Asked Questions

Use &#x2660; (hex), &#9824; (decimal), &spades; (named), or \2660 in CSS content. All produce ♠.
U+2660 (hex 2660, decimal 9824). Miscellaneous Symbols, playing-card suits U+2660–U+2667. Unicode name BLACK SPADE SUIT.
For card game websites, Poker, Bridge, Solitaire, gaming interfaces, playing card displays, and any design using playing-card suits.
HTML entities (&#9824; or &spades;) go directly in markup. The CSS escape \2660 is used in stylesheets, typically in the content property of ::before or ::after. Same visual result, different layers of the stack.
Yes. &spades;, &#9824;, and &#x2660; 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.

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

Black Smiling Face (U+263B) Black Sun Rays (U+2600)