Icons
Icons
A page's own icon frontmatter (shown next to its title, and next to its
entry in the sidebar nav) accepts either a plain emoji/short text - the
original, still fully supported form - or a named icon from one of eight
self-hosted libraries, all MIT/ISC-licensed and bundled with this module
(~16,200 icons combined, no CDN, nothing added to a built page's own
weight beyond the handful of icons it actually uses - see IconResolver.bx):
---
icon: rocket
---
---
icon: lucide:rocket
---
---
icon: phosphor-bold:rocket
---
Bare rocket defaults to Phosphor, regular
weight. Phosphor ships all six of its own weights, each its own prefix:
phosphor-thin:, phosphor-light:, phosphor: (regular, same as the
bare name), phosphor-bold:, phosphor-fill: and phosphor-duotone:.
Prefix with lucide: for Lucide, or
tabler: for Tabler instead. Browse each
site's own gallery for the exact name - it matches this module's own
vendored filename exactly (lowercase, hyphenated, e.g. book-open,
arrow-up-right; Phosphor's own site shows a weight switcher - each of
its six options there is one of this module's six phosphor[-weight]:
prefixes).
Font Awesome is deliberately not one of these - its Duotone style (and most of its icon set from v6 on) is Pro-only, not available under a license this module could bundle and redistribute for free.
A project's own SVG works too - drop it at docs/assets/icons/my-icon.svg
and reference it as icon: custom:my-icon.
A nav.json entry can set its own icon too,
overriding the target page's own frontmatter for that one entry:
{ "title": "Guides", "path": "guides/index.md", "icon": "lucide:book-open" }
The same [library:]name/emoji values work anywhere else an icon is
accepted, like a content-block card - resolved
the same way, through the same shared cache, so referencing the same icon
twice across a build only ever reads its SVG file once.