Geometric Shapes Blocks

Geometry in text form: the Geometric Shapes block (U+25A0–U+25FF) and its extension Geometric Shapes Extended (U+1F780–U+1F7FF) provide squares, circles, triangles, diamonds, and more in filled and outlined variants. These characters are workhorses of plain-text UI design, mathematical notation, bullet points, and symbol systems. Understanding them opens up expressive possibilities for both developers and typographers working in text-based environments.

Geometric Shapes Block (U+25A0–U+25FF)

The block spans 96 code points and covers the major geometric primitives in small, medium, and large sizes with both filled (solid) and outline variants.

Squares and Rectangles

Squares range from small to large:

The solid black square ■ is frequently used as a QED marker ("tombstone") at the end of mathematical proofs — a cleaner alternative to the written "Q.E.D." or □. The Unicode-preferred QED character is actually □ (white square U+25A1), though ■ (black) is also common in modern mathematical typesetting.

Circles

The bullet point • (U+2022) technically lives in the General Punctuation block, but ● (U+25CF) and ○ (U+25CB) from Geometric Shapes are often used similarly. The small circle ◦ (U+25E6) serves as a secondary bullet in nested lists.

Triangles

Triangles point in all four directions and come in filled and outline variants:

Filled triangles (▲ ▼ ◀ ▶) are widely used as arrow indicators in sortable table headers, collapsible section toggles, and playback controls. The white (outline) variants are used in mathematical notation, particularly for logical operations and set theory.

Diamonds and Rhombuses

The lozenge ◊ (U+25CA) is often confused with ◇ (U+25C7) but is a separate character. In some typefaces it appears more elongated (diamond-card-suit shape) vs. square. ◆ is commonly used as a bullet point variant for visual variety.

Pentagons and Stars

The Geometric Shapes block also includes starred variants:

These are in the Miscellaneous Symbols block (U+2600–U+26FF) but are frequently grouped with geometric shapes conceptually. They are used in rating systems (★★★★☆) and emphasis markers.

Geometric Shapes Extended (U+1F780–U+1F7FF)

Added in Unicode 7.0 (2014) to provide additional geometric primitives previously missing from Unicode, this supplemental block focuses on variants that were needed for mathematical and educational use.

Small Geometric Shapes

The colored circles in U+1F7E0–U+1F7EB (added Unicode 12.0, 2019) are frequently used as status indicators in project management tools, documentation, and chat apps: - 🔴 Red: blocked / error / offline - 🟡 Yellow: in progress / warning / away - 🟢 Green: done / success / online

Usage in User Interfaces

Geometric shapes are the unsung heroes of plain-text and HTML user interfaces:

Bullet Lists

Classic bullet hierarchy using geometric shapes:

■ Main item
  ▪ Sub-item
    · Sub-sub-item

Sort Indicators

Sortable tables often use triangles inline with column headers: - Column Name ▲ (sorted ascending) - Column Name ▼ (sorted descending) - Column Name ◇ (unsorted)

Progress and Status

Using block fill characters alongside geometric shapes:

Task A: ████████░░ 80%
Task B: █████░░░░░ 50%  ▲ +10%
Task C: ██████████ 100% ●

Navigation and Collapse

• ▶ Collapsed section
• ▼ Expanded section
• ◀ Back navigation

Mathematical Uses

Geometric shapes appear in mathematical and logical notation:

• ▷ Used for "normal subgroup of" in group theory
• △ Used for symmetric difference of sets
• □ "Necessarily" operator in modal logic
• ◇ "Possibly" operator in modal logic (dual of □)
• ▲ QED symbol in some traditions

Design Considerations

When using geometric shapes in UI design, keep in mind:

1. Size consistency: Different fonts render the same character at different apparent sizes. ■ and ● may not appear the same size even at the same font size.

2. Baseline alignment: Geometric shapes may sit differently on the text baseline than letters. CSS vertical-align: middle or baseline adjustments are often needed.

3. Color inheritance: Unlike emoji, geometric shapes inherit the CSS color property, making them easy to style with the current text color.

4. Filled vs. outline for contrast: Filled shapes (■ ●) have better visibility on light backgrounds; outline shapes (□ ○) work better in dense text where heavy shapes would be overwhelming.

5. Scaling: For high-DPI displays and large text sizes, SVG icons may be preferable to Unicode shapes, but for body text and terminal environments, Unicode shapes are unbeatable in simplicity.

The Geometric Shapes blocks represent a sweet spot in Unicode: practical, widely supported, easy to type and embed, and visually effective even in the most constrained text environments.