Iconify

Two hundred thousand icons, as a shortcode.

What the iconify extension does, how to install it, and the smallest shortcode that draws an icon.
Author

Mickaël CANOUIL, Ph.D.

Quarto ships Bootstrap Icons and Font Awesome, which is a few thousand icons. Iconify collects over two hundred thousand, from more than a hundred sets, behind one naming scheme.

iconify puts them behind one shortcode: {{< iconify octicon:rocket-16 >}} draws that rocket, in HTML and in Typst alike.

The glyphs in this site’s footer are drawn by it.

Installation

quarto add mcanouil/quarto-iconify@4.1.2

This will install the extension under the _extensions subdirectory. If you are using version control, you will want to check in this directory.

Or install it from your editor with Quarto Wizard:

Visual Studio Code Positron VSCodium

Quick start

Name the set and the icon, either way round:

{{< iconify octicon:rocket-16 >}}
{{< iconify octicon rocket-16 >}}

Both draw .

Size, rotate, colour, and label it with attributes:

{{< iconify mdi:home size=2x >}}
{{< iconify mdi:home rotate=90deg label="Home" >}}

and .

Set a default icon set so the set can be dropped:

extensions:
  iconify:
    set: octicon

See the Reference for every option, and the Examples for the attributes rendered.

Where it works

HTML formats that run JavaScript, and Typst. EPUB and every other format render nothing.

In HTML the icon is a web component fetched from the Iconify CDN, with a local fallback. For Typst the SVG is retrieved once and cached, so a build repeats without the network; the Reference covers the cache.

Back to top