skills.rest
jwintz
jwintzCOMMUNITY
Explore all skills by this author →
GitHub

navigation-icons

Add page and folder icons via frontmatter and .navigation.yml configuration.

24|2|Updated Feb 3, 2026
Search Tags:#navigation#icons#frontmatter#lucide#folders#navigation.icon
One-click install
npx skills add https://github.com/jwintz/lithos --skill navigation-icons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: navigation-icons
Source: https://github.com/jwintz/lithos/tree/main/skills/navigation-icons
Command: npx skills add https://github.com/jwintz/lithos --skill navigation-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables visual navigation cues by allowing icons on pages and folders through frontmatter and folder configuration, reducing search time and cognitive load.

Core Features & Use Cases

  • Page icons: Attach icons to individual pages via the navigation.icon frontmatter property or the shorthand icon field to convey page purpose at a glance.
  • Folder icons: Define per-folder icons with .navigation.yml to reflect hierarchy and improve navigation clarity.
  • Icon sets & customization: Choose icons from supported prefixes (i-lucide-, i-heroicons-, i-simple-icons-*) and reference custom SVGs stored in /assets/icons/.

Quick Start

To start, add a frontmatter snippet to a page:

title: Getting Started navigation: icon: i-lucide-rocket

Frequently Asked Questions about navigation-icons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add icons to navigation items using frontmatter?▼

You add icons to navigation items by inserting the navigation.icon property or a shorthand icon field into your page frontmatter, using supported prefixes like i-lucide-* or i-heroicons-* to visually distinguish pages.

Can I set folder icons for navigation in an Obsidian-like vault?▼

Yes, you can define per-folder icons by creating a .navigation.yml file inside the folder. This reflects your vault hierarchy and improves navigation clarity by applying distinct visual icons to entire folders.

What icon sets are supported for frontmatter navigation icons?▼

Supported icon sets include i-lucide-*, i-heroicons-*, and i-simple-icons-* prefixes. You can also reference custom SVG files stored in your /assets/icons/ directory to fully customize your navigation visuals.

Does this frontmatter icon approach work with custom SVG files?▼

Yes, the approach works with custom SVG files by placing them in the /assets/icons/ directory. You can reference these custom SVGs alongside standard icon sets like i-lucide-* to personalize your navigation cues.

What is the best way to improve navigation discoverability in folder-based vaults?▼

The best way to improve discoverability is applying frontmatter-based page icons and folder-level .navigation.yml icons. This reduces cognitive load by providing immediate visual context for pages and folders during navigation.

Related Skills

Explore More Design & Creative Skills→
dakotahpdakotahp

clippings-process

Convert Obsidian web clippings into summarized notes in 2_Areas subfolders.

Community
Advanced
jwintzjwintz
24

lithos-doc

Generate and validate Lithos vault documentation pages with frontmatter and wikilinks.

Community
Intermediate
rmjamesrmjames
1

image-processor

Resize and crop raster and SVG images with ImageMagick and SVGO.

Community
Advanced
shekerkammashekerkamma

presentation-styling

Apply standardized CSS classes and HTML patterns to web-based presentation slides.

Community
Basic