Check mark and cross mark characters in HTML
The tick and the cross come in light and heavy weights at U+2713 and U+2714, U+2717 and U+2718. Only the heavy pair is in the entity reference tool, and none of the four has a named HTML entity.
At a glance
- Character
- ✓ ✔ ✗ ✘
- Named entity
- None. Use the numeric references.
- Decimal reference
- ✓ ✔ ✗ ✘
- Hex reference
- ✓ ✔ ✗ ✘
- Unicode code point
- U+2713, U+2714, U+2717, U+2718
- Unicode name
- CHECK MARK, HEAVY CHECK MARK, BALLOT X, HEAVY BALLOT X
- In the entity reference
- Symbols, heavy forms only
In detail
These four characters come in two weights each. The light forms are drawn with a thin stroke suited to running text, the heavy forms with a thick one that holds up in a table cell or a comparison grid. The entity reference tool lists the two heavy forms; the light forms exist in the same Unicode block and are written the same way, with a numeric reference.
None of them has a named HTML entity. There is no ✓ or ✗ in the specification, so a numeric reference is the only correct form and any tutorial that shows a name is wrong. That absence is worth knowing because it is a frequent source of a stray literal string appearing in production output.
Font coverage is the real difficulty. These characters live in the Dingbats block and are missing from a surprising number of installed fonts, so a browser will substitute from a fallback family. The result is a tick in a different weight and colour from its neighbours, which in a feature comparison table is exactly where inconsistency is most visible. An inline SVG icon avoids the problem entirely.
Whatever you draw, the meaning has to be available without sight. A green tick and a red cross in a table convey supported and not supported to a reader who can distinguish them, and nothing at all to a screen reader user or to someone with a red green colour deficiency. Give each cell visually hidden text, or an aria-label, that says which it is.
Examples
<td>
<span aria-hidden="true" class="yes">✔</span>
<span class="sr-only">Supported</span>
</td>
<td>
<span aria-hidden="true" class="no">✘</span>
<span class="sr-only">Not supported</span>
</td><p>light tick ✓ heavy tick ✔</p>
<p>light cross ✗ heavy cross ✘</p>Things that catch people out
- The red cross emoji at U+274C is a different character with emoji presentation. It will render in colour regardless of your CSS, which breaks a monochrome table.
- There is no named entity for either mark. Writing ✓ puts those six literal characters on the page.
- The multiplication x at U+2715 looks like a cross and carries no negative meaning, so a close button drawn with it reads differently from one drawn with a ballot x.
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 →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.
Card suits in HTML: spade, club and diamond
The spade, club and diamond suit characters with their named entities and code points, the outlined variants, and how to colour the red suits correctly.
Multiplication sign (×) in HTML
The multiplication sign at U+00D7, its entity forms, why image dimensions should not use a letter x, and the other cross characters it is confused with.
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.
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.
Tools for this
- HTML Entity Reference Free online HTML entity reference - search and copy HTML entities with live preview
- Unicode Character Finder Free online unicode character finder - search and copy special Unicode characters and symbols