Icon Reference
Complete guide to HugoBlox icons: use Hero, Brand, Academic, and custom SVG icons in blocks, menus, and buttons with the icon: pack/name syntax.
Use icons throughout your HugoBlox site—in blocks, menus, buttons, and author profiles. This guide covers all available 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-scholarDefault 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
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.
brands/github, brands/twitter, brands/python
Academic Icons
Scholarly platforms and research tools.
academicons/google-scholar, academicons/orcid, academicons/arxiv
Emoji
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: "📊" |
| 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/twitter |
| Academicons | academicons/ | academicons/orcid |
| 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.