Using Unicode Half-Stars Symbols in Ratings
Troubleshooting & How-Tos<br>📡<br>🏷️<br>🔍
Web Development 🕸️
Using Unicode Half-Stars Symbols in Ratings
When I started collecting reviews in one section of my website, I decided to stick with the goals I had here on the Tech Tips section: Keep the pages small, avoid loading scripts or extra images where styles or font symbols would do. So I kept using emoji for category icons, and used the outlined and filled star symbols (☆★) for ratings. They’ve been in Unicode forever, so they’re supported almost everywhere.
Halfway There
Every once in a while, I really want to rate something between a whole number of stars. I let it round down for a while until I went looking to see if there were half-filled star symbols. And there are! Half-stars and half-filled stars (in both directions) were proposed in 2016 and added to Unicode 11 in 2018. You can see them here:
⯨⯩⯪⯫
…or maybe you can’t, because even after eight years, font support for them is still spotty.
As of March 2026:
Windows 11 shows the symbols.
Linux distros might, depending on what fonts are installed. Modern distros at least have fonts that support these symbols, in packages like noto-fonts (Arch), fonts-noto-core (Debian) or google-noto-sans-symbols-2-fonts (Fedora), but whether they’re installed by default seems to vary.
Windows 10, macOS/iOS 26 and Android don’t, even though they include newer emoji than Unicode 11.
So if you’re trying to use these on a web page, it’s really hit and miss whether your readers will be able to see the half-star symbols or not.
It would be nice if you could, in HTML, provide a fallback for font glyphs that aren’t available (like how alt was originally supposed to replace an image entirely if the image couldn’t be loaded), but as near as I can that’s never been seriously proposed.
The good news is, you can embed a font on your page (or app) that does support the missing symbols! Noto Sans Symbols 2 contains the full set, and can be used freely. Embedding that font and using it for the ratings solves the problem.
⯨⯩⯪⯫
That said, it is an extra 200 KB or so, which is a bit overkill for adding one very simple bit of line art. (See the Subset and Alternatives sections below.)
Adding Font Support
The simplest thing to do, if you’re not worried about Google potentially tracking visitors to your site (see self-hosting below for an alternative), is just embed the font from Google by putting this in the section of your page:
Then in your stylesheet, write something like this:
.stars {font-family: "Noto Sans Symbols 2"}
And you can write your star ratings like this:
★★★⯪☆</span><br>★★★⯪☆
I actually go a bit further on mine for accessibility and microformats:
★★★⯪☆<br>★★★⯪☆
HTML Codes
If you’re writing on a system that doesn’t support all the star characters natively, you can use numeric HTML entities. It’ll be just as unreadable as the tofu, but you’ll be able to tell them apart from each other.
★ or ★ ★ Black star
☆ or ☆ ☆ White Star
⯨ or ⯨ ⯨ Left half black star
⯩ or ⯩ ⯩ Right half black star
⯪ or ⯪ ⯪ Star with left half black
⯫ or ⯫ ⯫ Star with right half black
Unicode naming schemes are rooted in print, so a filled-in star is a black star, and an outline is a white star, assuming black ink on a white page.
Self-Hosting the Font
The Google Fonts Privacy Policy states that they don’t do any tracking on the font requests and keep them completely separate from any account-related traffic. But if you want to be absolutely certain, or need to comply with regulations like GDPR, you can host your own copy.
The Noto fonts are licenced for free reuse and embedding, and the Google Fonts site explicitly says you can self-host (but would rather you didn’t).
They don’t make it easy, though.
Option 1: Download and Convert from TTF
If you download the font from Google Fonts, you get the complete TrueType font, which in this case is about 6 times as big as the WOFF2 font for web embedding. The .zip at the font’s GitHub page also includes smaller versions, closer to 400KB, in the “hinted” and “unhinted” folders. (In this case they’re the same, but for other fonts you’ll probably want the version with hinting.)
You can use an online TrueType to WOFF2 converter, or you can use an offline tool.
The command-line woff2_compress tool is available in Homebrew for macOS and various Linux distributions in the woff2 (Debian, Alpine, Homebrew, etc) or woff2-tools (Fedora) packages.
woff2_compress NotoSansSymbols2-Regular.ttf
These days, WOFF2 is effectively baseline across modern web browsers, so you don’t need to include any fallback formats anymore.
Option 1A: Create a Subset First
If you’re only going to use this font for the star glyphs, you can create a subset of the font, which can be much smaller. Again, there are plenty of online tools, but I used a Node-based commandline tool called...