diff --git a/apps/client/src/entities/fnote.ts b/apps/client/src/entities/fnote.ts
index f826231b8..4fcdbf806 100644
--- a/apps/client/src/entities/fnote.ts
+++ b/apps/client/src/entities/fnote.ts
@@ -582,6 +582,10 @@ export default class FNote {
     }
 
     getIcon() {
+        return `tn-icon ${this.#getIconInternal()}`;
+    }
+
+    #getIconInternal() {
         const iconClassLabels = this.getLabels("iconClass");
         const workspaceIconClass = this.getWorkspaceIconClass();
 
diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index ef5c83052..17e431e54 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -1796,7 +1796,7 @@ button.close:hover {
     display: none;
 }
 
-.reference-link .bx {
+.reference-link .tn-icon {
     position: relative;
     top: 1px;
     margin-inline-end: 3px;
@@ -2415,7 +2415,7 @@ footer.webview-footer button {
     gap: 5px;
 }
 
-.right-pane-tab .tab-title .bx {
+.right-pane-tab .tab-title .tn-icon {
     font-size: 1.1em;
 }
 
@@ -2543,18 +2543,11 @@ footer.webview-footer button {
     inset-inline-end: 10px;
 }
 
-.content-floating-buttons button.bx {
+.content-floating-buttons button.tn-icon {
     font-size: 130%;
     padding: 1px 10px 1px 10px;
 }
 
-/* Customized icons */
-
-.bx-tn-toc::before {
-    content: "\ec24";
-    transform: rotate(180deg);
-}
-
 /* CK Editor */
 
 /* Insert text snippet: limit the width of the listed items to avoid overly long names */
diff --git a/apps/client/src/stylesheets/theme-next/base.css b/apps/client/src/stylesheets/theme-next/base.css
index 1c67d648d..426c0fe62 100644
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -134,7 +134,7 @@ body.backdrop-effects-disabled {
     white-space-collapse: discard;
 }
 
-.dropdown-menu.tn-dropdown-menu .dropdown-item .bx {
+.dropdown-menu.tn-dropdown-menu .dropdown-item .tn-icon {
     margin-inline-end: 6px;
 }
 
@@ -249,7 +249,7 @@ html body .dropdown-item[disabled] {
 }
 
 /* Menu item icon */
-.dropdown-item .bx {
+.dropdown-item .tn-icon {
     translate: 0 var(--menu-item-icon-vert-offset);
     color: var(--menu-item-icon-color) !important;
     font-size: 1.1em;
@@ -496,7 +496,7 @@ li.dropdown-item a.dropdown-item-button {
     border: unset;
 }
 
-li.dropdown-item a.dropdown-item-button.bx {
+li.dropdown-item a.dropdown-item-button.tn-icon {
     color: var(--menu-text-color) !important;
 }
 
@@ -557,13 +557,13 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     padding-top: 0;
 }
 
-#toast-container .toast:not(.no-title) .bx {
+#toast-container .toast:not(.no-title) .tn-icon {
     margin-inline-end: 0.5em;
     font-size: 1.1em;
     opacity: 0.85;
 }
 
-#toast-container .toast.no-title .bx {
+#toast-container .toast.no-title .tn-icon {
     margin-inline-end: 0;
     font-size: 1.3em;
 }
@@ -754,7 +754,7 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     margin-bottom: 0;
 }
 
-.note-list-wrapper .note-book-card .bx {
+.note-list-wrapper .note-book-card .tn-icon {
     color: var(--left-pane-icon-color) !important;
 }
 
diff --git a/apps/client/src/stylesheets/theme-next/dialogs.css b/apps/client/src/stylesheets/theme-next/dialogs.css
index ffe6af9a5..613fb94f3 100644
--- a/apps/client/src/stylesheets/theme-next/dialogs.css
+++ b/apps/client/src/stylesheets/theme-next/dialogs.css
@@ -423,6 +423,6 @@ div.tn-tool-dialog {
     font-size: unset;
 }
 
-.note-type-chooser-dialog div.note-type-dropdown .dropdown-item span.bx {
+.note-type-chooser-dialog div.note-type-dropdown .dropdown-item span.tn-icon {
     margin-inline-end: .25em;
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/stylesheets/theme-next/forms.css b/apps/client/src/stylesheets/theme-next/forms.css
index 6de90a963..12f361c2f 100644
--- a/apps/client/src/stylesheets/theme-next/forms.css
+++ b/apps/client/src/stylesheets/theme-next/forms.css
@@ -62,10 +62,10 @@ button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel, .c
 }
 
 /* Button's icon */
-button.btn.btn-primary span.bx,
-button.btn.btn-secondary span.bx,
-button.btn.btn-sm span.bx,
-button.btn.btn-success span.bx {
+button.btn.btn-primary span.tn-icon,
+button.btn.btn-secondary span.tn-icon,
+button.btn.btn-sm span.tn-icon,
+button.btn.btn-success span.tn-icon {
     color: var(--cmd-button-icon-color);
     padding-inline-end: 0.35em;
     font-size: 1.2em;
diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css
index bf4e88f3d..5920ef0e9 100644
--- a/apps/client/src/stylesheets/theme-next/shell.css
+++ b/apps/client/src/stylesheets/theme-next/shell.css
@@ -497,7 +497,7 @@ div.bookmark-folder-widget .note-link:hover a {
 }
 
 /* The item's icon */
-div.bookmark-folder-widget .note-link .bx {
+div.bookmark-folder-widget .note-link .tn-icon {
     color: var(--menu-item-icon-color);
     font-size: 1.2em;
 }
diff --git a/apps/client/src/stylesheets/tree.css b/apps/client/src/stylesheets/tree.css
index c5de2c629..6b400315d 100644
--- a/apps/client/src/stylesheets/tree.css
+++ b/apps/client/src/stylesheets/tree.css
@@ -229,11 +229,11 @@ span.fancytree-node.archived {
     opacity: 0.6;
 }
 
-.fancytree-node:hover .bx.tree-item-button {
+.fancytree-node:hover .tn-icon.tree-item-button {
     display: inline-block;
 }
 
-.bx.tree-item-button {
+.tn-icon.tree-item-button {
     display: none;
     font-size: 120%;
     cursor: pointer;
@@ -243,7 +243,7 @@ span.fancytree-node.archived {
     border-radius: 5px;
 }
 
-.unhoist-button.bx.tree-item-button {
+.unhoist-button.tn-icon.tree-item-button {
     margin-inline-start: 0; /* unhoist button is on the left and doesn't need more margin */
     display: block; /* keep always visible */
 }
diff --git a/apps/client/src/widgets/FloatingButtonsDefinitions.tsx b/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
index 35dbc92ae..8bf02d96c 100644
--- a/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
+++ b/apps/client/src/widgets/FloatingButtonsDefinitions.tsx
@@ -142,7 +142,7 @@ function ShowTocWidgetButton({ note, noteContext, isDefaultViewMode }: FloatingB
 
     return isEnabled && <FloatingButton
         text={t("show_toc_widget_button.show_toc")}
-        icon="bx bx-tn-toc"
+        icon="bx bx-spreadsheet bx-rotate-180"
         onClick={() => {
             if (noteContext?.viewScope && noteContext.noteId) {
                 noteContext.viewScope.tocTemporarilyHidden = false;
diff --git a/apps/client/src/widgets/collections/geomap/index.css b/apps/client/src/widgets/collections/geomap/index.css
index 81039ba48..341dfb6fa 100644
--- a/apps/client/src/widgets/collections/geomap/index.css
+++ b/apps/client/src/widgets/collections/geomap/index.css
@@ -40,7 +40,7 @@
   z-index: -1;
 }
 
-.geo-map-container .leaflet-div-icon .bx {
+.geo-map-container .leaflet-div-icon .tn-icon {
   position: absolute;
   top: 3px;
   inset-inline-start: 2px;
diff --git a/apps/client/src/widgets/layout/Breadcrumb.css b/apps/client/src/widgets/layout/Breadcrumb.css
index 026eabda7..18f88ac0c 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.css
+++ b/apps/client/src/widgets/layout/Breadcrumb.css
@@ -35,7 +35,7 @@
         align-items: center;
         min-width: 0;
 
-        .bx {
+        .tn-icon {
             margin-inline: 6px;
         }
 
@@ -55,7 +55,7 @@
     .icon-action {
         font-size: .9rem !important;
 
-        .bxs-chevron-right {
+        &.breadcrumb-separator {
             transform: translateY(8%);
 
             &::before {
diff --git a/apps/client/src/widgets/layout/Breadcrumb.tsx b/apps/client/src/widgets/layout/Breadcrumb.tsx
index 3809cc352..8c393f9da 100644
--- a/apps/client/src/widgets/layout/Breadcrumb.tsx
+++ b/apps/client/src/widgets/layout/Breadcrumb.tsx
@@ -191,7 +191,7 @@ function BreadcrumbSeparator(props: BreadcrumbSeparatorProps) {
         <Dropdown
             text={<Icon icon="bx bxs-chevron-right" />}
             noSelectButtonStyle
-            buttonClassName="icon-action"
+            buttonClassName="icon-action breadcrumb-separator"
             hideToggleArrow
             dropdownContainerClassName="tn-dropdown-menu-scrollable breadcrumb-child-list"
             dropdownOptions={{  popperConfig: { strategy: "fixed", placement: "top" } }}
diff --git a/apps/client/src/widgets/layout/StatusBar.css b/apps/client/src/widgets/layout/StatusBar.css
index 727801148..c421c3d65 100644
--- a/apps/client/src/widgets/layout/StatusBar.css
+++ b/apps/client/src/widgets/layout/StatusBar.css
@@ -9,7 +9,7 @@
         background-color: var(--left-pane-background-color);
         padding-inline: 0.25em;
         font-size: 0.85em;
-        
+
         > .breadcrumb {
             flex-grow: 1;
             --icon-button-size: 23px;
@@ -104,7 +104,7 @@
                 /* Note path card */
                 li {
                     --border-radius: 6px;
-                    
+
                     position: relative;
                     background: var(--card-background-color);
                     padding: 8px 20px 8px 25px;
@@ -120,7 +120,7 @@
                     & + li {
                         margin-top: 2px;
                     }
-                    
+
                     /* Current path arrow */
                     &.path-current::before {
                         position: absolute;
@@ -180,7 +180,7 @@
                 &:last-child {
                     border-radius: 0 0 var(--border-radius) var(--border-radius);
                 }
-                
+
                 /* Card header */
                 & > span:first-child {
                     display: block;
@@ -202,7 +202,7 @@
                         }
 
                         /* Note icon */
-                        > .bx {
+                        > .tn-icon {
                             color: var(--menu-item-icon-color);
                         }
 
diff --git a/apps/client/src/widgets/note_title.css b/apps/client/src/widgets/note_title.css
index ebc6ec33e..50be6afc7 100644
--- a/apps/client/src/widgets/note_title.css
+++ b/apps/client/src/widgets/note_title.css
@@ -92,7 +92,7 @@ body.experimental-feature-new-layout {
                 height: var(--size);
                 padding: 0;
 
-                .bx {
+                .tn-icon {
                     opacity: 1;
                     margin: 0;
                 }
diff --git a/apps/client/src/widgets/note_tree.ts b/apps/client/src/widgets/note_tree.ts
index c5ee99d86..0a907895c 100644
--- a/apps/client/src/widgets/note_tree.ts
+++ b/apps/client/src/widgets/note_tree.ts
@@ -1,38 +1,39 @@
-import hoistedNoteService from "../services/hoisted_note.js";
-import treeService from "../services/tree.js";
-import utils from "../services/utils.js";
-import contextMenu from "../menus/context_menu.js";
-import froca from "../services/froca.js";
-import branchService from "../services/branches.js";
-import ws from "../services/ws.js";
-import NoteContextAwareWidget from "./note_context_aware_widget.js";
-import server from "../services/server.js";
-import noteCreateService from "../services/note_create.js";
-import toastService from "../services/toast.js";
-import appContext, { type CommandListenerData, type EventData } from "../components/app_context.js";
-import keyboardActionsService from "../services/keyboard_actions.js";
-import clipboard from "../services/clipboard.js";
-import protectedSessionService from "../services/protected_session.js";
-import linkService from "../services/link.js";
-import options from "../services/options.js";
-import protectedSessionHolder from "../services/protected_session_holder.js";
-import dialogService from "../services/dialog.js";
-import shortcutService from "../services/shortcuts.js";
-import { t } from "../services/i18n.js";
-import type FBranch from "../entities/fbranch.js";
-import type LoadResults from "../services/load_results.js";
-import type FNote from "../entities/fnote.js";
-import type { NoteType } from "../entities/fnote.js";
-import type { AttributeRow, BranchRow } from "../services/load_results.js";
-import type { SetNoteOpts } from "../components/note_context.js";
-import type { TouchBarItem } from "../components/touch_bar.js";
-import type { TreeCommandNames } from "../menus/tree_context_menu.js";
 import "jquery.fancytree";
 import "jquery.fancytree/dist/modules/jquery.fancytree.dnd5.js";
 import "jquery.fancytree/dist/modules/jquery.fancytree.clones.js";
 import "jquery.fancytree/dist/modules/jquery.fancytree.filter.js";
 import "../stylesheets/tree.css";
 
+import appContext, { type CommandListenerData, type EventData } from "../components/app_context.js";
+import type { SetNoteOpts } from "../components/note_context.js";
+import type { TouchBarItem } from "../components/touch_bar.js";
+import type FBranch from "../entities/fbranch.js";
+import type FNote from "../entities/fnote.js";
+import type { NoteType } from "../entities/fnote.js";
+import contextMenu from "../menus/context_menu.js";
+import type { TreeCommandNames } from "../menus/tree_context_menu.js";
+import branchService from "../services/branches.js";
+import clipboard from "../services/clipboard.js";
+import dialogService from "../services/dialog.js";
+import froca from "../services/froca.js";
+import hoistedNoteService from "../services/hoisted_note.js";
+import { t } from "../services/i18n.js";
+import keyboardActionsService from "../services/keyboard_actions.js";
+import linkService from "../services/link.js";
+import type LoadResults from "../services/load_results.js";
+import type { AttributeRow, BranchRow } from "../services/load_results.js";
+import noteCreateService from "../services/note_create.js";
+import options from "../services/options.js";
+import protectedSessionService from "../services/protected_session.js";
+import protectedSessionHolder from "../services/protected_session_holder.js";
+import server from "../services/server.js";
+import shortcutService from "../services/shortcuts.js";
+import toastService from "../services/toast.js";
+import treeService from "../services/tree.js";
+import utils from "../services/utils.js";
+import ws from "../services/ws.js";
+import NoteContextAwareWidget from "./note_context_aware_widget.js";
+
 const TPL = /*html*/`
 <div class="tree-wrapper">
     <style>
@@ -242,7 +243,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                     e.preventDefault();
 
                     appContext.tabManager.openTabWithNoteWithHoisting(notePath, {
-                        activate: e.shiftKey ? true : false
+                        activate: !!e.shiftKey
                     });
                 }
             }
@@ -402,7 +403,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                     } else if (ctrlKey) {
                         const notePath = treeService.getNotePath(node);
                         appContext.tabManager.openTabWithNoteWithHoisting(notePath, {
-                            activate: event.shiftKey ? true : false
+                            activate: !!event.shiftKey
                         });
                     } else if (event.altKey) {
                         node.setSelected(!node.isSelected());
@@ -499,9 +500,9 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                         return ["before", "after"];
                     } else if (["_lbAvailableLaunchers", "_lbVisibleLaunchers"].includes(node.data.noteId)) {
                         return ["over"];
-                    } else {
-                        return true;
                     }
+                    return true;
+
                 },
                 dragDrop: async (node, data) => {
                     if (
@@ -597,7 +598,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
             clones: {
                 highlightActiveClones: true
             },
-            enhanceTitle: async function (
+            async enhanceTitle (
                 event: Event,
                 data: {
                     node: Fancytree.FancytreeNode;
@@ -627,7 +628,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                 const isHoistedNote = activeNoteContext && activeNoteContext.hoistedNoteId === note.noteId && note.noteId !== "root";
 
                 if (note.hasLabel("workspace") && !isHoistedNote) {
-                    const $enterWorkspaceButton = $(`<span class="tree-item-button enter-workspace-button bx bx-door-open" title="${t("note_tree.hoist-this-note-workspace")}"></span>`).on(
+                    const $enterWorkspaceButton = $(`<span class="tree-item-button tn-icon enter-workspace-button bx bx-door-open" title="${t("note_tree.hoist-this-note-workspace")}"></span>`).on(
                         "click",
                         cancelClickPropagation
                     );
@@ -636,7 +637,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                 }
 
                 if (note.type === "search") {
-                    const $refreshSearchButton = $(`<span class="tree-item-button refresh-search-button bx bx-refresh" title="${t("note_tree.refresh-saved-search-results")}"></span>`).on(
+                    const $refreshSearchButton = $(`<span class="tree-item-button tn-icon refresh-search-button bx bx-refresh" title="${t("note_tree.refresh-saved-search-results")}"></span>`).on(
                         "click",
                         cancelClickPropagation
                     );
@@ -650,7 +651,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                     && !note.isLaunchBarConfig()
                     && !note.noteId.startsWith("_help")
                 ) {
-                    const $createChildNoteButton = $(`<span class="tree-item-button add-note-button bx bx-plus" title="${t("note_tree.create-child-note")}"></span>`).on(
+                    const $createChildNoteButton = $(`<span class="tree-item-button tn-icon add-note-button bx bx-plus" title="${t("note_tree.create-child-note")}"></span>`).on(
                         "click",
                         cancelClickPropagation
                     );
@@ -659,7 +660,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                 }
 
                 if (isHoistedNote) {
-                    const $unhoistButton = $(`<span class="tree-item-button unhoist-button bx bx-door-open" title="${t("note_tree.unhoist")}"></span>`).on("click", cancelClickPropagation);
+                    const $unhoistButton = $(`<span class="tree-item-button tn-icon unhoist-button bx bx-door-open" title="${t("note_tree.unhoist")}"></span>`).on("click", cancelClickPropagation);
 
                     $span.append($unhoistButton);
                 }
@@ -1281,7 +1282,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
 
         // activeNode is supposed to be moved when we find out activeNode is deleted but not all branches are deleted. save it for fixing activeNodePath after all nodes loaded.
         let movedActiveNode: Fancytree.FancytreeNode | null = null;
-        let parentsOfAddedNodes: Fancytree.FancytreeNode[] = [];
+        const parentsOfAddedNodes: Fancytree.FancytreeNode[] = [];
 
         for (const branchRow of branchRows) {
             if (branchRow.noteId) {
@@ -1452,10 +1453,10 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
             if (branchId && branchId.startsWith("virt")) {
                 // in case of virtual branches there's nothing to update
                 return;
-            } else {
-                logError(`Cannot find branch=${branchId}`);
-                return;
             }
+            logError(`Cannot find branch=${branchId}`);
+            return;
+
         }
 
         branch.isExpanded = isExpanded;
@@ -1594,7 +1595,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
         // Trigger the event with the selected branch IDs
         appContext.triggerEvent("editBranchPrefix", {
             selectedOrActiveBranchIds: branchIds,
-            node: node
+            node
         });
     }
 
@@ -1779,12 +1780,12 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
     #moveLaunchers(selectedOrActiveBranchIds: string[], desktopParent: string, mobileParent: string) {
         const desktopLaunchersToMove = selectedOrActiveBranchIds.filter((branchId) => !branchId.startsWith("_lbMobile"));
         if (desktopLaunchersToMove) {
-            branchService.moveToParentNote(desktopLaunchersToMove, "_lbRoot_" + desktopParent);
+            branchService.moveToParentNote(desktopLaunchersToMove, `_lbRoot_${  desktopParent}`);
         }
 
         const mobileLaunchersToMove = selectedOrActiveBranchIds.filter((branchId) => branchId.startsWith("_lbMobile"));
         if (mobileLaunchersToMove) {
-            branchService.moveToParentNote(mobileLaunchersToMove, "_lbMobileRoot_" + mobileParent);
+            branchService.moveToParentNote(mobileLaunchersToMove, `_lbMobileRoot_${  mobileParent}`);
         }
     }
 
@@ -1829,7 +1830,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                 selectedOrActiveBranchIds: this.getSelectedOrActiveBranchIds(node),
                 selectedOrActiveNoteIds: this.getSelectedOrActiveNoteIds(node)
             });
-        }
+        };
 
         const items: TouchBarItem[] = [
             new TouchBar.TouchBarButton({
diff --git a/apps/client/src/widgets/react/Badge.css b/apps/client/src/widgets/react/Badge.css
index 8eac80b7d..894351f7d 100644
--- a/apps/client/src/widgets/react/Badge.css
+++ b/apps/client/src/widgets/react/Badge.css
@@ -22,7 +22,7 @@
         }
     }
 
-    .bx {
+    .tn-icon {
         font-size: 1.2em;
         margin-inline-end: 4px;
         opacity: .6;
diff --git a/apps/client/src/widgets/react/FormList.css b/apps/client/src/widgets/react/FormList.css
index 643b5132a..ef47b92c5 100644
--- a/apps/client/src/widgets/react/FormList.css
+++ b/apps/client/src/widgets/react/FormList.css
@@ -5,7 +5,7 @@
         white-space: normal;
     }
 
-    span.bx {
+    span.tn-icon {
         flex-shrink: 0;
     }
 
diff --git a/apps/client/src/widgets/react/Icon.tsx b/apps/client/src/widgets/react/Icon.tsx
index 6d17dc3b9..8d1254833 100644
--- a/apps/client/src/widgets/react/Icon.tsx
+++ b/apps/client/src/widgets/react/Icon.tsx
@@ -9,7 +9,7 @@ interface IconProps extends Pick<HTMLAttributes<HTMLSpanElement>, "className" |
 export default function Icon({ icon, className, ...restProps }: IconProps) {
     return (
         <span
-            class={clsx(icon ?? "bx bx-empty", className)}
+            class={clsx(icon ?? "bx bx-empty", className, "tn-icon")}
             {...restProps}
         />
     );
diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx
index 411c7de21..71f6a0dbd 100644
--- a/apps/client/src/widgets/ribbon/Ribbon.tsx
+++ b/apps/client/src/widgets/ribbon/Ribbon.tsx
@@ -135,7 +135,7 @@ function RibbonTab({ icon, title, active, onClick, toggleCommand }: { icon: stri
             >
                 <span
                     ref={iconRef}
-                    className={`ribbon-tab-title-icon ${icon}`}
+                    className={`ribbon-tab-title-icon tn-icon ${icon}`}
                 />
                 &nbsp;
                 { active && <span class="ribbon-tab-title-label">{title}</span> }
diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css
index c5cc4dd25..cd99cd1d5 100644
--- a/apps/client/src/widgets/ribbon/style.css
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -38,7 +38,7 @@
     padding-top: 2px;
 }
 
-.ribbon-tab-title .bx {
+.ribbon-tab-title .tn-icon {
     font-size: 150%;
     position: relative;
 }
diff --git a/apps/client/src/widgets/sidebar/RightPanelContainer.css b/apps/client/src/widgets/sidebar/RightPanelContainer.css
index 4e1a92147..4c097c386 100644
--- a/apps/client/src/widgets/sidebar/RightPanelContainer.css
+++ b/apps/client/src/widgets/sidebar/RightPanelContainer.css
@@ -28,7 +28,7 @@ body.experimental-feature-new-layout #right-pane {
             border-bottom: 0;
         }
 
-        &.collapsed .card-header > .bx {
+        &.collapsed .card-header > .tn-icon {
             transform: rotate(-90deg);
         }
     }
@@ -50,7 +50,7 @@ body.experimental-feature-new-layout #right-pane {
         padding: 0.75em;
         color: var(--muted-text-color);
 
-        .bx {
+        .tn-icon {
             font-size: 3em;
         }
 
diff --git a/apps/client/src/widgets/type_widgets/Attachment.css b/apps/client/src/widgets/type_widgets/Attachment.css
index 0c5c05b4a..014a00b6e 100644
--- a/apps/client/src/widgets/type_widgets/Attachment.css
+++ b/apps/client/src/widgets/type_widgets/Attachment.css
@@ -131,7 +131,7 @@
     width: 20em;
 }
 
-.attachment-actions .dropdown-item .bx {
+.attachment-actions .dropdown-item .tn-icon {
     position: relative;
     top: 3px;
     font-size: 120%;
diff --git a/apps/client/src/widgets/type_widgets/options/appearance.css b/apps/client/src/widgets/type_widgets/options/appearance.css
index deda76db3..70a0c9a69 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.css
+++ b/apps/client/src/widgets/type_widgets/options/appearance.css
@@ -20,7 +20,7 @@
             margin-bottom: 5px;
         }
 
-        .bx {
+        .tn-icon {
             margin: 4px 0;
             font-size: 12px;
             opacity: 0.5;
@@ -78,7 +78,7 @@
             .ribbon {
                 padding: 0 5px;
 
-                .bx {
+                .tn-icon {
                     font-size: 10px;
                 }
 
diff --git a/apps/server/src/becca/entities/bnote.ts b/apps/server/src/becca/entities/bnote.ts
index 56a0e99c6..7f271e88c 100644
--- a/apps/server/src/becca/entities/bnote.ts
+++ b/apps/server/src/becca/entities/bnote.ts
@@ -1697,8 +1697,12 @@ class BNote extends AbstractBeccaEntity<BNote> {
         return pojo;
     }
 
-    // TODO: Deduplicate with fnote
     getIcon() {
+        return `tn-icon ${this.#getIconInternal()}`;
+    }
+
+    // TODO: Deduplicate with fnote
+    #getIconInternal() {
         const iconClassLabels = this.getLabels("iconClass");
 
         if (iconClassLabels && iconClassLabels.length > 0) {
diff --git a/apps/server/src/share/shaca/entities/snote.ts b/apps/server/src/share/shaca/entities/snote.ts
index 5bc50bfe3..da72cd419 100644
--- a/apps/server/src/share/shaca/entities/snote.ts
+++ b/apps/server/src/share/shaca/entities/snote.ts
@@ -528,6 +528,10 @@ class SNote extends AbstractShacaEntity {
     }
 
     getIcon(filterByPrefix: string[] = []) {
+        return `tn-icon ${this.#getIconInternal(filterByPrefix)}`;
+    }
+
+    #getIconInternal(filterByPrefix: string[] = []) {
         const iconClassLabels = this.getLabels("iconClass").filter(label => {
             if (filterByPrefix.length === 0) {
                 return true;
diff --git a/packages/share-theme/src/styles/content.css b/packages/share-theme/src/styles/content.css
index 0f7a6430c..38547dc3e 100644
--- a/packages/share-theme/src/styles/content.css
+++ b/packages/share-theme/src/styles/content.css
@@ -50,7 +50,7 @@
     height: auto;
 }
 
-a.reference-link > span > .bx {
+a.reference-link > span > .tn-icon {
     margin-inline-end: 3px;
 }
 
@@ -79,4 +79,4 @@ body.type-webView {
             border: 0;
         }
     }
-}
\ No newline at end of file
+}