Basic Usage

Basic Geometric

Everyday primitives — circles, squares, and simple curved or cut-out variations.

Basic Usage

.shape-circle

.shape-square

.shape-rectangle

.shape-rounded-square

.shape-oval

.shape-semicircle

.shape-pie

.shape-wedge

.shape-arc

.shape-block-arc

.shape-donut

.shape-frame

Polygons

Straight-edged shapes, including regular n-gons from triangle through dodecagon.

.shape-triangle

.shape-diamond

.shape-pentagon

.shape-hexagon

.shape-heptagon

.shape-octagon

.shape-decagon

.shape-dodecagon

.shape-parallelogram

.shape-trapezoid

Stars

Pointed star shapes with varying point counts, plus sun and starburst variants.

.shape-star-4

.shape-star

.shape-star-6

.shape-star-8

.shape-star-10

.shape-star-12

.shape-star-16

.shape-star-24

.shape-star-32

.shape-sun

.shape-starburst

Nature & Symbols

Recognizable real-world and iconographic shapes like hearts, clouds, and weather.

.shape-heart

.shape-moon

.shape-cloud

.shape-lightning

.shape-teardrop

.shape-wave

.shape-double-wave

.shape-no-symbol

.shape-smiley

Arrows

Directional shapes for indicating flow, movement, or sequence.

.shape-arrow

.shape-arrow-double

.shape-notched-arrow

.shape-pentagon-arrow

.shape-arrow-striped

.shape-arrow-bent

.shape-chevron

Callouts & Bubbles

Speech and thought bubbles for annotating or quoting — these are designed to hold text.

Hello!

.shape-speech-bubble

Hi!

.shape-callout-round

Hey!

.shape-callout-rounded

Yo!

.shape-callout-oval

Hmm…

.shape-callout-thought

Poof

.shape-callout-cloud

Boom!

.shape-callout-explosion

Pointer direction

Use direction= to point the tail any way — a keyword (up/right/down/left) or a compass angle in degrees. The body stays upright; only the pointer moves.

direction="up"

left

direction="left"

45°

direction="45"

225°

direction="225"

300°

direction="300"

Flowchart

Standard flowchart and diagram symbols (process, data, decision, etc.).

.shape-terminator

.shape-cylinder

.shape-document

.shape-manual-input

.shape-delay

.shape-display

.shape-stored-data

.shape-summing-junction

.shape-off-page

Block & Functional

Decorative and utility shapes such as crosses, shields, scrolls, and banners.

.shape-cross

.shape-shield

.shape-folded-corner

.shape-diagonal-stripe

.shape-scroll

.shape-wavy-flag

.shape-ribbon

3D / Perspective

Shapes drawn with depth to suggest three-dimensional objects.

.shape-cube

.shape-cylinder-3d

.shape-cone

.shape-pyramid

Math Symbols

Operators and mathematical signs rendered as filled shapes.

.shape-minus

.shape-multiply

.shape-divide

.shape-equals

.shape-not-equal

Brackets & Braces

Grouping marks — square brackets, curly braces, and parentheses, in left/right pairs.

.shape-bracket-left

.shape-bracket-right

.shape-brace-left

.shape-brace-right

.shape-paren-left

.shape-paren-right

Fill & Stroke

These are not separate shapes — they show the fill= and stroke= attributes (any CSS color) plus the .shape-stroke-* width classes applied to any shape above.

.shape-circle

.shape-star

.shape-cube

Sizes

Also a modifier, not a shape group — the .shape-{sm,md,lg} classes set the shape’s bounding box. .shape-full fills its container.

.shape-circle

For a custom size, use the size= attribute with any length — it overrides the size classes.

.shape-circle

Rotation

Also a modifier, not a shape group — the .shape-rotate-* classes turn any shape in 45° steps.

.shape-triangle

.shape-arrow

.shape-moon