Skip to content

Icons

Zensical comes with several icon sets built in, which you can use anywhere you can put text, including headers. You can also use emoji, including flags.

Using icons Zensical

Icons use a :set-name: shortcode. To find an icon, search the Zensical icon and emoji reference, then copy its shortcode.

The available sets are:

Set Prefix Example Browse
Lucide lucide- :lucide-lock: lucide.dev
Material Design material- :material-lock: pictogrammers.com
Font Awesome fontawesome-regular-, -solid-, -brands- :fontawesome-brands-git-alt: fontawesome.com
Octicons octicons- :octicons-mark-github-16: primer.style
Simple Icons (brands) simple- :simple-hetzner: Hetzner simpleicons.org

For general-purpose icons, we use Lucide in this handbook, to match the icons used by the site theme itself. Use Simple Icons for company and product logos.

example.md
Team Access :lucide-lock:

Emoji and flags

Emoji use their name as a shortcode, like :tada: 🎉. Flags use the two-letter country code: :flag_us: 🇺🇸 :flag_de: 🇩🇪 :flag_eu: 🇪🇺

Modifying icons

Color

Add a color class after the icon, with no space in between. The available colors are icon-violet, icon-amber and icon-pink (defined in docs/stylesheets/extra.css, where you can add more):

example.md
:lucide-lock:{ .icon-violet } Team Access
:lucide-ticket:{ .icon-amber } By Invitation
:lucide-circle-dashed:{ .icon-pink } Partial Open Access

Team Access By Invitation Partial Open Access

Size

Icons scale with the text around them. To make one bigger, wrap it in a heading or set a size with an inline style:

example.md
:simple-zensical:{ style="font-size: 3em" }

Zensical