I installed colorful icons. #4604

WantToLearnJapanese · 2024-01-25T04:24:06Z

WantToLearnJapanese
Jan 25, 2024

RPReplay_Final1706156512.mov

rodrigoalexandrecosta · 2024-01-25T13:52:18Z

rodrigoalexandrecosta
Jan 25, 2024

Can you share how you did it?

1 reply

WantToLearnJapanese Jan 25, 2024
Author

Let me share the clean version on this weekend.

note name: example custom_icons.css attributes:#appCss

/* https://isotropic.co/tool/hex-color-to-css-filter/ */
.hs-filter-red2 {
    filter: invert(17%) sepia(83%) saturate(4009%) hue-rotate(346deg) brightness(107%) contrast(86%);
    background-color: transparent!important;
}
.hs-filter-blue2 {
    filter: invert(61%) sepia(67%) saturate(813%) hue-rotate(177deg) brightness(96%) contrast(94%);
    background-color: transparent!important;
}
.hs-filter-green2 {
    filter: invert(61%) sepia(76%) saturate(6727%) hue-rotate(100deg) brightness(104%) contrast(75%);
    background-color: transparent!important;
}
.hs-filter-pink2 {
    filter: invert(1) grayscale(100%) sepia(300%) hue-rotate(200deg) brightness(80%) saturate(1000%);
    background-color: transparent!important;
}

.hs{
    height:1.0em;
    width:1.0em;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
    display:inline-block;
    vertical-align:middle;
    line-height:1;
}

.hs-bg-white{
    background-color: white!important;
    border-radius: 3px;
}

.hs-bg-blue{
    background-color: #8080ff!important;
    border-radius: 3px;
}

.hs-bg-black{
    background-color: #000000!important;
    border-radius: 3px;
}

.hs-invert{
    filter:invert(var(--hs-invert-factor))!important;
    background-color: transparent!important;
}


.hs-filter-red{
    filter: grayscale(100%) sepia(100%) hue-rotate(320deg) saturate(800%) brightness(300%);
    background-color: transparent!important;
}

.hs-filter-blue{
    filter: grayscale(100%) sepia(100%) hue-rotate(160deg) saturate(800%) brightness(300%);
    background-color: transparent!important;
}

.hs-filter-green{
    filter: grayscale(100%) sepia(100%) hue-rotate(90deg) saturate(800%) brightness(300%);
    background-color: transparent!important;
}

.hs-filter-yellow {
    filter: grayscale(100%) sepia(100%) hue-rotate(20deg) saturate(800%) brightness(500%);
    background-color: transparent!important;
}

.hs-filter-orange {
    filter: grayscale(100%) sepia(100%) hue-rotate(10deg) saturate(800%) brightness(350%);
    background-color: transparent!important;
}

.hs-filter-purple {
    filter: grayscale(100%) sepia(100%) hue-rotate(220deg) saturate(300%) brightness(300%);
    background-color: transparent!important;
}

.hs-filter-pink {
    filter: grayscale(100%) sepia(100%) hue-rotate(260deg) saturate(300%) brightness(500%);
    background-color: transparent!important;
}

.launcher-button.hs {
    height:0.1em!important;
    padding: 0.4em 0.4em!important;
    margin:0.0em 0.0em 1.0em 0.0em!important;
}

.note-icon-widget > .note-icon.hs {
    margin-left:0.2em!important;
    margin-top:0.2em!important;
}

.note-book-header > .note-icon.hs {
    margin-right:7px!important;
    margin-bottom:0.4em!important;
}

.note-tab-icon.hs {
    margin-right:7px!important;
}

.hs-7z{background-image:url("/custom/hs/7z.svg");}
.hs-adidas2{background-image:url("/custom/hs/adidas2.svg");}
.hs-adidas{background-image:url("/custom/hs/adidas.svg");}

note name: updates_css_custom_icons.js type: javascript(backend)

async function updateCss(
    customPath,
    iconName,
    cssNote,
    cssClassPrefix
){
    let css = cssNote.getContent();
    
    css += `
.${cssClassPrefix}-${iconName}{background-image:url("/custom/${customPath}");}`;
    cssNote.setContent(css);
}

function getCssAncestor(imgNote) {
    var parentNote = imgNote.getParentNotes()[0];
    while (!parentNote.hasRelation("customClassCss") || !parentNote.hasLabel("customClassPrefix"))
        parentNote = parentNote.getParentNotes()[0];
    return parentNote;
}

async function handleNoteEvent(noteId) {
    const note = api.getNote(noteId);
    const noteTitle = note.title;
    
    if (note.type != "image")
        return;
    
    // console.log("icons-svg-run...", noteId, noteTitle);
    
    const iconName = noteTitle.split(".")[0];
    
    const ancestorNote = getCssAncestor(note);
    const cssNote = ancestorNote.getRelation("customClassCss").getTargetNote();
    const cssClassPrefix = ancestorNote.getLabel("customClassPrefix").value;
    
    const customResourcePath = `${cssClassPrefix}/${noteTitle}`;
    
    note.setLabel("customResourceProvider", customResourcePath);
    note.removeLabel("originalFileName");
    
    await api.runOutsideOfSync(async ()=>{
        updateCss(
            customResourcePath, 
            iconName,
            cssNote,
            cssClassPrefix
        );
    });
}

const originNoteId = api.originEntity?.noteId;
if (originNoteId) {
    handleNoteEvent(originNoteId);
} else {
    console.log("No originating note found");
}

note name: images type:anything is fine attributes:#child:archived #child:child:archived #sorted(inheritable) #customClassPrefix=hs ~runOnChildNoteCreation(inheritable)=[updates_css_custom_icons.js] ~customClassCss=[custom_icons.css]

How to use it

Set three notes as guided. Note that for images note you should manually set relations to according notes.
In images note, import images as subnotes by imort files. You can make non image subnotes under images note. before you import, set appropriate name for images files not to include whitespaces.
Now you can set custom note icons by setting the label likes #iconClass="hs hs-adidas". You should refresh Trilium to load CSS

Nriver · 2024-01-29T03:37:28Z

Nriver
Jan 29, 2024
Collaborator

It looks great!

0 replies

TheBig-O · 2026-03-02T03:19:32Z

TheBig-O
Mar 2, 2026

With the update to 0.102.0, this script doesn't seem to work anymore. I don't see any errors in the console and I can't really figure out what's going on. The tree shows icons with question marks, but when you click on a note with sub-notes, all the sub-notes show their correct icon in the main window.
Any ideas what is going on with the tree?

3 replies

Nriver Mar 2, 2026
Collaborator

The mechanism for displaying icons might have changed with the introduction of the new icon pack feature. I just discovered this Emoji Icon Pack, which looks great in version 0.102.0: https://github.com/hulmgulm/trilium-icons

adoriandoran Mar 2, 2026
Maintainer

Yes, starting with 0.102.0, a fallback mechanism was introduced to gracefully handle icons from missing icon packs.

A question mark now appears by default if the content property of .fancytree-custom-icon::before is not set, which happens when the specified icon class is not available.

Also, the box size of .fancytree-custom-icon is set to a 1em square to preserve a consistent alignment within the tree.

This is done purely in CSS, so no error will be logged in the console.

adoriandoran Mar 2, 2026
Maintainer

The CSS needs to be updated to override the fallback icon:

/* https://isotropic.co/tool/hex-color-to-css-filter/ */
.hs-filter-red2 {
    filter: invert(17%) sepia(83%) saturate(4009%) hue-rotate(346deg) brightness(107%) contrast(86%);
    background-color: transparent!important;
}
.hs-filter-blue2 {
    filter: invert(61%) sepia(67%) saturate(813%) hue-rotate(177deg) brightness(96%) contrast(94%);
    background-color: transparent!important;
}
.hs-filter-green2 {
    filter: invert(61%) sepia(76%) saturate(6727%) hue-rotate(100deg) brightness(104%) contrast(75%);
    background-color: transparent!important;
}
.hs-filter-pink2 {
    filter: invert(1) grayscale(100%) sepia(300%) hue-rotate(200deg) brightness(80%) saturate(1000%);
    background-color: transparent!important;
}

.hs{
    height:1.0em;
    width:1.0em;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
    display:inline-block;
    vertical-align:middle;
    line-height:1;
}

/* Remove the question mark as a fallback icon */
.hs::before{
    display: none;
}

.hs-bg-white{
    background-color: white!important;
    border-radius: 3px;
}

.hs-bg-blue{
    background-color: #8080ff!important;
    border-radius: 3px;
}

.hs-bg-black{
    background-color: #000000!important;
    border-radius: 3px;
}

.hs-invert{
    filter:invert(var(--hs-invert-factor))!important;
    background-color: transparent!important;
}


.hs-filter-red{
    filter: grayscale(100%) sepia(100%) hue-rotate(320deg) saturate(800%) brightness(300%);
    background-color: transparent!important;
}

.hs-filter-blue{
    filter: grayscale(100%) sepia(100%) hue-rotate(160deg) saturate(800%) brightness(300%);
    background-color: transparent!important;
}

.hs-filter-green{
    filter: grayscale(100%) sepia(100%) hue-rotate(90deg) saturate(800%) brightness(300%);
    background-color: transparent!important;
}

.hs-filter-yellow {
    filter: grayscale(100%) sepia(100%) hue-rotate(20deg) saturate(800%) brightness(500%);
    background-color: transparent!important;
}

.hs-filter-orange {
    filter: grayscale(100%) sepia(100%) hue-rotate(10deg) saturate(800%) brightness(350%);
    background-color: transparent!important;
}

.hs-filter-purple {
    filter: grayscale(100%) sepia(100%) hue-rotate(220deg) saturate(300%) brightness(300%);
    background-color: transparent!important;
}

.hs-filter-pink {
    filter: grayscale(100%) sepia(100%) hue-rotate(260deg) saturate(300%) brightness(500%);
    background-color: transparent!important;
}

.launcher-button.hs {
    height:0.1em!important;
    padding: 0.4em 0.4em!important;
    margin:0.0em 0.0em 1.0em 0.0em!important;
}

.note-icon-widget > .note-icon.hs {
    margin-left:0.2em!important;
    margin-top:0.2em!important;
}

.note-book-header > .note-icon.hs {
    margin-right:7px!important;
    margin-bottom:0.4em!important;
}

.note-tab-icon.hs {
    margin-right:7px!important;
}

.hs-7z{background-image:url("/custom/hs/7z.svg");}
.hs-adidas2{background-image:url("/custom/hs/adidas2.svg");}
.hs-adidas{background-image:url("/custom/hs/adidas.svg");}

Let me know if the problem is fixed.

TheBig-O · 2026-03-02T22:29:40Z

TheBig-O
Mar 2, 2026

Thank you for the clue as to how to fix this. I added a chunk of CSS at the end of the file that seems to have fixed it. By adding this to the bottom of custom_icons.css, I no longer see the question marks.
I apprecaite the clues.

/* ===================================================== */
/* TREE ICON FIX - KEEP AT VERY END OF FILE */
/* ===================================================== */

/* Remove the question mark as a fallback icon */
.hs::before {
    display: none !important;
}

/* Ensure HS icons render correctly in tree and headers */
.ztree li a .note-icon.hs,
#note-tree .note-icon.hs,
.tree-component .note-icon.hs,
.note-icon-widget > .note-icon.hs,
.note-book-header > .note-icon.hs,
.note-tab-icon.hs {
    height: 1.0em !important;
    width: 1.0em !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Trilium Next

I installed colorful icons. #4604

Uh oh!

{{title}}

Uh oh!

Replies: 4 comments 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Trilium Next

I installed colorful icons. #4604

Uh oh!

WantToLearnJapanese Jan 25, 2024

Replies: 4 comments · 4 replies

Uh oh!

rodrigoalexandrecosta Jan 25, 2024

Uh oh!

Uh oh!

WantToLearnJapanese Jan 25, 2024 Author

How to use it

Uh oh!

Nriver Jan 29, 2024 Collaborator

Uh oh!

TheBig-O Mar 2, 2026

Uh oh!

Nriver Mar 2, 2026 Collaborator

Uh oh!

adoriandoran Mar 2, 2026 Maintainer

Uh oh!

adoriandoran Mar 2, 2026 Maintainer

Uh oh!

TheBig-O Mar 2, 2026

WantToLearnJapanese
Jan 25, 2024

Replies: 4 comments 4 replies

rodrigoalexandrecosta
Jan 25, 2024

WantToLearnJapanese Jan 25, 2024
Author

Nriver
Jan 29, 2024
Collaborator

TheBig-O
Mar 2, 2026

Nriver Mar 2, 2026
Collaborator

adoriandoran Mar 2, 2026
Maintainer

adoriandoran Mar 2, 2026
Maintainer

TheBig-O
Mar 2, 2026