mdit-plugin-iconify

Add any Iconify icon directly into your Markdown.
A lightweight markdown-it plugin for inline, scalable, customizable icons.

---

Features

• Use Any Iconify Collection - Works with all @iconify-json/* packages or custom collections.
• Simple Markdown Syntax - Embed icons with ::check:: or ::lucide/check::.
• Customizable - Size, color, and class modifiers with standard Markdown attribute syntax.
• Self-contained - Icons render inline, no external network requests or fonts.
• Framework-agnostic - Works in VitePress, VuePress, Nuxt Content, or any markdown-it setup.

---

Installation

$ npm install mdit-plugin-iconify

and any Iconify icon sets you need. e.g.

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

---

Quick Setup

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

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

const md = new MarkdownIt();

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

---

Usage

Write icons directly in Markdown:

# ::hand:: Hello World

See our [::social/github:: GitHub repository](https://github.com/utility-libraries/mdit-plugin-iconify-js)

Rendered output:

---

Hello World

See our GitHub repository

---

Customization

Import base CSS utilities:

import "mdit-plugin-iconify/index.css";

and use as needed

::check::{.success}
::alert-circle::{.warning.lg}

---

Read the Docs

Read the Documentation for more details about features and configuration options.