Icons & dates
Standalone icons plus build-time-baked dates. Icons, dates, and relative times render text into shadow DOM, so they need Web Awesome’s runtime to appear.
Icon
Inline
Inline $$$name drops a decorative icon mid-prose.
Open the $$$gear settings panel to continue.
Open the
Block with label
A non-empty block body becomes the icon’s accessible label.
:::wa-icon bell
Notifications
:::
Icon tokens
After the name come optional, order-independent family / variant / animation / canvas tokens.
:::wa-icon star shake solid
:::
Every family
Every Web Awesome 3.10.0 icon family. classic and brands are free; duotone / sharp / sharp-duotone need Font Awesome Pro; the rest are Pro+ packs — on a free kit they fall back to classic, so this doubles as a token reference.
::::grid gap:s min:120px
===plain
:::wa-icon star classic
:::
classic
===
===plain
:::wa-icon star sharp
:::
sharp
===
===plain
:::wa-icon star duotone
:::
duotone
===
===plain
:::wa-icon star sharp-duotone
:::
sharp-duotone
===
===plain
:::wa-icon github brands
:::
brands
===
===plain
:::wa-icon star mosaic
:::
mosaic
===
===plain
:::wa-icon star pixel
:::
pixel
===
===plain
:::wa-icon star vellum
:::
vellum
===
===plain
:::wa-icon star slab-duo
:::
slab-duo
===
===plain
:::wa-icon star slab-press-duo
:::
slab-press-duo
===
===plain
:::wa-icon star chisel
:::
chisel
===
===plain
:::wa-icon star etch
:::
etch
===
===plain
:::wa-icon star graphite
:::
graphite
===
===plain
:::wa-icon star jelly
:::
jelly
===
===plain
:::wa-icon star jelly-duo
:::
jelly-duo
===
===plain
:::wa-icon star jelly-fill
:::
jelly-fill
===
===plain
:::wa-icon star notdog
:::
notdog
===
===plain
:::wa-icon star notdog-duo
:::
notdog-duo
===
===plain
:::wa-icon star slab
:::
slab
===
===plain
:::wa-icon star slab-press
:::
slab-press
===
===plain
:::wa-icon star thumbprint
:::
thumbprint
===
===plain
:::wa-icon star utility
:::
utility
===
===plain
:::wa-icon star utility-duo
:::
utility-duo
===
===plain
:::wa-icon star utility-fill
:::
utility-fill
===
===plain
:::wa-icon star whiteboard
:::
whiteboard
===
::::
classic
sharp
duotone
sharp-duotone
brands
mosaic
pixel
vellum
slab-duo
slab-press-duo
chisel
etch
graphite
jelly
jelly-duo
jelly-fill
notdog
notdog-duo
slab
slab-press
thumbprint
utility
utility-duo
utility-fill
whiteboard
Every variant
The Font Awesome weight. regular and solid are free; thin / light / semibold need a Pro kit.
::::grid gap:s min:110px
===plain
:::wa-icon star thin
:::
thin
===
===plain
:::wa-icon star light
:::
light
===
===plain
:::wa-icon star regular
:::
regular
===
===plain
:::wa-icon star solid
:::
solid
===
===plain
:::wa-icon star semibold
:::
semibold
===
::::
thin
light
regular
solid
semibold
Every animation
Animations are pure CSS, so every one plays on any kit tier — watch them loop in the preview. The WA 3.10.0 additions are flip-360, spin-snap*, buzz, float, jello, swing, and wag.
::::grid gap:s min:120px
===plain
:::wa-icon heart beat
:::
beat
===
===plain
:::wa-icon triangle-exclamation fade
:::
fade
===
===plain
:::wa-icon circle-exclamation beat-fade
:::
beat-fade
===
===plain
:::wa-icon volleyball bounce
:::
bounce
===
===plain
:::wa-icon compact-disc flip
:::
flip
===
===plain
:::wa-icon compact-disc flip-360
:::
flip-360
===
===plain
:::wa-icon bell shake
:::
shake
===
===plain
:::wa-icon arrows-rotate spin
:::
spin
===
===plain
:::wa-icon spinner spin-pulse
:::
spin-pulse
===
===plain
:::wa-icon gear spin-reverse
:::
spin-reverse
===
===plain
:::wa-icon gear spin-snap
:::
spin-snap
===
===plain
:::wa-icon gear spin-snap-4
:::
spin-snap-4
===
===plain
:::wa-icon gear spin-snap-8
:::
spin-snap-8
===
===plain
:::wa-icon mobile buzz
:::
buzz
===
===plain
:::wa-icon feather float
:::
float
===
===plain
:::wa-icon cube jello
:::
jello
===
===plain
:::wa-icon bell swing
:::
swing
===
===plain
:::wa-icon hand-pointer wag
:::
wag
===
::::
beat
fade
beat-fade
bounce
flip
flip-360
shake
spin
spin-pulse
spin-reverse
spin-snap
spin-snap-4
spin-snap-8
buzz
float
jello
swing
wag
Every canvas mode
The canvas is the box an icon sits in — it changes the box, not the glyph. Each mode shows the same five different-width icons in a tinted, dashed box so the reserved spacing is visible: fixed (default) gives every icon the same box so they line up; auto lets each take its natural width; square and roomy are larger uniform boxes.
::::stack gap:m
===plain
**fixed** · `1.25 × 1em` — same box for every glyph — aligns icons in lists & menus
:::wa-icon ruler-horizontal fixed
:::
:::wa-icon image fixed
:::
:::wa-icon face-smile fixed
:::
:::wa-icon file fixed
:::
:::wa-icon ruler-vertical fixed
:::
===
===plain
**auto** · `auto × 1em` — each glyph keeps its natural width (ruler-horizontal wide, ruler-vertical narrow)
:::wa-icon ruler-horizontal auto
:::
:::wa-icon image auto
:::
:::wa-icon face-smile auto
:::
:::wa-icon file auto
:::
:::wa-icon ruler-vertical auto
:::
===
===plain
**square** · `1.25 × 1.25em` — a uniform square footprint for standalone icons
:::wa-icon ruler-horizontal square
:::
:::wa-icon image square
:::
:::wa-icon face-smile square
:::
:::wa-icon file square
:::
:::wa-icon ruler-vertical square
:::
===
===plain
**roomy** · `1.5 × 1.5em` — a larger uniform box for standalone icons that need breathing room
:::wa-icon ruler-horizontal roomy
:::
:::wa-icon image roomy
:::
:::wa-icon face-smile roomy
:::
:::wa-icon file roomy
:::
:::wa-icon ruler-vertical roomy
:::
===
::::
fixed · 1.25 × 1em — same box for every glyph — aligns icons in lists & menus
auto · auto × 1em — each glyph keeps its natural width (ruler-horizontal wide, ruler-vertical narrow)
square · 1.25 × 1.25em — a uniform square footprint for standalone icons
roomy · 1.5 × 1.5em — a larger uniform box for standalone icons that need breathing room
Format date
Inline
Published [[[2026-06-26 style:long]]].
Published
Style: short
:::wa-format-date 2026-06-26 style:short
:::
Style: medium
:::wa-format-date 2026-06-26 style:medium
:::
Style: full
:::wa-format-date 2026-06-26 style:full
:::
With time
:::wa-format-date 2026-06-26T14:30:00Z style:medium time:short
:::
French locale
:::wa-format-date 2026-06-26 style:full lang:fr
:::
Relative time
Inline
Updated [[[relative 2026-06-20]]].
Updated
Format: short
:::wa-relative-time 2026-06-20 format:short
:::
Format: narrow
:::wa-relative-time 2026-06-20 format:narrow
:::
Numeric: always
:::wa-relative-time 2026-06-20 numeric:always
:::
Live-ticking
The sync flag keeps the phrase ticking as time passes.
:::wa-relative-time 2026-06-20 sync
:::