Iconic: Add icons & colors to your vault!

This is a plugin I’ve been working on for a month or two, so I could replace the emojis in my note titles with a more elegant icon system. It’s turned out pretty well! Iconic is a desktop & mobile friendly plugin for customizing a variety of icons around your vault.

You can use this plugin in lots of ways; native icons and emojis are supported everywhere, you can adjust their size and clickability, their colors can match the palette of your CSS theme, and you can even disable colors on-hover if your theme has colored highlights like Catppuccin.

Similar plugins include Iconize and MAKE.md. The goal of this plugin is to streamline the editing workflow to feel like a natural part of Obsidian.

Supported items:

  • Tabs
  • Files & Folders
  • Bookmarks & Groups
  • Properties
  • Ribbon commands
  • Sidebar toggles
  • Help & Settings buttons
  • (Tablets) Pin buttons

Installation: How to install this plugin using BRAT

This might be on the community browser in a week or two if it gets approved. Since this is my very first plugin release, I’d love to know what people think of the interface and usability. Don’t pull any punches :slight_smile:

9 Likes

Update: It’s now available inside Obsidian! New updates will be posted in this thread, on Discord, and on Reddit for major updates.

You can report any bugs on GitHub, or just message me anywhere.

3 Likes

Thank you, love the way this is implemented. Very slick and easy UI. Some options not covered by Iconize. I’m already in love with my color coded bookmarks and properties.

Question, is it at all possible to insert icons into properties fields themselves? The most obvious use case is rating stars, but I can see myself using it more widely if it is possible.

1 Like

Hey, thanks for your feedback! There isn’t a way to insert icons inside properties at the moment… but I do really like that suggestion. I’ve started a feature request to keep it on the roadmap.

This might be something I’ll look into closer to version 1.2 or 1.3? :star2:

1 Like

Patch 1.0.10 is out today, and completes the support for bookmark icons:

New features:

  • Heading bookmarks: now support custom icons :alien:
  • Block bookmarks: now support custom icons :brick:
  • Search bookmarks: now support custom icons :mag:
  • Graph bookmarks: now support custom icons :bar_chart:

Bugfixes:

  • Icon picker: the Reset color button no longer shoves the color bubble aside (on desktop & tablet)
  • Tabs added by plugins: now display their own default icon, instead of a 📄 icon
  • Icons added by plugins:
    • now appear in search results more reliably
    • now change colors more reliably

Note: Iconic now controls icon colors using style instead of stroke , so depending on your theme/snippets, there could be new edge cases where the colors don’t work. Report any compatibility issues :]

4 Likes

You can update to 1.0.11 today if you’ve paid your internet bill. This update adds some quality-of-life features around the UI, like showing icons on ribbon-related menus, the dropdown tab list, and most drag-and-drop tooltips:

New features:

  • Custom icons are now reflected in these menus:
    • Ribbon context menu :ribbon:
    • Ribbon settings :ribbon:
    • Tab switcher :clipboard:
  • These items now show their custom icons when dragged:
    • Tabs
    • Files
    • Bookmarks

Bugfixes:

  • Markdown tabs: now show their tab icon if any color has been set

Iconic just passed 2,000 community downloads :tada: You’re the people motivating these updates, so thank you!

2 Likes

Double patch notes today, because I was :fist_right: pretty sick :fist_left: last week.

These are the last updates I wanted to share before Iconic 1.1 is ready sometime in October. All of the basic features are complete now, but there’s a ton of new functionality coming to this plugin soon. Please look forward to it :sparkles:

1.0.12

New features:

  • Folders just got a lot more customizable!
    • Folder icons now appear after their folder arrows by default
    • You can toggle the original behavior by enabling Minimal folder icons
    • There’s a new Show all folder icons setting
    • Folders with default icons visually open when you expand them :open_file_folder:
  • Icon picker
    • Icon search results are slightly larger
    • Icon and emoji names now start with capital letters
    • Selected colors are now indicated with a checkmark :white_check_mark:
    • Tablets: The Remove and Emojis buttons are now on the same row
  • Miscellaneous
    • Added a Colorless drag setting, for themes where icon colors blend poorly with their drag ghosts
    • Localized the menus for English (GB) :coffee::crown::soccer:

Bugfixes:

  • Virtually all of the “black icon” color bugs in various themes are now fixed :rainbow:
  • Colorless settings are working again — forgot to test them after the color updates in 1.0.10

1.0.13

Bugfixes:

  • Folder icons in RTL languages: are now correctly reversed
  • Invalid colors in external CSS: should no longer break the icon picker

Theme support:

Verified compatibility with the top 50 community themes, and added special tweaks for 15 of them to help display icons & colors correctly (mainly in the Files and Bookmarks tabs):

The themes Ono Sendai and Pink Topaz aren’t supported, because they don’t work correctly in new versions of Obsidian.

1 Like

Big thankies to some diligent bug reporters for giving 1.0.14 a reason to exist. Always feel free to hit up the issues list and make some noise if any part of this plugin seems broken to you.

Bugfixes:

  • Tabs: File tabs should no longer have duplicate items on their context menus
  • Properties: Properties with uppercase letters will no longer break the icon picker

Visual fixes:

  • Icon picker: Color tooltips now change in real time when you scroll through colors with a mouse or keyboard
  • Icon picker (on phones): The Remove and Emojis buttons are now on the same row at the bottom, and a Cancel button has been added on top to match the Edit Bookmark dialog
  • Icon picker (on tablets): The Emojis button now sticks to the right side (or the left side in RTL languages)
1 Like

i mean that would bee a good idea an function that allows create a buttom with scripts, i have an routines that make push of my vault on the taskscheduler on windows, would be nice if i could turn theis script into button on lateral menu

Great plugin thanks!

My only frustration is with the search of the icons themselves. Below, some somplains with ideas that crossed my mind to solve them.

It would be great to be able to see more icons at a time, for instance by having several rows of them and/or by being able to expand the “change emoji” window.

Having to click on the button “icons” or “emojis” to switch is tedious, having two search bars or search them all at once would be nicer.

Maybe having some icons/emojis or the lucide categories shown right away? I often go to lucide looking for the right one and then come back to the plugin to enter the keywords.

I hope this feedback helps in any way, thanks for the plugin!

1 Like

I can’t find how to edit a message so I’ll just add that it would be nice to be able to add custom packs other than lucide. I prefer Iconic over iconize but it is one of the rare things I’m missing from it.

1 Like

Hi Skyy! Not super sure what you mean by this, but I don’t think Iconic will support a feature like button scripting any time soon. Meta Bind might be what you’re looking for instead?

I’ve been thinking about adding multiple rows to the icon picker - I just left it on the backburner while there were still bigger problems to fix. Planning to revisit this very soon.

These are great ideas! The icon picker always opens up in icon mode if you’re customizing an icon, and emoji mode if you’re customizing an emoji. I’ll include a third “mixed mode” in the next update, and a new setting to choose which of those three you prefer by default :]

That one’s a killer feature for Iconize, yeah. Custom packs are actually planned as a major update in the far future, but I’m queuing them behind several other big features, like customizable tags, automatic icon rules, colored folder backgrounds, etc. Hopefully it’ll be possible next year.

This is immensely valuable to me, thank you! :purple_heart: :purple_heart: :purple_heart:

1 Like

Thank you so much for this! is it possable to scroll through all icons rather than search on a name. Sometimes I like to browse…

1 Like

Not every icon at once, sorry! I haven’t designed a sane way to display that yet ᕙ(⇀‸↼‶)

You can bump the number of search results to something huge and try searching for single letters? That’ll show you up to 300 at once. There’s also the Lucide website which has a really good search engine, but unfortunately it includes icons that Obsidian hasn’t been updated with yet.

Hope this helps, and I’ve added it to the issues list :heart:

Like a bad haiku, with too many syllables, 1.0.15 is here to patch out a few more bugs before Halloween comes around. I think it has some actual features in it, too?

New features:

  • The ribbon menu on phones now supports customized icons! :rainbow: :fish:
    • You can edit them all from Settings > Appearance > Ribbon menu configuration
    • If you prefer a neutral-colored quick access button, use the new Colorless ribbon button setting
  • For people who manually install their plugins, Iconic now includes a convenient ZIP file with every new release :clamp:
    • (It’s the one labelled iconic-1.0.15.zip)

Bugfixes:

  • 1.7 only: Files inside folders are loading their icons correctly again
  • 1.7 only: Background tabs are loading their icons correctly again
  • Phones only: Icons in Ribbon menu configuration no longer vanish when you change your quick access button

Visual fixes:

  • Icon picker: “Grey” now has the correct spelling for en-GB language users
  • Icon picker: Some words in icon names are now capitalized more logically, like 3D, TV, and X
  • Icon picker: The Icons / Emojis button now changes its tooltip instantly when clicked
1 Like