The Hugo icons module generates inline SVG icons.

Module
github.com/hugomods/icons
GitHub Stars Used By Used By Used By Used By

Features

  • Compatible with any SVG icons vendors, such as Bootstrap icons, Simple icons, Font Awesome icons, Feather icons, Material Design icons and Tabler icons.
  • No CSS required.
  • No JS required.
  • No Fonts required.
  • Load icons on demand.
  • Flexible: allow specifying the height, width, color and class name of the icon.
  • Icon shortcode.

Icons Vendors

The list of supported icons vendors.

VendorVendor NameShorthandModule PathVersion
Bootstrap Iconsbootstrapbsgithub.com/hugomods/icons/vendors/bootstrap

Feather Iconsfeather-github.com/hugomods/icons/vendors/feather

Font Awesome Brands Iconsfont-awesome-brandsfabgithub.com/hugomods/icons/vendors/font-awesome

Font Awesome Regular Iconsfont-awesome-regularfargithub.com/hugomods/icons/vendors/font-awesome

Font Awesome Solid Iconsfont-awesome-solidfasgithub.com/hugomods/icons/vendors/font-awesome

Lucide Iconslucide-github.com/hugomods/icons/vendors/lucide

Material Design Iconsmdi-github.com/hugomods/icons/vendors/mdi

Simple Iconssimple-iconssimplegithub.com/hugomods/icons/vendors/simple-icons

Tabler Iconstabler-github.com/hugomods/icons/vendors/tabler

Installation

Just import the icons vendors you want into configuration file.

hugo.yaml

1module:
2  imports:
3  - path: github.com/hugomods/icons/vendors/bootstrap
4  - path: github.com/hugomods/icons/vendors/font-awesome
5  - path: github.com/hugomods/icons/vendors/simple-icons

hugo.toml

1[module]
2[[module.imports]]
3    path = 'github.com/hugomods/icons/vendors/bootstrap'
4[[module.imports]]
5    path = 'github.com/hugomods/icons/vendors/font-awesome'
6[[module.imports]]
7    path = 'github.com/hugomods/icons/vendors/simple-icons'

hugo.json

 1{
 2   "module": {
 3      "imports": [
 4         {
 5            "path": "github.com/hugomods/icons/vendors/bootstrap"
 6         },
 7         {
 8            "path": "github.com/hugomods/icons/vendors/font-awesome"
 9         },
10         {
11            "path": "github.com/hugomods/icons/vendors/simple-icons"
12         }
13      ]
14   }
15}

Styling the Icons

You may need to adjust your CSS like following to align the icon to vertical middle, for example,

1.hi-svg-inline {
2  vertical-align: -0.125rem;
3}

Usages

Use Icons via Templates (Partials)

1{{ $context := dict
2  "vendor" "bootstrap"
3  "name" "house"
4}}
5{{ partial "icons/icon" $context }}

Icons Partial’s Context

NameRequiredDescription
vendorYThe vendor name of icons.
nameYThe icon name.
sizeNThe square icon size, default to 1em.
heightNThe height of icon, default to 1em.
widthNThe width of icon, default to 1em.
classNameNThe additional class names of <svg> tag after hi-svg-inline.
colorNThe color of icon.

Use Icons via Shortcode

ParameterPositionTypeRequiredDescription
vendor#1StringYThe icons vendor’s name.
name#2StringYThe icon’s name.
color-String-The icon’s color.
className-String-The icon’s class name.
size-String-The square icon size.
width-String-The icon’s width.
height-String-The icon’s height.
1{{< icons/icon bootstrap house >}}
2{{< icons/icon vendor=bootstrap name=house color=red >}}
3{{< icons/icon vendor=bootstrap name=house size=2em >}}
4{{< icons/icon vendor=bootstrap name=house width=2em height=2em >}}

Advanced

Icons Functions

icons/functions/svg-resource Function

The icons/functions/svg-resource function accept vendor and name parameters and returns the corresponding icon SVG resource.

1{{ $res := dict "vendor" "bootstrap" "name" "house" }}
2{{ with partialCached "icons/functions/svg-resource" $res $res }}
3  <img src="{{ .RelPermalink }}" />
4{{ end }}