Insanely Niche Icon Mystery

Custom CSS & Theme Design
1

Hi, I was looking into the Border theme and noticed something interesting in their example screenshots:

Look at the left sidebar (example 1, example 2, example 3). Notice how these icons:

  • Have up to 3 colors (border, foreground, background) that all adapt to the particular color scheme
  • Don’t seem to come from any of the standard icon libraries (FontAwesome, BoxIcons, etc.)…especially the text file icon, which I’ve never seen before.

If you install the Border theme yourself, it’ll add folder and file icons to your file explorer automatically. But they’re your standard single-color icons, nothing as fancy as what you see in the theme screenshots.

I’ve tried contacting the theme creator directly via GitHub (no response), posting on Reddit (no good answers), and trying literally every community plugin for adding file explorer icons (no luck). Posting here is truly my last-ditch effort before I accept this as an unsolvable mystery of the universe.

Anyone know how to get these specific icons into Obsidian?

2

That effect is created with SVG icons that have fills with a level of transparency - then when you apply the theme colour, you get the varying levels of “shading” against the background. Phosphor Duotone Icons Collection - SVG Repo is an example of an icon set built like this (found on a quick random google).

That’s the “how” of achieving it. Unfortunately I cant help you with the specific icon set in the screenshots (can’t find it from just the file/folder icon examples), and the CSS of the theme has no clues. The SVG icons are embedded directly and are just paths, so no clues there. If you did find the set, then you would have to replace each of the embedded SVGs and then make sure the CSS applies the theme colour to both line and fill (a bit of work, but doable). First though, I think you’re going to need the developer to point you at the icon set…

3

I’m going to move this to the custom CSS and theme category. Good luck!

4

Just to clarify, did you also install the style settings plugin as directed in the GitHub link you provided?

Create your own UI style using style settings plugin. Here are some presets: …

I know my Blue Topaz theme is much fancier once I installed this additional community plugin.

1 Like
5

FsOver2, I was thinking the same about maybe Style Settings being involved.

Does Border have a demo vault anywhere to download? That might be worth checking into.

1 Like
6

Yup, I tried all the Style Settings options and no luck unfortunately.