Quick Start

This guide shows how to set up mdit-plugin-iconify and start using icons in Markdown.

Installation

Install the plugin package:

$ npm install mdit-plugin-iconify

Then install one or more Iconify icon sets you want to use. This Guide will use lucide and simple-icons.

$ npm install @iconify-json/lucide @iconify-json/simple-icons

Configuration

Import and register the plugin with markdown-it:

import MarkdownIt from "markdown-it";
import iconPlugin from "mdit-plugin-iconify";
import "mdit-plugin-iconify/index.css"; // recommended base styles

import { icons as lucideIcons } from "@iconify-json/lucide";
import { icons as simpleIcons } from "@iconify-json/simple-icons";

const md = new MarkdownIt();

md.use(iconPlugin, {
  collections: {
    lucide: lucideIcons,
    social: simpleIcons,
  },
  defaultCollection: "lucide", // optional
});

This setup gives you access to any icon from your chosen collections. You can also omit defaultCollection if you always specify prefixes like ::social/github.::

Usage

Write icons directly in Markdown:

### ::hand:: Hello World

See our [::social/github:: GitHub repository](...).

Rendered output:

---

Hello World

See our GitHub repository.

Done

You can now use icons inline anywhere Markdown is parsed by markdown-it - VitePress, VuePress, or your own build system.