Adding Icons To Obsidian's File Explorer

There are plugins available for adding icons to the Obsidian file-explorer, but I decided not to use them for two reasons:

  1. I'm trying to maintain a "plugin diet", on the grounds that the more plugins I add to Obsidian, the more likely I will hit problems related to incompatibility and performance
  2. The plugins I tried, although mostly functional, were nonetheless buggy.

Instead, it is possible to decorate the file-explorer with plugins using nothing other than CSS, via the Obsidian CSS "snippets" feature, and the standard set of Unicode emoji characters. This appeals to me because it avoids the need for a plugin just for what is largely a cosmetic concern.

There are two ways to add emoji to files:

Adding icons to explicitly named files/folders

The image shows files and folders in the root of my Obsidian vault, followed by the CSS needed to decorate them with emoji.

screen shot of files and folders in an Obsidian vault

.nav-folder-title-content::before, .nav-file-title-content::before {margin-right: 3px;}

.nav-file-title[data-path = ""] .nav-file-title-content::before {content: '📋';}  
.nav-folder-title[data-path = "Inbox"] .nav-folder-title-content::before {content: '⬇️';}  
.nav-folder-title[data-path = "Clippings"] .nav-folder-title-content::before {content: '📰';}  
.nav-folder-title[data-path = "Diary"] .nav-folder-title-content::before {content: '📆';}  
.nav-folder-title[data-path = "Work"] .nav-folder-title-content::before {content: '👨🏼‍💻';}  
.nav-folder-title[data-path = "Home"] .nav-folder-title-content::before {content: '🏠️';}  
.nav-folder-title[data-path = "Personal"] .nav-folder-title-content::before {content: '👤';}  
.nav-folder-title[data-path $= "Reference"] .nav-folder-title-content::before {content: '🗄️';}  
.nav-folder-title[data-path = "Zettelkasten"] .nav-folder-title-content::before {content: '🧠';}  
.nav-folder-title[data-path = "Blog"] .nav-folder-title-content::before {content: '🌍';}  
.nav-folder-title[data-path = "Indexes"] .nav-folder-title-content::before {content: '📜️';}  
.nav-folder-title[data-path = "config"] .nav-folder-title-content::before {content: '⚙️';}

Adding icons to files/folders by pattern

It is also possible to decorate file/folder names in the Obsidian file-explorer using CSS selectors, like this:

.nav-folder-title[data-path $= "archive"] .nav-folder-title-content::before {content: '️🏛️';}
.nav-file-title[data-path $= ""] .nav-file-title-content::before {content: '️☑️';}

The first CSS rule decorates any folder path that ends with ('$=') the word "archive", while the second decorates any file which ends with "". These rules apply to any matching folder/file, at any level in the vault.

This is actually quite useful - I generally add a note to my project folders called "Tasks" - and having an icon automatically added to the filename makes it easier to immediately locate in a potentially long list of files.

If you would like to leave a comment - or read other comments - please go to this Mastodon post.