How to auto add icon to folders and notes?

[andy4222]

Hi friends, I was hoping for a functionality where Obsidian shows icon for folders and notes. I tried the Icon-Folder extension but seems I had to manually add icons to every note and folder with that.

I just need something simple that adds a folder icon to folders and a note icon to notes so its easy to distinguish.

[PR-C]

I don’t know of anything that will automagically do this for you on folders. For files, you can use emojis as part of a filename which can help you manage that a bit easily?

[CawlinTeffid]

Did you search the forum? This sounds like something that might have been asked and answered before.

If no plugin will do it, a CSS snippet should work. I don’t know enough to help, but if you don’t get an answer here, try the very helpful #appearance channel of Obsidian’s Discord.

I believe some themes include File Explorer icons, or options to add them.

[holroy]

@andy4222

I just need something simple that adds a folder icon to folders and a note icon to notes so its easy to distinguish.

Would something like the following work for you:

.nav-folder .nav-folder-title-content:before {
  content: "\1F4C2"; /* open folder character  */
  padding-right: 8px;
}

.nav-folder.is-collapsed .nav-folder-title-content:before {
  content: "\1F4C1" ;    
  padding-right: 8px;
}

.nav-file-title-content:before {
  content: "\1F5D2";
  padding-right: 8px;
}

This shows as the following in my test vault:

If you like that, save the CSS above into something like vault/.obsidian/snippets/folderIcon.css, and enable that css under Settings > Appearance (CSS snippets) > folderIcon.css.

If your font doesn’t like those unicode character, replace them with something of your liking.