Snippet for adding folder and notes icons to Obsidian files container

obsidian-icons.css

body {
    --icon-size: 18px;
    --icon-gap: 8px;
    --title-padding-left: calc(var(--icon-size) + var(--icon-gap));

    --nav-folder-icon-color: currentColor;
    --nav-file-icon-color: currentColor;

    /* Use Obsidian accent color for the icons
    --nav-folder-icon-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    --nav-file-icon-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    */
}

.tree-item-self.nav-folder-title {
    padding-inline-start: 12px;
}

.nav-files-container .tree-item-icon.collapse-icon {
    display: none;
}

.nav-files-container .tree-item-children {
    border-left: none;
    box-shadow: none;
    background-image: none;
}


.nav-files-container .tree-item-self.nav-folder-title,
.nav-files-container .tree-item-self.nav-file-title {
    padding-inline-start: 12px;
}

.nav-folder-title-content, 
.nav-file-title-content {
    position: relative;
    padding-left: var(--title-padding-left);
    display: block;
}

.nav-folder-title-content::before, 
.nav-file-title-content::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0;
}

.nav-files-container .tree-item.nav-folder>.tree-item-self .nav-folder-title-content::before {
    content: "";
    display: inline-block;
    width: var(--icon-size);
    height: var(--icon-size);
    margin-right: var(--icon-gap);
    vertical-align: -3px;
    background-color: var(--nav-folder-icon-color);

    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/></svg>") center / contain no-repeat;
}

.nav-files-container .tree-item.nav-folder:not(.is-collapsed)>.tree-item-self .nav-folder-title-content::before {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2'/></svg>") center / contain no-repeat;
}

.nav-files-container .tree-item.nav-file>.tree-item-self .nav-file-title-content::before {
    content: "";
    display: inline-block;
    width: var(--icon-size);
    height: var(--icon-size);
    margin-right: var(--icon-gap);
    vertical-align: -2px;
    background-color: var(--nav-file-icon-color);

    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2v4'/><path d='M12 2v4'/><path d='M16 2v4'/><rect width='16' height='18' x='4' y='4' rx='2'/><path d='M8 10h6'/><path d='M8 14h8'/><path d='M8 18h5'/></svg>") center / contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 2v4'/><path d='M12 2v4'/><path d='M16 2v4'/><rect width='16' height='18' x='4' y='4' rx='2'/><path d='M8 10h6'/><path d='M8 14h8'/><path d='M8 18h5'/></svg>") center / contain no-repeat;
}

Some comments looking through this snippet briefly:

1. Try to use body instead of :root, unless you have a specific reason to. Most of Obsidian's CSS variables are scoped under body
2. !important is not good practice

that being said, the snippet does work well enough :D

@bladeacer Thanks for the tips, I updated the file :D

I also fixed the slight text alignment issue

Thank you! It adds a nice touch to the UI.

Thanks for this snippet—it really significantly changed the look of my Obsidian tree, making everything much clearer.
I'm not an expert on this subject, so—speaking from a place of ignorance—I'd like to ask a question: is it possible to change the color of the icons? Thank you!!

@cagnese You're welcome! I added 2 variables to customize the colors of both the folder and file icons: --nav-folder-icon-color and --nav-file-icon-color.

If you want to use Obsidian's accent color, you need to uncomment the section "Use Obsidian accent color for the icons", otherwise you can just set a custom color like this: --nav-file-icon-color: red.