Icon

To use this shortcode inline, inline shortcode needs to be enabled in the config:

enableInlineShortcodes: true

Built-in icons are listed in data/icons.yaml.

Example

Usage

{{< icon "github" >}}

Heroicons v1 outline icons are available out of the box.

How to add your own icons

Create data/icons.yaml file, then add your own SVG icons in the following format:

your-icon: <svg>your icon svg content</svg>

It then can be used in the shortcode like this:

{{< icon "your-icon" >}}

{{< card icon="your-icon" >}}

Tip: Iconify Design is a great place to find SVG icons for your site.

Remote icon packs

Remote icons can be loaded on demand by using a provider prefix. Hextra supports these providers:

Remote icons are fetched at build time. The default providers are pinned to major package versions and loaded from these CDN URLs:

lucide: "https://unpkg.com/lucide-static@1/icons/%s.svg"
tabler: "https://unpkg.com/@tabler/icons@3/icons/outline/%s.svg"
simple: "https://cdn.jsdelivr.net/npm/simple-icons@16/icons/%s.svg"

Remote icon names work anywhere Hextra accepts an icon name, including cards, tabs, badges, callouts, and navbar menu items.

Options