7.1 – Icons

The glyphs

Rows carry a symbol before the title, like a file explorer:

Symbol	For
folder	a folder
open folder	a folder that is open — or, where nothing expands, that contains the current page
page	a page, also “Overview”
house	the “Home” entry from showHome

Where they appear depends on the variant:

Variant	Glyphs
tree, accordion, flyout	on every level
dropdown, mega, columns	in the menus and columns, not in the top row
bar, tabs, select, pager	none

Custom icons

A custom icon replaces the glyph of its row — and also appears in variants that otherwise show no glyphs, in bar, tabs and the pager. Only not in select: an option of a select menu cannot hold an image.

In the page’s frontmatter:

---
title: Guides
navIcon: lucide:book-open
---

In an index.md it applies to the folder.

In the configuration, by path — for folders without index.md, or when all icons should be in one place:

options:
  nodeIcons:
    docs: lucide:book-open
    docs/api: "🧩"
    blog: none

If both places say something, the frontmatter wins.

What an icon can be

Value	Result
lucide:book-open	the Lucide icon as an embedded SVG
📘	the emoji
§	a short text
none	no symbol at all, not even a glyph

Lucide is a free icon set with well over a thousand symbols; the names are on lucide.dev/icons. The whole set is inside the plugin — nothing to install in the site. An unknown name prints a message at build time and shows nothing.

Icons are slightly larger than the text (1.1em), in the navigation’s muted colour, and in the accent colour on the current page and its path.

icons — what is shown

options:
  icons: both   # both (default) | type | custom | none

Value	Glyphs	Custom icons
both	where no custom icon is set	yes
type	yes	no
custom	no	yes
none	no	no

true and false are understood as both and none.

iconNames — the plugin’s own symbols

The glyphs, the chevron, the burger button and the pager arrows are Lucide icons too. Each can be swapped, with the name without lucide::

options:
  iconNames:
    folder: folder-closed
    chevron: chevron-right
    next: arrow-right
    previous: arrow-left

Key	Default	Where
folder	folder	folder
folderOpen	folder-open	open folder
file	file	page
home	house	”Home”
chevron	chevron-down	chevron on expandable folders
menu	menu	burger button
close	x	close in the mobile menu
previous, next	chevron-left, chevron-right	pager

A right-pointing chevron turns differently

An open folder rotates its chevron by 180 degrees — right for chevron-down. With chevron-right you want 90 degrees: .quartz-nav { --quartz-nav-chevron-open-rotate: 90deg; } (7.2).