Geometric Shapes | HTML Entity & Character Reference

Entities Geometric Shapes

Unicode provides geometric shape characters that can be used in HTML for diagrams, indicators, legends, lists, controls, mathematical notation, and other visual purposes.

Geometric shapes include squares, rectangles, triangles, diamonds, circles, and related symbols. Some have named HTML character references, while others can be represented with decimal or hexadecimal numeric character references or entered directly in a UTF-8 HTML document.

Squares & Rectangles

Square and rectangular symbols are available in filled, outlined, and partially filled forms. They are commonly used as markers, indicators, and diagram components.

Character	Named	Decimal	Hexadecimal	Description
■	`&squarf;`	`■`	`■`	Black square
□	`&square;`	`□`	`□`	White square
▢	—	`▢`	`▢`	White square with rounded corners
▣	—	`▣`	`▣`	White square containing black small square
▤	—	`▤`	`▤`	Square with horizontal fill
▥	—	`▥`	`▥`	Square with vertical fill
▪	`&squf;`	`▪`	`▪`	Black small square
▫	—	`▫`	`▫`	White small square
▬	—	`▬`	`▬`	Black rectangle
▭	`&rect;`	`▭`	`▭`	White rectangle

Triangles

Triangle symbols are available in several directions and styles. They are frequently used as directional indicators, disclosure markers, and diagram symbols.

Character	Named	Decimal	Hexadecimal	Description
▲	—	`▲`	`▲`	Black up-pointing triangle
△	`&xutri;`	`△`	`△`	White up-pointing triangle
▶	—	`▶`	`▶`	Black right-pointing triangle
▷	`&rtri;`	`▷`	`▷`	White right-pointing triangle
▼	—	`▼`	`▼`	Black down-pointing triangle
▽	`&xdtri;`	`▽`	`▽`	White down-pointing triangle
◀	—	`◀`	`◀`	Black left-pointing triangle
◁	`&ltri;`	`◁`	`◁`	White left-pointing triangle

Diamonds

Diamond-shaped characters are used in mathematics, diagrams, lists, card notation, and other symbolic applications.

Character	Named	Decimal	Hexadecimal	Description
◆	—	`◆`	`◆`	Black diamond
◇	`&diamond;`	`◇`	`◇`	White diamond
◈	—	`◈`	`◈`	White diamond containing black small diamond
◊	`&loz;`	`◊`	`◊`	Lozenge
⬖	—	`⬖`	`⬖`	Diamond with left half black
⬗	—	`⬗`	`⬗`	Diamond with right half black

Circles

Circle symbols include filled, outlined, dotted, and concentric forms that can be used for markers, indicators, diagrams, and mathematical notation.

Character	Named	Decimal	Hexadecimal	Description
○	`&cir;`	`○`	`○`	White circle
●	—	`●`	`●`	Black circle
◉	—	`◉`	`◉`	Fisheye
◎	—	`◎`	`◎`	Bullseye
◌	—	`◌`	`◌`	Dotted circle
◍	—	`◍`	`◍`	Circle with vertical fill
◐	—	`◐`	`◐`	Circle with left half black
◑	—	`◑`	`◑`	Circle with right half black
◒	—	`◒`	`◒`	Circle with lower half black
◓	—	`◓`	`◓`	Circle with upper half black

Additional Geometric Shapes

Additional geometric characters include stars, polygons, lozenges, and other shapes that can be useful in diagrams, ratings, markers, and symbolic notation.

Character	Named	Decimal	Hexadecimal	Description
★	`&starf;`	`★`	`★`	Black star
☆	`&star;`	`☆`	`☆`	White star
◖	—	`◖`	`◖`	Left half black circle
◗	—	`◗`	`◗`	Right half black circle
◙	—	`◙`	`◙`	Inverse white circle
◢	—	`◢`	`◢`	Black lower right triangle
◣	—	`◣`	`◣`	Black lower left triangle
◤	—	`◤`	`◤`	Black upper left triangle
◥	—	`◥`	`◥`	Black upper right triangle

Using Geometric Shapes in HTML

Geometric shapes can be entered directly in UTF-8 HTML or written with named, decimal, or hexadecimal character references. Their appearance can vary slightly depending on the browser, operating system, and font.

<p>Square: &square;</p>
<p>Diamond: &diamond;</p>
<p>Circle: &cir;</p>
<p>Black triangle: &#9650;</p>
<p>Star: &star;</p>

Browser Result

Square: □

Diamond: ⋄

Circle: ○

Black triangle: ▲

Star: ☆