Icon Reference
Complete guide to HugoBlox icons: the six built-in packs (hero, brands, devicon, academicons, hb, custom), the pack/name syntax, and how to add custom SVGs.
Use icons throughout your HugoBlox site — in blocks, menus, buttons, page covers, and author profiles. This guide covers all built-in icon packs and how to add custom icons.
Syntax
Icons use the format pack/icon-name:
icon: brands/github
icon: hero/academic-cap
icon: academicons/google-scholar
icon: devicon/pythonDefault pack: If you omit the pack prefix, HugoBlox defaults to Hero icons. So icon: sparkles is equivalent to icon: hero/sparkles.
Built-in Icon Packs
HugoBlox ships with six built-in icon packs. Treat this as the complete closed set — anything outside it has to come in as a custom SVG.
Hero Icons
Default pack. 300+ outline icons for UI elements.
hero/sparkles, hero/academic-cap, hero/envelope
Brand Icons
Logos for platforms, languages, and tools (sourced from Simple Icons).
brands/github, brands/openai, brands/x
Developer Icons
Programming languages, frameworks, and dev tools.
devicon/python, devicon/react, devicon/typescript
Academic Icons
Scholarly platforms and research tools.
academicons/google-scholar, academicons/orcid, academicons/arxiv
HugoBlox Icons
HugoBlox-specific icons curated by the kit (callouts, skills, extras).
hb/python, hb/markdown, hb/folder-tree
Emoji
Not built-in. Font Awesome (fa-*, fab fa-*, fas fa-*), Lucide, Material Icons, Bootstrap Icons, Tabler, and Iconify packs are not bundled. If you see these in third-party tutorials or AI-generated configs, translate them to one of the built-in packs (most brand logos live in brands/, most dev tools in devicon/, most UI icons in hero/) — or upload the SVG yourself and use the custom/ prefix below.
Custom SVG Icons
Add your own icons by placing SVG files in your project:
Then reference with the custom/ prefix:
icon: custom/my-iconAlways use lowercase and hyphens (not spaces or underscores) for icon names.
Where Icons Are Used
Icons appear in many places across HugoBlox:
| Context | Example |
|---|---|
| Block buttons | links: with icon: brands/github |
| Author profiles | Social links in data/authors/*.yaml |
| Page covers | cover.icon.name: "hero/academic-cap" |
| Menu items | Navigation links with icons |
| Feature blocks | Icons next to feature titles |
Example: Author Social Links
# data/authors/jane-doe.yaml
social:
- icon: envelope
link: mailto:[email protected]
- icon: brands/github
link: https://github.com/janedoe
- icon: brands/linkedin
link: https://linkedin.com/in/janedoe
- icon: academicons/google-scholar
link: https://scholar.google.com/...Example: Page Header Buttons
# In page front matter
links:
- name: Code
url: https://github.com/...
icon: brands/github
- name: Demo
url: https://demo.example.com
icon: hero/playQuick Reference
| Pack | Prefix | Examples |
|---|---|---|
| Hero (default) | hero/ or none | sparkles, hero/envelope |
| Brands | brands/ | brands/github, brands/openai |
| Devicon | devicon/ | devicon/python, devicon/react |
| Academicons | academicons/ | academicons/orcid |
| HugoBlox | hb/ | hb/python, hb/markdown |
| Custom | custom/ | custom/my-icon |
| Emoji | :name: | :rocket:, :heart: |
Pro tip: Use the browser's search (Ctrl/Cmd+F) on the icon pack websites to quickly find the exact icon name you need.
Was this page helpful?
Block Development
Create custom blocks for HugoBlox. Learn how to build Go HTML or Preact blocks with co-located CSS, Tailwind support, and the block engine internals.
CLI Reference
Comprehensive guide to the HugoBlox CLI commands and options.
From the makers of
© 2026 Lore Labs.