diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less
index 7b873591..4b127989 100644
--- a/src/renderer/less/elements.less
+++ b/src/renderer/less/elements.less
@@ -1711,6 +1711,11 @@ input[type=checkbox][switch]:checked:active::before {
   font-family: "codicon";
   font-size  : 1em;
   color: var(--textColor);
+  display: grid;
+  place-items: center;
+  span {
+    position: absolute;
+  }
 }
 
 .playback-button.pause {
diff --git a/src/renderer/style.less b/src/renderer/style.less
index d0d3002b..93b6d60f 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -2955,6 +2955,16 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   transform: translateY(20px);
 }
 
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity .15s var(--appleEase);
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
 .modal-enter-active,
 .modal-leave-active {
   transition: opacity .1s var(--appleEase), transform .1s var(--appleEase);
diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs
index f536ddbe..7dcd1184 100644
--- a/src/renderer/views/app/chrome-top.ejs
+++ b/src/renderer/views/app/chrome-top.ejs
@@ -59,8 +59,13 @@
         v-b-tooltip.hover
         :title="chrome.sidebarCollapsed ? getLz('action.showLibrary') : getLz('action.hideLibrary')"
         @click="chrome.sidebarCollapsed = !chrome.sidebarCollapsed">
-          <span v-if="chrome.sidebarCollapsed"></span>
-          <span v-else></span>
+          <transition name="fade">
+            <span v-if="chrome.sidebarCollapsed"></span>
+          </transition>
+          <transition name="fade">
+            <span v-if="!chrome.sidebarCollapsed"></span>
+          </transition>
+
         </button>
       </div>
       <div