HTML Entity for Black Spade Suit (♠)

Beginner
5 min read
Updated: Sep 2026
1 example
Unicode U+2660
HTML Entity for black spade suit (♠) tutorial illustration
Definition

What Is Black Spade Suit?

Black spade suit (♠) is Unicode U+2660 in the Miscellaneous Symbols block. It is the filled spades suit used in card games and suit notation. HTML provides the named entities ♠ and ♠.

Remember
Character     ♠
Unicode       U+2660
Hex entity    ♠
Decimal       ♠
Named entity  ♠ (also ♠)
CSS escape    \2660
Not the same  ♤ U+2664 (white spade suit)

All of these produce the same glyph: ♠. Prefer ♠ in hand-written HTML; type ♠ in UTF-8 when you can; use numeric or CSS forms for generated content.

Reference

Quick Reference

One table for every form you will actually use.

FormCodeWhere it goes
Direct character♠HTML text (UTF-8)
Named entity♠HTML markup (preferred name)
Named alias♠HTML markup (same glyph)
Hex entity♠HTML markup
Decimal entity♠HTML markup
CSS escape\2660Stylesheet content

When to Use Which

SituationUse
Filled spades suit♠ or type ♠
Outline / white spades♤ (U+2664)
Other black suits♣ · ♦ · ♥
Icon via CSScontent: "\2660" on ::before
See it

Live Preview

Black spade suit in common study contexts.

Inline suit Ace of ♠
Large glyph ♠
Four black suits ♣ ♦ ♥ ♠
Accessible label spades Spades
With entities Named: ♠ | Hex: ♠ | Decimal: ♠
Code

Complete HTML Example

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

Hex + Decimal + Named + CSS + Typed

Five ways to produce ♠ in a single document.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Black Spade Suit (♠) in HTML</title>
  <style>
    #point::after {
      content: "\2660";
    }
  </style>
</head>
<body>
  <p>Black spade suit using Hex Code: &#x2660;</p>
  <p>Black spade suit using HTML Code: &#9824;</p>
  <p>Black spade suit using Named Entity: &spades;</p>
  <p id="point">Black spade suit using CSS Entity: </p>
  <p>Typed directly: ♠</p>
</body>
</html>
Try It Yourself

How It Works

1. Hex: U+2660 → &#x2660; in HTML. The browser turns it into ♠.

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

3. Named: &spades; (or &spadesuit;) is the standard HTML name for U+2660 — clear in source.

4. CSS: use \2660 in content (not an HTML entity). #point::after appends that ♠ after the paragraph text.

5. Typed ♠: fine in UTF-8 source. All five lines show the same glyph.

Pitfalls & Tips

Common mistakes when working with black spade suit (♠).

Named

Prefer &spades;

&spades; and &spadesuit; both work. Use &spades; in most tutorials and hand-written HTML.

♤

Not the white spade

For the outline form use ♤ (U+2664).

a11y

Say the suit name

Screen readers may not announce “spades.” Pair the glyph with visible or visually hidden text such as Spades.

Fonts

Check suit coverage

Some UI fonts omit U+2660. Prefer fonts with solid Miscellaneous Symbols / card-suit support.

CSS vs HTML

Do not mix escapes

\2660 belongs in CSS. &#x2660; / &#9824; / &spades; belong in HTML.

Semicolon

End references

Always finish with ; — write &spades;, not &spades.

Compatibility

Browser Support

Black spade suit (U+2660) and its entity forms (&spades;, &#x2660;, &#9824;, CSS \\2660) are supported in all mainstream browsers. Glyph quality depends on font support for Miscellaneous Symbols.

✓ Universal support

Black Spade Suit (♠)

Type ♠, or encode with named, 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+2660 / entities Full support

Bottom line: Prefer &spades; or a typed ♠ for markers. Use decimal when generating markup, and \\2660 only inside CSS content.

Remember

Key Takeaways

  • Unicode: black spade suit is U+2660 (decimal 9824).
  • HTML: prefer &spades; (also &spadesuit;, &#x2660;, &#9824;).
  • CSS: use \2660 inside content for generated icons.
  • Watch out: ♠ ≠ ♤ (black ≠ white spade suit).

One line: U+2660 → &spades; / &#x2660; / &#9824; / CSS \2660.

Frequently Asked Questions

Use &#x2660; (hex), &#9824; (decimal), &spades; or &spadesuit; (named), or the CSS escape \2660 in the content property. All render ♠. You can also paste ♠ directly if your file is UTF-8.
U+2660 (hex 2660, decimal 9824). Unicode names it BLACK SPADE SUIT. It belongs to the Miscellaneous Symbols block in the playing-card suit range.
Yes. &spades; and &spadesuit; both map to U+2660. Prefer &spades; in hand-written HTML; numeric forms are useful in generated markup.
♠ (U+2660) is the filled black spade suit. ♤ (U+2664) is white spade suit (outline). They are different code points.
HTML entities (&#9824;, &#x2660;, or &spades;) go in markup. The CSS escape \2660 is used in stylesheets (usually in the content property of ::before/::after). Both render ♠.
Use ♠ for card games, Bridge notation, suit labels, and poker UIs. Pair the glyph with the word Spades when accessibility matters.

Did you know?

Black spade suit is Unicode U+2660 (decimal 9824) in the Miscellaneous Symbols block — official name BLACK SPADE SUIT. HTML’s named references are &spades; and &spadesuit;. It is not white spade suit (U+2664 ♤).

Next: Black Sun Rays

Learn the HTML entity for black sun with rays (☀).

Next 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 | Black Smiling Face HTML Entity | Black Sun Rays