Card suits in HTML: spade, club and diamond
The three suits alongside the heart are the spade at U+2660, the club at U+2663 and the diamond at U+2666, with the named references ♠, ♣ and ♦.
At a glance
- Character
- ♠ ♣ ♦
- Named entity
- ♠ ♣ ♦
- Decimal reference
- ♠ ♣ ♦
- Hex reference
- ♠ ♣ ♦
- Unicode code point
- U+2660, U+2663, U+2666
- Unicode name
- BLACK SPADE SUIT, BLACK CLUB SUIT, BLACK DIAMOND SUIT
- In the entity reference
- Symbols
In detail
All four suits carry the word black in their Unicode names, which describes the glyph being filled rather than its colour. Unicode also defines the outlined counterparts at U+2664, U+2667 and U+2662, and the two sets are sometimes swapped by a font: a family that draws the filled diamond hollow is not broken, it is making a design choice you cannot control from the markup.
Since the characters are monochrome text glyphs, the red of hearts and diamonds is your job. Set colour in CSS on a class rather than trying to find a red character, and keep the suit name in the accessible layer, because a card described only by a symbol and a colour is unreadable to anyone who cannot see the colour.
The named entity for the diamond is ♦ rather than the ⋄ that people reach for first. The shorter name is the one in the specification for this character; there is a separate diamond operator used in mathematics that is not the card suit. Getting the two mixed up produces a glyph that is the wrong size and sits at the wrong height.
For a playing card interface the characters are a reasonable choice at small sizes and a poor one at large sizes, because the suits were designed as text glyphs and their proportions were never intended to fill a card face. A card that is more than a couple of lines tall usually wants SVG.
Examples
<span class="card red">
<span aria-hidden="true">Q♦</span>
<span class="sr-only">Queen of diamonds</span>
</span>
.card.red { color: #c81e1e; }<p>filled: ♠ ♣ ♥ ♦</p>
<p>outlined: ♤ ♧ ♡ ♢</p>Things that catch people out
- The outlined suits at U+2661, U+2662, U+2664 and U+2667 have no named entities and patchy font coverage, so a mixed row can come back with some glyphs substituted from a different family.
- Naming a card by symbol and colour alone gives a listener nothing. Every suit needs a text name somewhere in the accessible tree.
- ⋄ is not the card suit. It refers to a mathematical operator and renders noticeably smaller.
Try it: HTML Entity Reference
Search 152 entities across 9 categories, switch the copy format between the character, the name, the decimal form and the hex form, and copy in one click.
HTML Entity Reference
LOCAL · Browser-OnlySearchable reference of 150+ HTML entities with one-click copy in any format
152 entities across 9 categories
Commonly Used
→Arrows(13)
±Math(35)
$Currency(8)
…Punctuation(21)
©Symbols(24)
πGreek(30)
½Fractions(6)
●Geometric(7)
æLatin Special(8)
Click any entity card to copy it in your chosen format. All data is embedded in the page and works offline.
Related HTML entities
All html entities →Heart symbol in HTML: ♥ and U+2764
The black heart suit at U+2665 and the heavy black heart at U+2764, how variation selectors switch between text and emoji rendering, and which to use where.
Box drawing characters in HTML
The box drawing block at U+2500 to U+257F, the light, heavy and double stroke sets, and the CSS and font rules that stop a text diagram falling apart.
Star symbols in HTML: filled and outlined
The black and white star characters, their numeric references, how to build an accessible star rating, and why half stars need clipping rather than a glyph.
Euro sign (€) in HTML
The euro sign at U+20AC, why it fell outside Latin-1, which side of the amount it belongs on in each language, and how to format currency properly.
Pound sign (£) in HTML
The pound sign at U+00A3, its entity forms, why the name is ambiguous between sterling and the hash key, and the encoding bug that doubles the character.
Yen sign (¥) in HTML
The yen sign at U+00A5, its entity forms, the one and two bar variants, why it is shared with the yuan, and the backslash problem on older Japanese systems.
Tools for this
- HTML Entity Reference Free online HTML entity reference - search and copy HTML entities with live preview
- HTML Entity Encoder Free online HTML entity encoder - encode or decode HTML entities to prevent XSS and display issues