Skip to content
HugoBlox Docs

Icon Reference

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

Section titled “Syntax”

Icons use the format pack/icon-name:

icon: brands/github
icon: hero/academic-cap
icon: academicons/google-scholar

Built-in Icon Packs

Section titled “Built-in Icon Packs”

Hero Icons

Default pack. 300+ outline icons for UI elements.

hero/sparkles, hero/academic-cap, hero/envelope

Browse Hero Icons →

Brand Icons

Logos for platforms, languages, and tools.

brands/github, brands/twitter, brands/python

Browse Brand Icons →

Academic Icons

Scholarly platforms and research tools.

academicons/google-scholar, academicons/orcid, academicons/arxiv

Browse Academicons →

Custom SVG Icons

Section titled “Custom SVG Icons”

Add your own icons by placing SVG files in your project:

  • Directoryassets/
    • Directorymedia/
      • Directoryicons/
        • Directorycustom/
          • my-icon.svg

Then reference with the custom/ prefix:

icon: custom/my-icon

Where Icons Are Used

Section titled “Where Icons Are Used”

Icons appear in many places across HugoBlox:

ContextExample
Block buttonslinks: with icon: brands/github
Author profilesSocial links in data/authors/*.yaml
Page coverscover.icon.name: "📊"
Menu itemsNavigation links with icons
Feature blocksIcons next to feature titles
Section titled “Example: Author Social Links”
data/authors/jane-doe.yaml
social:
  - icon: envelope
    link: mailto:jane@example.com
  - 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

Section titled “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/play

Quick Reference

Section titled “Quick Reference”
PackPrefixExamples
Hero (default)hero/ or nonesparkles, hero/envelope
Brandsbrands/brands/github, brands/twitter
Academiconsacademicons/academicons/orcid
Customcustom/custom/my-icon
Emoji:name::rocket:, :heart: