Iconfine

approved

by Raymond Zhang

Search and insert static font icons that inherit text color and export cleanly to PDF. - This plugin has not been manually reviewed by Obsidian staff.

★ 3 stars↓ 34 downloadsUpdated 26d agoApache-2.0
Install in ObsidianView on GitHub

Iconfine

Iconfine manages an Obsidian CSS snippet for static icon-font rendering, and provides searchable insertion shortcuts. The snippet keeps icons available in reading view, Live Preview, and Obsidian's native PDF export.

⚠️ IMPORTANT

If you installed Iconfine through Obsidian, go to the release page and download:

  1. iconfine.css into <vault>/.obsidian/snippets/, then enable it.
  2. lucide.woff2, tabler-icons.woff2, and tabler-icons-filled.woff2 into <vault>/.obsidian/plugins/iconfine/, then reload the plugin.

Initial feature set

  • Managed iconfine CSS snippet with Lucide, Tabler, and Tabler Icons Filled fonts
  • Choose the default icon pack from settings
  • Switch icon packs directly in the icon picker
  • Search and preview up to 50 matching icons
  • Mouse and keyboard selection
  • Static namespaced HTML output
  • Configurable space placement
  • Editor context-menu shortcut

Inserted markup:

<i class="iconfine if-lucide if-icon-book"></i>
<i class="iconfine if-tabler if-icon-book"></i>

Install

Download iconfine-1.0.0.zip from the latest Release and unzip it into <vault>/.obsidian/plugins/ — the zip contains a ready-made iconfine/ folder. (Or copy the whole dist/iconfine/ folder from the repo into <vault>/.obsidian/plugins/ and rename it if needed.)

The plugin folder must contain:

  • main.js
  • manifest.json
  • styles.css
  • iconfine.css
  • lucide.woff2
  • tabler-icons.woff2
  • tabler-icons-filled.woff2

Build

npm.cmd install
npm.cmd run build

The build reads icon-font sources from vendor/ and writes the finished plugin folder to dist/iconfine/. After installing through Obsidian, download iconfine.css into the vault's snippets/ folder and enable it. The three .woff2 files belong in the plugin folder so Iconfine can load the screen fonts. Enable Iconfine in Obsidian. If the current Obsidian version does not expose its snippet manager, enable Iconfine once under Appearance → CSS snippets. Then run Iconfine: Insert icon from the command palette or use the editor context menu.

Repository layout

src/            plugin TypeScript source
vendor/         upstream icon fonts & CSS (build inputs, not for install)
dist/iconfine/  built plugin folder — this is what you install

For plugin developers

Search results and similarity scores are powered by semantic analysis of your plugin's README. If your plugin isn't appearing for searches you'd expect, try updating your README to clearly describe your plugin's purpose, features, and use cases.