35 characters · free to copy
Geometric shapes as characters
The Geometric Shapes block at U+25A0 to U+25FF is the workhorse of text-based interfaces: circles, squares, triangles and diamonds, almost all of them supplied as a filled-and-outlined pair at two or three sizes. That pairing is what lets you show two states, two players or two priorities without relying on colour. Copy any character below; each is listed with its Unicode name and code point.
Circles
Filled, hollow, and the partial fills used for ratings, phases and toggle states.
Squares
Three sizes in filled and hollow. The small pair makes better bullets than a plain dot.
Triangles
All four directions at two sizes. The large filled set doubles as media transport controls.
Diamonds and lozenges
Diamonds read as "special" without shouting — the usual pick for a decorative separator.
Click any character to copy it. Nothing is downloaded — these are text characters, not images.
Unicode blocks
- U+25A0–U+25FF Geometric Shapes
- U+2756 Dingbats
How to use Geometric Shapes
Pair filled with hollow to show state
Nearly every shape here ships as a filled-and-outlined pair. Using ● against ○ for on and off, or done and pending, communicates the difference by shape — so it survives greyscale printing and colour-blind vision in a way red-versus-green does not.
Use the small variants as bullets
The small square ▪ and white bullet ◦ sit better against body text than a full-size ■. Nested lists read well as • then ◦ then ▪.
Use the partial circles for progress
○ ◔ ◐ ◕ ● gives five clean steps of completion in one character each — a compact progress indicator for a table cell or a log line.
Colour them from CSS
They are text, so `color` applies directly. A row of ● in five different colours needs no images and no SVG, and it stays sharp at any zoom.
About Geometric Shapes
The Geometric Shapes block is the most quietly useful range in Unicode. Its organising idea is the pair: for almost every shape there is a filled version and an outlined version, and often two or three sizes of each. That redundancy looks wasteful until you need to show two states in a monochrome context — a terminal, a printout, a plain-text email — and discover that shape contrast keeps working where colour contrast does not.
That property is why these characters are everywhere in interface design. The filled and hollow circles are radio buttons and carousel dots. The triangles are disclosure arrows and media transport controls. The small squares are bullets. Because they are text, every one of them inherits the surrounding font size and colour, so an icon set built from them needs no sprite sheet, no icon font and no SVG — and it never loads late or fails to load at all.
The partial-fill circles at U+25D0 to U+25D3, and the quarter-fill variants near them, are a small piece of design vocabulary most people never find. A sequence from empty to full gives you a progress or rating indicator that occupies exactly one character cell, which is why it shows up in CLI dashboards and status tables where horizontal space is scarce.
This site leans on the block heavily. Connect Four and Reversi use ● and ○ for the two players; Simon uses the large triangles for its four pads; Lights Out and Memory use squares and diamonds. Colour is layered on top with CSS as reinforcement, but the shapes carry the meaning on their own — which is what makes the boards readable to a colour-blind player.
Games drawn with these characters
Every board on this site is built from Unicode, not sprites. These ones use the characters above.
Frequently asked questions
What is the difference between ● and ○?
They are the filled and hollow versions of the same circle. Unicode names them "black circle" and "white circle", but those names describe fill rather than colour — both are text, so you can render either in any colour you like. Pairing them shows two states without depending on colour at all.
Which shape symbols make good bullet points?
The bullet • (U+2022) is the standard, with the white bullet ◦ and small square ▪ for nested levels. Full-size ■ and ● are usually too heavy against body text. A common nesting is • then ◦ then ▪.
Can I use geometric shapes instead of icons?
For simple indicators, yes, and there are real advantages: no sprite sheet, no icon font, no extra request, and they inherit text colour and size automatically so they never load late or misalign. Triangles work as disclosure arrows and play buttons, circles as radio states and status dots.
Why do some shapes look bigger than others in the same font?
Unicode encodes several sizes explicitly — small, medium and regular — and fonts also draw the same code point at different optical weights. If a row of shapes looks uneven, you are probably mixing size variants such as ▪ U+25AA with ■ U+25A0. Stick to one size class within a row.
Do these shapes work as emoji?
A few have emoji presentations and may arrive pre-coloured on some platforms. Append the text variation selector U+FE0E to force the monochrome text glyph so it takes your CSS colour. Most of the block is text-only and needs no such treatment.
Support the arcade
Enjoying the games?
UnicodeGames is free, has no ads and never will. If it brightened a coffee break, you can return the favour.
Buy me a coffeeOne-off · No account needed · Handled by Buy Me a Coffee