diff --git a/ts/editor/editor.scss b/ts/editor/editor.scss
index 6b4760ba1..3be5e2b0f 100644
--- a/ts/editor/editor.scss
+++ b/ts/editor/editor.scss
@@ -133,10 +133,15 @@ button.highlighted {
     }
 }
 
-.sticky-icon {
-    color: var(--bs-dark);
+.icon {
+    cursor: pointer;
+    color: var(--text-fg);
 
-    .nightMode & {
-        color: var(--bs-light);
+    &.is-inactive::before {
+        opacity: 0.1;
+    }
+
+    &.icon--hover::before {
+        opacity: 0.5;
     }
 }
diff --git a/ts/editor/labelContainer.ts b/ts/editor/labelContainer.ts
index 114eb7a18..60e5b7ca8 100644
--- a/ts/editor/labelContainer.ts
+++ b/ts/editor/labelContainer.ts
@@ -1,5 +1,16 @@
 import { bridgeCommand } from "./lib";
 
+
+function removeHoverIcon(evt: Event): void {
+    const icon = evt.currentTarget as HTMLElement;
+    icon.classList.remove("icon--hover")
+}
+
+function hoverIcon(evt: Event): void {
+    const icon = evt.currentTarget as HTMLElement;
+    icon.classList.add("icon--hover");
+}
+
 export class LabelContainer extends HTMLDivElement {
     sticky: HTMLSpanElement;
     label: HTMLSpanElement;
@@ -13,7 +24,7 @@ export class LabelContainer extends HTMLDivElement {
         this.appendChild(this.label);
 
         this.sticky = document.createElement("span");
-        this.sticky.className = "bi me-1 sticky-icon";
+        this.sticky.className = "bi me-1 bi-sticky icon";
         this.sticky.hidden = true;
         this.appendChild(this.sticky);
 
@@ -22,10 +33,14 @@ export class LabelContainer extends HTMLDivElement {
 
     connectedCallback(): void {
         this.sticky.addEventListener("click", this.toggleSticky);
+        this.sticky.addEventListener("mouseenter", hoverIcon);
+        this.sticky.addEventListener("mouseleave", removeHoverIcon);
     }
 
     disconnectedCallback(): void {
         this.sticky.removeEventListener("click", this.toggleSticky);
+        this.sticky.removeEventListener("mouseenter", hoverIcon);
+        this.sticky.removeEventListener("mouseleave", removeHoverIcon);
     }
 
     initialize(labelName: string): void {
@@ -33,8 +48,7 @@ export class LabelContainer extends HTMLDivElement {
     }
 
     setSticky(state: boolean): void {
-        this.sticky.classList.toggle("bi-pin-angle-fill", state);
-        this.sticky.classList.toggle("bi-pin-angle", !state);
+        this.sticky.classList.toggle("is-inactive", state);
     }
 
     activateSticky(initialState: boolean): void {
@@ -42,12 +56,13 @@ export class LabelContainer extends HTMLDivElement {
         this.sticky.hidden = false;
     }
 
-    toggleSticky(): void {
+    toggleSticky(evt: Event): void {
         bridgeCommand(
             `toggleSticky:${this.getAttribute("ord")}`,
             (newState: boolean): void => {
                 this.setSticky(newState);
             }
         );
+        removeHoverIcon(evt);
     }
 }