Icons #
The default theme includes Lucide icons and provides an icon() function for inlining SVG icons directly into your pages.
Usage #
Use the icon() function in templates or markdown content:
{{ icon(name="search") }}
Parameters #
| Parameter | Type | Required | Description |
|---|---|---|---|
name | string | Yes | Icon name (without .svg extension) |
class | string | No | CSS class(es) to add to the SVG |
size | number | No | Width and height in pixels (default: 24) |
Examples #
Basic icon:
{{ icon(name="search") }}
Icon with custom class:
{{ icon(name="menu", class="nav-icon") }}
Icon with custom size:
{{ icon(name="star", size=16) }}
Combined options:
{{ icon(name="heart", class="text-red", size=20) }}
Available Icons #
The theme includes the complete Lucide icon set. Browse all available icons at lucide.dev/icons.
Common icons include:
search- Magnifying glassmenu- Hamburger menux- Close/X markchevron-right,chevron-down- Directional arrowssun,moon- Theme toggle iconsgithub,twitter- Social iconscopy,check- Action icons
Styling #
Icons inherit the current text color via currentColor, so they automatically match your text:
.my-icon {
color: blue;
}
<span class="my-icon">{{ icon(name="star") }}</span>
Custom Icons #
To use custom icons, add SVG files to your theme's static/icons/ directory. The icon function looks for files at theme/static/icons/{name}.svg.