Shape Symbols Patterns

Shape Symbols for Website UI

Shape Symbols in this collection are grouped for website ui, with a focus on copy-ready characters that solve a clear text problem.

15 symbols in this page

How to use this set

Shape pages are stronger than they look because the user intent is specific. People often know the general geometry they want and need copy-ready options quickly. Website UI pages work best when the symbol solves a product problem: navigation, state, structure, emphasis, or status.

These shapes help with legends, bullets, status dots, tables, profile styling, minimal icons, dashboards, and visual labeling. These sets are useful in help centers, simple apps, menus, pricing tables, status cards, onboarding, docs, and lightweight dashboards.

Filled and outlined shapes play different roles in design, layout, and scanning. A useful set exposes those contrasts instead of flattening them. The better UI symbols are predictable, restrained, and easy to align with other interface text elements.

Symbols in this collection

Circled White Star

U+272A · ✪

Unicode symbols
starbadgefeatured

The ✪ circled white star sits in the useful middle ground between plain punctuation and emoji, especially for badges, featured blocks, attention markers.

Open page

Black Diamond Suit

U+2666 · ♦

Unicode symbols
diamondcardssuit

For card styling, decorative text, simple icon lists, the ♦ black diamond suit gives a text-first look that stays more neutral than emoji presentation.

Open page

White Circle

U+25CB · ○

Unicode symbols
circleoutlinebullet

The ○ white circle sits in the useful middle ground between plain punctuation and emoji, especially for status dots, minimal bullets, outline markers.

Open page

Black Circle

U+25CF · ●

Unicode symbols
circlebulletstatus

The ● black circle works as a cleaner visual mark for filled bullets, status markers, simple layout icons than a full emoji treatment.

Open page

White Square

U+25A1 · □

Unicode symbols
squareoutlinebox

For empty check states, minimal boxes, layout markers, the □ white square gives a text-first look that stays more neutral than emoji presentation.

Open page

Black Square

U+25A0 · ■

Unicode symbols
squarefilledbox

Many people use the ■ black square when they want filled markers, simple legend symbols, layout bullets to read as text styling rather than emoji decoration.

Open page
Unicode symbols
triangleoutlineshape

Many people use the △ white up pointing triangle when they want outline pointers, simple graph labels, minimal arrows to read as text styling rather than emoji decoration.

Open page
Unicode symbols
triangleupgrowth

For directional markers, growth indicators, minimal pointers, the ▲ black up pointing triangle gives a text-first look that stays more neutral than emoji presentation.

Open page

White Diamond

U+25C7 · ◇

Unicode symbols
diamondoutlinedecorative

Many people use the ◇ white diamond when they want outline decoration, clean separators, light icon sets to read as text styling rather than emoji decoration.

Open page

Black Diamond

U+25C6 · ◆

Unicode symbols
diamondfilledshape

Many people use the ◆ black diamond when they want filled markers, section dividers, feature bullets to read as text styling rather than emoji decoration.

Open page
Unicode symbols
diamondornamentdecorative

The ◈ white diamond containing black small diamond sits in the useful middle ground between plain punctuation and emoji, especially for ornamental dividers, highlight markers, decorative lists.

Open page

Fisheye

U+25C9 · ◉

Unicode symbols
targetfocusdot

For focus markers, targets, highlight dots, the ◉ fisheye gives a text-first look that stays more neutral than emoji presentation.

Open page

Dotted Circle

U+25CC · ◌

Unicode symbols
circledottedplaceholder

The ◌ dotted circle works as a cleaner visual mark for placeholder shapes, linguistic notes, shape references than a full emoji treatment.

Open page

Bullseye

U+25CE · ◎

Unicode symbols
targetbullseyefocus

The ◎ bullseye works as a cleaner visual mark for target labels, focus points, highlight markers than a full emoji treatment.

Open page

Triangular Bullet

U+2023 · ‣

Text symbols
bullettrianglelist

The ‣ triangular bullet tends to show up in plain text whenever structured lists, guide callouts, section markers need more structure or visual direction.

Open page

Related pattern pages