Lucide Icons for TBDL

An Obsidian plugin that lets you insert Lucide icons into your notes and swap the default callout glyphs of the TBDL theme for Lucide icons.

Features

• Icon picker — search all ~1700 Lucide icons by name and insert the one you want at the cursor, as an inline SVG.
• Configurable size — set the default pixel size of inserted icons.
• Render emojis as Lucide icons — toggle on, and every emoji that has a Lucide equivalent (~613 of them) is displayed as an inline Lucide icon in both Reading view and Live Preview. The markdown is never modified, so it works for every document, new or existing, and is fully reversible. Icons inside code blocks are left untouched.
• TBDL theme integration — one toggle (in settings, ribbon, or command palette) replaces Obsidian's built-in callout glyphs with matching Lucide icons across every callout type (note, tip, warning, danger, …). The icons inherit each callout's accent color.

Usage

Insert an icon

• Command palette → Insert a Lucide icon.
• Or click the star icon in the left ribbon.

A searchable grid opens. Click an icon to drop its inline SVG at the cursor. The SVG uses stroke="currentColor", so it inherits the surrounding text color and respects the theme in both light and dark mode.

Inline SVG renders in Reading view. In Live Preview it appears as raw HTML until you switch to Reading view.

Render emojis as Lucide icons

This is the recommended way to make new documents use Lucide icons: keep typing emojis as usual, and they render as Lucide icons on screen.

• Settings → Lucide Icons for TBDL → Render emojis as Lucide icons (button or toggle).
• Or command palette → Toggle rendering emojis as Lucide icons.

~613 common emojis are mapped (laptops, checks, rockets, hearts, tools, weather, faces, food, animals…). Emojis with no Lucide equivalent (e.g. flags, unicorns, family emojis) keep rendering as normal emoji. The toggle is instant in Live Preview and applies on the next render in Reading view.

Activate Lucide icons in the TBDL theme

Three equivalent ways to toggle:

• Settings → Lucide Icons for TBDL → Activate Lucide icons in the TBDL theme (button or toggle).
• Command palette → Toggle Lucide icons in the TBDL theme.

When active, a tbdl-lucide class is added to the body and a stylesheet remaps every callout type to a Lucide icon via CSS masks, so the icon picks up the callout's accent color cleanly.

Installation

From the community plugin browser

Once accepted into the community plugin directory, search for "Lucide Icons for TBDL" and install it.

Manual

1. Download main.js, manifest.json and styles.css from the latest release.
2. In your vault, create .obsidian/plugins/tbdl-lucide-icons/ and copy the three files in.
3. Settings → Community plugins → enable Lucide Icons for TBDL.

Development

npm install
npm run dev      # watch + sourcemaps
npm run build    # minified main.js for release

Requires Node 18+. The build bundles the full lucide icon set, so main.js is around 650 KB.

License

MIT.