Icons

Customization

Icons

Learn how to load icons

The icon system supports multiple ways to load and use icons:

From Iconify CDN (default)
From local JSON files (must be a valid Iconify JSON)
From custom URLs (also valid iconify JSON)

You can also use multiple icon libraries at once.

Configuration

Icons() can be configured in your settings file:

{
  "theme": {
    "icons": {
      "library": [
        "lucide", // loads from iconify CDN with a default prefix e.g 'lucide'
        {
          "name": "mdi", 
          "version": "7.2.96" // also from iconify but with specified version
        },
        {
          "name": "./icons/custom-icons.json", // loads iconify JSON from a local file
          "default": true // and makes them as default (no prefix needed)
        },
        {
          "name": "https://example.com/icons.json" // load iconify JSON from an URL
        }
      ]
    }
  }
}

Usage

Icons can be loaded in three places:

Page meta:

my-page.md

---
icon: <icon_prefix>:<icon_name>

<!-- you can omit prefix if icon library is set as `default: true` -->
icon: <icon_name>
---

Info

This allows to add icon into sidebar page item.

Sidebar group:


{
  "group": "Integrations",
  "pages": [
      {
          "group": "Analytics",
+
          "icon": "chart-line",
          "pages": [
              ...
          ]
      }
  ]
}

Info

This allows to add icon into specified sidebar group.

Page content:

You can use :icon{name="image" size=16} inside your markdown page content too.

Components Fonts