Obsidian Icons Plugin – Use Icons in your Obsidian Notes

[dc17]

Obsidian Icons Plugin

IMPORTANT: As this is an experimental version, this plugin cannot (yet) be installed via community plugins from within Obsidian, but must be manually downloaded and activated (see the repository README for more information).

Hi everybody, I just completed a first experimental version of an Icons Plugin for Obsidian. I’m currently looking for beta-testers to provide feedback.

The plugin supports the following icon sets:

• Remix Icon - 2172 icons
• FontAwesome - 1560 icons
• Roadmap includes more icon sets

You can toggle which icon set(s) you want to display in the icon picker from within the Icons Plugin settings.

Screenshots

Select any icon from the icon picker (selectively activate icon packs in the settings).

The rendered markdown will display the icons accordingly.

Repository: Obsidian Icons Plugin on GitHub

Contribute / support development

• Post your ideas for additional features and functionality in this thread
• Test this plugin (manual installation necessary as for now) and report your bugs by opening an issue in the GitHub repository
• Star the repository on GitHub to help others discover it

If you want to get notified for updates when I release a new version of this plugin, feel free to follow me on Twitter.

Let me know what you think, I’m curious to hear your thoughts!

[atomicnyx]

This plugin looks amazing! I am super excited to see where this goes. One of the downsides to MD in my opinion is that it can be a bit plain- but this would really help.

[den]

• MaOS
• Lates Obsidian
• Manual install

After enabling the plugin in Obsidian Plugin section the error will apper with no mor information: “Error installing the plugin”

[dc17]

Thank you for your feedback @den, glad you found it interesting and tried to install it! Did you transpile the typescript source with the respective commands? yarn and then npm run dev? If yes, please feel free to provide more information regarding runtime errors in the Developer Console.

Currently, no compiled version is provided since it’s an experimental plugin and I would like to get some feedback – ideally from other plugin developers or people with experience – before it is released. Thanks for your understanding!

[den]

I just followed tutorial for manual copy of the files without yarn and npm run dev as this is not under manual installation steps

But I’m on Mac OS and there are not such commands, or at least I don’t have required libraries.

[dc17]

Hi @den, after more testing the plugin in my own vault, I’ve just released version 0.2.1. You can download the three files (main.js, manifest.json, versions.json) from https://github.com/visini/obsidian-icons-plugin/releases/latest and place them in your vault’s plugin folder: YourVault/.obsidian/plugins/obsidian-icons-plugin/ (create the folder obsidian-icons-plugin if it does not yet exist). Then, reload obsidian and activate it via Third-Party Plugins settings.

Let me know how it goes! I’d be glad to assist you in getting this working so you can provide some feedback.

[dc17]

Update: As of version 0.2.2 you can install the plugin via Obsidians Plugin Settings (without manually installing files). Just search for “Icons Plugin” - then install and activate it!

I’m curious to hear your feedback. If you find any bugs, kindly report them by creating an issue on GitHub.

[laughingmaus]

Yesterday, https://iconduck.com/ waddled across my screen and I immediately wondered if you had also heard of it @dc17? They have collected and tagged 108,000 free and open source icons plus made an api for accessing them.

I don’t know if this speaks to you but, well, there it is. Thank you very much for making such a fun-to-use plugin!

[dcb]

Future idea for you to consider… adding ability for registered FontAwesome users to get the full set of fonts.

[fredini]

Hi, and thank your for creating this plugin.
I was indeed saying that Obsidian was lacking a bit of flavour.
I installed it via Obsidian community plugins.

I am used to use the font awesome ones : I tried several ones and only 2 get picked up.
Is there a way to check the actual list or is it dynamically selected?

FAS

Icon	Rendering
Bookmark	fas:Bookmark = OK
Gamepad	fas:Gamepad = OK
Diamond	fas:Diamond = KO
Graduation-cap	fas:Graduation-cap = KO
Folder	fas:Folder = KO
Lightbulb-o	fas:Lightbulb-o = KO

Also what is the command to get the pop-up to open for selection of the icons? I could only type in your examples
(am on Windows 7)
thanks

[Klaas]

@fredini: Ctrl+P = command palette.

[fredini]

@Klaas
Thanks! sorry am new

@dc17
interesting thing now is the conflict with the 2 new plugins I just installed yesterday (funny synchronicity): they both have the same command!

Url to iframe:

Icons:

I deactivated url to preview and could now use the icon plugin properly and with fas and far I can see now what is available (some I expected are not but that’s fine)

Great plugin , thanks

[fredini]

@dc17
Just published my first notes to Obsidian publish and the icons are not picked up.
The note display the code instead of the icon.

Help, please

[dc17]

Hi @fredini, glad you find the plugin useful. Unfortunately, the current version does not support Obsidian Publish; icons only work locally (in the Obsidian app). I would have to look into it some more to figure out what needs to be done. I’ve created an issue for this enhancement in the GitHub repository.

[den]

When using it infront of heading, example:

# fas:CommentsWords of Affirmation

This will appear in heading overview:

This is “destroying” the overview of heading… why the icon is not ignored when picking up the heading text?

[Ampa]

Thanks for the great plugin.

Is it possible to show the icon in edit mode, where I spend 95% of my time?

[joeweb]

That would be really great!
I’m using

https://forum.obsidian.md/t/typora-like-custom-css/12822

and it provides a good “typora-like” solution, but not for the icons.

[artk47]

What an awesomeness! Great! Thanks!

I’m missing how to handle icons into mermaid flowcharts (where it is originally supported to)?

The notation that works for headings doesn’t work for mermaid, please advise!

## `fas:User`flowchart

```mermaid
flowchart LR
    user1[`fas:User` User 1] -- edit --> folder
```

[artk47]

It turned out the different syntax is used in mermaid:

		graph LR
		user("fa:fa-user") -- go --> home(home)

It works on hackmd, but still not rendered in Obsidian

[daggers]

is there a way to use this in folder names? or only within the inline text of the note?