Star symbols in HTML: filled and outlined
The filled star is U+2605 and the outlined star is U+2606. Neither has a named HTML entity, so both are written as numeric references.
At a glance
- Character
- ★ ☆
- Named entity
- None. Use the numeric references.
- Decimal reference
- ★ ☆
- Hex reference
- ★ ☆
- Unicode code point
- U+2605, U+2606
- Unicode name
- BLACK STAR, WHITE STAR
- In the entity reference
- Symbols
In detail
The pair is designed to work together: the black star is filled, the white star is the same outline unfilled, and stacking a row of one over a row of the other is how most character based rating displays are built. Both are in the Miscellaneous Symbols block and neither has a named entity, so numeric references are the only way to write them.
A rating built from these characters is a picture of a number, and a picture of a number needs the number available separately. The reliable pattern is a container carrying the role and value in ARIA attributes, the stars marked aria-hidden, and the numeric rating in visually hidden text. Without that a listener hears five black star characters and has to count them, if the reader announces them at all.
Half stars are where the character approach runs out. There is no half star in this block, so a fractional rating has to be drawn by overlaying a clipped filled row on top of an unfilled row and setting the clip width as a percentage. That works, and it is also the point at which an SVG becomes simpler than the characters.
For an input rather than a display, do not attach click handlers to spans. A group of radio inputs styled to look like stars gives you keyboard support, form submission and an accessible name for each option without writing any of it yourself, and the visual result is identical.
Examples
<span role="img" aria-label="Rated 4 out of 5">
<span aria-hidden="true">★★★★☆</span>
</span><div class="stars" style="--fill: 72%">
<span class="empty" aria-hidden="true">★★★★★</span>
<span class="full" aria-hidden="true">★★★★★</span>
</div>
.stars { position: relative; display: inline-block; }
.full {
position: absolute; inset: 0; overflow: hidden;
width: var(--fill); color: #f5a623;
}Things that catch people out
- The star emoji is a separate character and renders in colour on most platforms, so mixing it with these monochrome glyphs gives a row that does not match.
- Star width varies between fonts, so a clipped overlay must use the same font and font size on both layers or the fill will land in the wrong place.
- Repeating the character five times in the accessible name makes a listener hear the word star five times. Hide the glyphs and expose the number.
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.
Check mark and cross mark characters in HTML
The tick and cross characters at U+2713, U+2714, U+2717 and U+2718, their numeric references, font coverage problems, and why colour alone is not enough.
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.
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.
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.
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