English | 中文

Inline Icons

Write icons into the body of a note. `icon:sun` renders as an icon, inline with the surrounding text, at the surrounding font size and colour.

Syntax

The token is an ordinary inline code span, so a note stays readable with the plugin disabled or uninstalled. What gets written to the file is the real icon ID, verbatim — no prefix is added or stripped, so a token can never point at the wrong icon.

Weather is `icon:lucide-sun` today, remind me at `icon:lucide-alarm-clock` nine.

`icon:lucide-sun`                    an icon Obsidian ships with
`icon:CI-mdi-outlined-1k`            an icon from an installed icon pack
`icon:CI-my-icon`                    an SVG you imported (the ID comes from the file name)

Shorthands are accepted when you write them by hand — the plugin tries <name>, then lucide-<name>, then CI-<name> — and a source segment narrows the search to one origin:

`icon:sun`                  shorthand for lucide-sun
`icon:ci:my-icon`           only your imported SVGs
`icon:mdi:outlined-1k`      only the "mdi" pack
`icon:lucide:sun`           built-in first, icon pack as fallback

• The icon prefix is configurable.
• An unknown name keeps the original text with a dotted underline, rather than rendering a blank box — so a typo, a disabled pack or a deleted icon is visible.
• Only the code-span form renders. Bare icon:sun in prose is always left alone; to show a token without rendering it, wrap it in double backticks.

Colour and size

Append modifiers after a comma, in any order:

`icon:lucide-sun,1.5em`                  1.5× the surrounding font size
`icon:lucide-sun,#e5a50a`                a specific colour
`icon:lucide-sun,1.5em,red`              both
`icon:lucide-sun,rgb(255, 0, 0)`         any CSS colour function, commas and all
`icon:lucide-sun,light-dark(#eee, #222)` one colour per light/dark mode
`icon:lucide-sun,--text-accent`          a theme variable, so it follows the theme
`icon:lucide-sun,clamp(1em, 2vw, 2em)`   a responsive size

• Size — any CSS length (1.5em, 20px, .5rem, 3vw, 2ch) plus calc(), min(), max() and clamp(). The unit is required; % is not accepted. Defaults to 1em.
• Colour — hex, CSS colour keywords, and every common colour function in either notation: rgb(255, 0, 0) and rgb(255 0 0), hsl(), oklch(), color-mix(), light-dark(). Defaults to the surrounding text colour.
• Theme variables — write --text-accent or var(--text-accent). A variable name says nothing about its type, so names that look like lengths (--icon-l, --size-4-2) are treated as sizes and everything else as a colour. To settle it yourself: size:--my-length or color:--my-brand.
• An unrecognised modifier is simply ignored — a typo in the colour never makes the whole token fall back to plain text.

Both defaults are CSS variables on .inline-icon (--ii-icon-size, --ii-icon-color), so you can change them globally in your own CSS snippet.

Writing a token

You never type the backticks — the plugin writes them. Four paths, all landing on the same code:

The two commands and the right-click menu treat a token under the cursor as "change", not "insert". There is also Re-render icons in this note for when something has not caught up.

Which icons are available

Custom Icons is not a dependency, it is an amplifier. The baseline needs no cross-plugin API at all: Custom Icons registers its icons as ordinary Obsidian global icons, and this plugin resolves names against Obsidian's registry. When it is present, its API adds three things — the Lucide icons Obsidian does not ship, authoritative pack membership for icon:<packId>:, and its icon picker — and each of them disappears cleanly when it is not.

Icon sets change without the plugin list changing (you delete an SVG, you disable a pack), so this plugin listens for Custom Icons' change event and re-renders. Disable Custom Icons and every CI-* token falls back to its original text immediately, rather than going blank.

Where it renders

Move the cursor onto a token in Live Preview and the original text comes back so you can edit it.

Installation

Community plugin market

Click to install, or open Settings → Community Plugins, search for "Inline Icons" and install.

BRAT (beta versions)

1. Install BRAT
2. Click "Add Beta plugin" in BRAT settings
3. Enter Raven-Pensieve/obsidian-inline-icons

License

GPL-3.0 — see LICENSE.

Star History