obsidian-custom-icons

Set custom image icons for any note or folder in Obsidian's file explorer — just paste a URL, Notion-style.

---

Features

• Right-click any file or folder → Set custom icon
• Paste any public image URL (PNG, JPG, SVG, WebP, …)
• Live preview before confirming
• Icons appear directly in the Files tab next to the file/folder name
• Remove icons via right-click → Remove icon or through the settings tab
• All assigned icons are listed in the plugin settings with a thumbnail preview
• Icon paths are automatically updated when you rename or move a file/folder

---

Installation

From GitHub Releases (recommended)

1. Go to the Releases page and download the latest release assets:

   • main.js
   • manifest.json
   • styles.css

2. In your vault, create the plugin folder:

   .obsidian/plugins/obsidian-custom-icons/
   

3. Copy the three files into that folder:

   .obsidian/plugins/obsidian-custom-icons/
   ├── main.js
   ├── manifest.json
   └── styles.css
   

4. Open Obsidian → Settings → Community plugins

5. Make sure Restricted mode is turned off

6. Click Reload plugins (or restart Obsidian)

7. Find Custom Icons in the list and toggle it on

---

Usage

Set an icon

1. Right-click a file or folder in the Files tab
2. Click Set custom icon
3. Paste an image URL into the input field — a preview appears instantly
4. Press Enter or click Set icon

Remove an icon

• Right-click the file/folder → Remove icon, or
• Go to Settings → Custom Icons and click the trash icon next to any entry

---

Development

# Install dependencies
npm install

# Watch mode (rebuilds on save)
npm run dev

# Production build
npm run build

Creating a release

Releases are built and published automatically via GitHub Actions on every version tag:

git tag v1.0.0
git push origin v1.0.0

The pipeline will:

1. Install dependencies
2. Run the production build
3. Update the version in manifest.json
4. Create a GitHub Release with main.js, manifest.json and styles.css attached

---

Notes

• Images are loaded directly from the URL you provide — make sure the URL is publicly accessible and stable
• The plugin stores icon assignments per file/folder path in your vault's plugin data (data.json)
• Renaming or moving a file/folder automatically migrates the icon to the new path

---

License

MIT © Philipp Geuer-Pollmann