Hugo Icons Modules

March 21, 2023 3 min read Icons Modules Docs Bootstrap Icons Tabler Icons Feather Icons Font Awesome Icons Simple Icons Material Design Icons

On this page

Donate

Please check out the tutorial to start using Hugo modules.

The Hugo icons module generates inline SVG icons.

Module
`github.com/hugomods/icons`

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.

Vendor	Vendor Name	Shorthand	Module Path
Bootstrap Icons	`bootstrap`	`bs`	`github.com/hugomods/icons/vendors/bootstrap`
Feather Icons	`feather`	-	`github.com/hugomods/icons/vendors/feather`
Font Awesome Brands Icons	`font-awesome-brands`	`fab`	`github.com/hugomods/icons/vendors/font-awesome`
Font Awesome Regular Icons	`font-awesome-regular`	`far`	`github.com/hugomods/icons/vendors/font-awesome`
Font Awesome Solid Icons	`font-awesome-solid`	`fas`	`github.com/hugomods/icons/vendors/font-awesome`
Lucide Icons	`lucide`	-	`github.com/hugomods/icons/vendors/lucide`
Material Design Icons	`mdi`	-	`github.com/hugomods/icons/vendors/mdi`
Simple Icons	`simple-icons`	`simple`	`github.com/hugomods/icons/vendors/simple-icons`
Tabler Icons	`tabler`	-	`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

Name	Required	Description
`vendor`	Y	The vendor name of icons.
`name`	Y	The icon name.
`size`	N	The square icon size, default to `1em`.
`height`	N	The height of icon, default to `1em`.
`width`	N	The width of icon, default to `1em`.
`className`	N	The additional class names of `<svg>` tag after `hi-svg-inline`.
`color`	N	The color of icon.

Use Icons via Shortcode

Parameter	Position	Type	Required	Description
`vendor`	`#1`	String	Y	The icons vendor’s name.
`name`	`#2`	String	Y	The 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 }}

HugoPress

Docker

Browse Docs