Icons
Insert inline SVG icons from the six built-in HugoBlox packs (hero, brands, devicon, academicons, hb, custom) using the icon shortcode.
Usage
{{</* icon name="hero/rocket" */>}}
{{</* icon name="brands/github" */>}}
{{</* icon name="devicon/python" */>}}
{{</* icon name="academicons/orcid" */>}}Parameters
| Parameter | Type | Description |
|---|---|---|
name | string | Required. Icon name in pack/icon format |
Icon Packs
HugoBlox ships with six built-in packs. Omit the prefix and it defaults to hero/.
| Pack | Prefix | Source |
|---|---|---|
| Hero Icons | hero/ | heroicons.com |
| Brand Icons | brands/ | simpleicons.org |
| Devicon | devicon/ | devicon.dev |
| Academicons | academicons/ | jpswalsh.github.io/academicons |
| HugoBlox | hb/ | Curated by the HugoBlox kit |
| Custom | custom/ | Your own SVGs under assets/media/icons/custom/ |
Font Awesome is not bundled. Neither are Lucide, Material Icons, Bootstrap Icons, Tabler, or Iconify. If you find an fa-* example in someone else's config, translate it: brand logos go in brands/ (brands/github), dev tools in devicon/ (devicon/python), generic UI icons in hero/ (hero/rocket). For anything that has no built-in equivalent, drop the SVG into assets/media/icons/custom/ and reference it as custom/<name>.
For the full list of available icons and how to add custom icon packs, see the Icons Reference.
Was this page helpful?
Buttons
Add call-to-action buttons with gradient styles, sizes, icons, and alignment using the Hugo button shortcode.
Cards
Create navigation and informational card grids with links, icons, and descriptions using the Hugo cards shortcode.
From the makers of
© 2026 Lore Labs.