I’ve recently started using Trilium Notes as my note-taking/knowledge-base application. It’s not the best looking application of this type out there, but since it’s quite flexible in terms of customization there’s a lot we can do to make it look better.

Trilium displays notes in a hierarchical tree on it’s side bar. Each item has an icon and this icon can be customized via the #iconClass attribute inside each note. By default, Trilium uses the icons from Boxicons.

But what if you want more? What if you want emojis, like it’s possible with Notion? It turns out it’s very easy to do that:

  1. First, add a new note of the type CSS and set its content to:
@import "https://emoji-css.afeld.me/emoji.css";
  1. Add the #appCss attribute to the node. This will make Trilium load the CSS of this note in every request
  2. With this done, it should now be possible to use any of the classes from Emoji CSS as an icon via the #iconClass attribute. For example, to use the poo emoji you can add this to your note: #iconClass="em em-hankey".

Here’s an example of how your notes tree can look like:

Trilium notes with emojis as icons!