Use free Bootstrap SVG Icons in Hugo

Bootstrap provides more than 1800 SVG icons. How easy these can be used in Hugo, I describe in this post. The Bootstrap SVG icons can also be used independently of the Bootstrap Toolkit. The icons are published under the MIT license. Commercial use is also allowed.

There are several methods to use the SVG icons in Hugo:

• Include SVG icon via font.
• Copy SVG icon HTML code via clipboard.
• Hugo shortcode for Bootstrap SVG icons
• Include background SVG with data URL via SCSS

Depending on where you use it - in markup, in templates, in a partial or shortcode - you are forced to use a different method.

Integrate SVG icon via font

Bootstrap also provides a font with all SVG icons. This method loads all SVG icons in two font formats - woff and woff2 - from the jsdelivr.net website. Both font formats together have a file size of 279 Kb in the current version 1.10.3. The matching CSS file has a file size of 93 Kb.

The CSS file and font files can be loaded from - https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/ . How to save font files locally and include them in your website I have described in my blog post - Using fonts locally in Hugo . The blog post describes saving Google Fonts locally. But the principle remains the same.

Within the content, the following HTML specification will then use the font:

<p>Bootstrap SVG-Font - one character: <i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i></p>  

Since I want to be economical with user bandwidth, I only include the SVG icons I really use as code. Therefore I don’t use the font, but the other three methods. It makes a difference if 10 SVG icons are transferred or more than 1800.

SVG icon Copy HTML code via clipboard

The SVG icons can be found on Bootstrap’s website at - https://icons.getbootstrap.com/ - copied to the clipboard. Select an SVG icon and click on it.

Use Copy HTML to copy the SVG code to the clipboard and paste it into the HTML at the desired position.

The content of web pages is saved in Hugo as a Markdown file. HTML code can be inserted into the Markdown files, but this gets messy very quickly. Depending on where the SVG icon should be displayed, in the template files list.html, single.html, etc. - in partials or shortcodes, you can insert the SVG code there directly.

Hugo shortcode for Bootstrap SVG icons

A shortcode makes the content of a Markdown file clearer. The normal text is not mixed with Hugo commands and HTML in Markdown. And now comes an SVG icon - - with text behind it. The shortcode is called in Markdown files as follows:

And now comes an SVG icon - {{< svg "bi-cart4" >}} - with text behind it.

The name of the shortcode is svg and the SVG icon has the CSS class bi-cart4. The source code for the shortcode themes/tekki/layouts/shortcodes/svg.html looks like this for me:

{{ $svg := .Get 0 }}
<span>
	{{ if eq $svg "bi-cart4" }}
	<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart4" viewBox="0 0 16 16">
		<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
	</svg>
	{{ else if eq $svg "bi-box-arrow-up-right" }}
	<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
		<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
		<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
	{{ end }}
</span>

Shortcode explanation

The SVG icon is output in a <span> HTML tag. This allows it to be inserted in the text without wrapping. The first parameter of the shortcode is assigned to the $svg variable with .Get 0. This variable is distributed using an if else if structure. The HTML code copied and pasted via the clipboard is stored in each section. The if else if query can be used to extend the shortcode at any time. As described above, I do not use more than 10 SVG icons in total on the whole website.

The CSS for the shortcode svg.html

Without some CSS the SVG icon will not look good. In the pasted SVG code the following CSS classes are present - class="bi bi-cart4". The CSS for it looks like this:

// bootstrap SVG-Icons
.bi {
  display: inline-block;
}
.bi-cart4 {
  width: 2rem;
  height: 2rem;
  vertical-align: baseline;
  color: red;
}

CSS explanation for the shortcode svg.html

The CSS class .bi
bi stands for bootstrap icon. Bootstrap assigns this CSS class to every SVG icon. For this reason, general instructions that apply to all SVG icons can be assigned to the class. display: inline-block; is actually superfluous for the shortcode that is output inside a <span>. However, I also use the CSS code for partials in which there is not necessarily a <span> around the SVG code.

The CSS class .bi-cart4
Via width and height the size of the SVG icon is defined. vertical-align is important to position the SVG icon within the line. Each SVG icon is different and needs to be adjusted according to the line. This is a bit of fiddling, but since it only needs to be done once, it’s not particularly time-consuming.

Embed Background SVG with Data URL via SCSS

Sometimes you have no choice but to include the SVG icon as background-image through SCSS. The table of contents at the top of this page is automatically generated by Hugo. Thus you have no chance to intervene - directly in the code. With SCSS it works nevertheless, although a bit bumpy.

The HTML code generated by Hugo for the table of contents looks like this:

<nav id="TableOfContents">
  <ul>
    <li><a href="#svg-icon-via-font">Quickly integrate SVG icon via font</a></li>
    <li><a href="#copy-svg-icon-code">SVG icon Copy HTML code via clipboard</a></li>
    ...
  </ul>
</nav>

And my SCSS code looks like this:

#TableOfContents {
	ul {
		list-style-type: none;

		li {
			line-height: 1.7rem;
		}
		li:before {
			content: "";
			height: 1.7rem;
			width: 0.9rem;
			display: block;
			float: left;
			margin-left: -1.4rem;
			margin-right: 0.7rem;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 100%;
			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%236495ed" class="bi bi-easel" viewBox="0 0 16 16"><path d="M8 0a.5.5 0 0 1 .473.337L9.046 2H14a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-1.85l1.323 3.837a.5.5 0 1 1-.946.326L11.092 11H8.5v3a.5.5 0 0 1-1 0v-3H4.908l-1.435 4.163a.5.5 0 1 1-.946-.326L3.85 11H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h4.954L7.527.337A.5.5 0 0 1 8 0zM2 3v7h12V3H2z"/></svg>');
		}
  }
}

SCSS explanation for the background SVG icons

ul
The <ul> is requested with list-style-type: none; not to output symbols before the list entry.

li
The list item is assigned a line height of 1.7rem. This makes the list easier to read and on devices with a small viewport (smartphone, ..) there is enough space for a touch not to land on two list items.

li:before
This statement creates an SVG icon before the list item. The height is adjusted to the line height. With margin-left the output of the SVG icon is moved to the left in front of the list item and with margin-right a distance to the list item is created.

It gets interesting with the background-image. The parameter url(‘data:image/svg+xml;utf8, … ‘); is filled with the SVG code already known from the clipboard. The color of the SVG icon must be adjusted on my page so that the SVG icon is recognizable not only in lightmode but also in darkmode. Switching is done at the very top of the web page by clicking on the second icon from the right. Switching is not possible with the background-image by the SCSS statement color or fill. If you scroll further to the right in the SCSS code at the background-image, the fill="%236495ed" statement comes at some point. %23 corresponds to # after that comes the hex color code of the color.

Background SVG icon hover

In the codepen.io post - Background SVG Hovers with Data URL variables - is shown how the SVG code in two SCSS variables, with different colors in the fill, is used to enable hovering with Background SVG’s. I did without the hovering of the SVG icon for my table of contents.

Conclusion

Bootstrap SVG icons are free, look good, are easy to use and don’t require the Bootstrap Toolkit to use. I opted for the SVG code variant to save bandwidth among internet users and not be subject to dependencies on others’ servers. The effort for this is low. In addition, the jurisdiction within the EU, through the GDPR, sets a tight framework regarding automatic embedding of services outside the EU. I expressly welcome these restrictions. Data protection starts with things that are inconspicuous at first glance.

Update on Jan 28, 2023

Revised the content of this blog post to match the current version of Bootstrap SVG icons.

List of links to this post

This might also interest you