Icon

Displays an inline icon in your body markdown.

Requires hugolify-theme v2 and Hugolify Admin v2

Example

Markdown usage

{{< icon icon="phone" >}}
{{< icon icon="brand:github" >}}

The argument is named, never positional. The admin editors parse named arguments and would drop a positional one when saving the entry.

HTML rendered

<i class="icon icon-phone" aria-hidden="true"></i>

The markup is the same either way. What differs is who styles the class.

With hugolify-theme-icons the shortcode goes through partials/icon.html, which registers the name and serves the glyph from the stylesheet the module builds: Lucide for content icons, Simple Icons for the brand: prefix. Only the icons a page actually uses are built.

Without that partial the shortcode emits the class on its own, and the theme’s icon font takes over, the Bootstrap Icons webfont in hugolify-theme-bootstrap. The brand: prefix is specific to hugolify-theme-icons and has no meaning there.

Datas

icon: "" # string

CMS availability

Hugolify Admin

Hugolify Admin
- CloudCannon Available Since v2
- Decap CMS Available Since v2
- Netlify CMS Available Since v2
- Pages CMS Not available
- Sveltia CMS Available Since v2
- Tina CMS Not available

In the editor, Decap, Netlify and Sveltia CMS preview the icon from a CDN, because the site stylesheet is not loaded there. Without hugolify-theme-icons the preview shows the icon name instead.