diff --git a/src/browser/themes/shared/zen-icons/common/library/library-downloads-active.svg b/src/browser/themes/shared/zen-icons/common/library/library-downloads-active.svg
new file mode 100644
index 000000000..4ad292573
--- /dev/null
+++ b/src/browser/themes/shared/zen-icons/common/library/library-downloads-active.svg
@@ -0,0 +1,36 @@
+#filter dumbComments emptyLines substitution
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+<svg class="zen-downloads-icon" width="28" height="28" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @keyframes zenDownloadsArrowBounce {
+      0% { transform: translateY(0px); d: path('M 64 45 L 64 83 M 50 69 L 64 83 L 78 69'); animation-timing-function: cubic-bezier(0.33, 0, 0.7, 1.28); }
+      31.43% { transform: translateY(10px); d: path('M 64 57 L 64 83 M 50 69 L 64 83 L 78 69'); animation-timing-function: cubic-bezier(0.44, 0.2, 0.44, 0.98); }
+      60% { transform: translateY(-10.83px); d: path('M 64 45 L 64 83 M 50 69 L 64 83 L 78 69'); animation-timing-function: cubic-bezier(0.45, -0.03, 0.83, 0.9); }
+      85.71% { transform: translateY(0.66px); d: path('M 64 45 L 64 83 M 50 69 L 64 83 L 78 69'); animation-timing-function: cubic-bezier(0.17, -0.98, 0.83, 0.83); }
+      100% { transform: translateY(0px); d: path('M 64 45 L 64 83 M 50 69 L 64 83 L 78 69'); }
+    }
+    @keyframes zenDownloadsCircleBounce {
+      0% { transform: translateY(0px); animation-timing-function: cubic-bezier(0.33, 0, 0.71, 2.31); }
+      31.43% { transform: translateY(2.5px); animation-timing-function: cubic-bezier(0.23, 0.15, 0.36, 0.97); }
+      54.29% { transform: translateY(-11.46px); animation-timing-function: cubic-bezier(0.48, -0.04, 0.83, 0.89); }
+      85.71% { transform: translateY(0.85px); animation-timing-function: cubic-bezier(0.17, -0.70, 0.83, 0.83); }
+      100% { transform: translateY(0px); }
+    }
+    .zen-downloads-circle-translate { animation: zenDownloadsCircleBounce 0.583s forwards; }
+    .zen-downloads-arrow { animation: zenDownloadsArrowBounce 0.583s forwards; }
+  </style>
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="0" x2="64" y2="128" id="zen-downloads-grad-front">
+      <stop offset="0" stop-color="context-fill"/>
+      <stop offset="1" stop-color="context-stroke"/>
+    </linearGradient>
+  </defs>
+  <g class="zen-downloads-circle-translate" style="transform-origin: 64px 64px;">
+    <circle class="zen-downloads-bg" cx="64" cy="64" r="47.5" fill="context-fill" fill-opacity="1"/>
+    <circle class="zen-downloads-gradient" cx="64" cy="64" r="47.5" fill="url(#zen-downloads-grad-front)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
+    <circle class="zen-downloads-border" cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
+  </g>
+  <path class="zen-downloads-arrow" d="M 64 45 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/browser/themes/shared/zen-icons/common/library/library-downloads.svg b/src/browser/themes/shared/zen-icons/common/library/library-downloads.svg
index dfe0eab65..b67510830 100644
--- a/src/browser/themes/shared/zen-icons/common/library/library-downloads.svg
+++ b/src/browser/themes/shared/zen-icons/common/library/library-downloads.svg
@@ -2,7 +2,7 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="12" cy="12" r="9" stroke="context-stroke" stroke-width="2" fill="context-fill" fill-opacity="context-fill-opacity"/>
-  <path d="M12 8V16M9 13L12 16L15 13" stroke="context-stroke" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
\ No newline at end of file
+<svg class="zen-downloads-icon" width="28" height="28" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="64" cy="64" r="47.5" fill="none" stroke="context-stroke" stroke-width="7.1"/>
+  <path d="M 64 45 L 64 83 M 50 69 L 64 83 L 78 69" stroke="context-stroke" stroke-width="7.1" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/browser/themes/shared/zen-icons/common/library/library-history-active.svg b/src/browser/themes/shared/zen-icons/common/library/library-history-active.svg
new file mode 100644
index 000000000..df078066b
--- /dev/null
+++ b/src/browser/themes/shared/zen-icons/common/library/library-history-active.svg
@@ -0,0 +1,62 @@
+#filter dumbComments emptyLines substitution
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+<svg class="zen-history-icon" width="28" height="28" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @keyframes zenHistoryBodyTranslate {
+      0%, 31.43% { transform: translate(63.977px, 79.047px); animation-timing-function: cubic-bezier(0.16, 0.41, 0.34, 1); }
+      60% { transform: translate(63.977px, 63.253px); animation-timing-function: cubic-bezier(0.33, 0, 0.62, 0.55); }
+      77.14%, 100% { transform: translate(63.977px, 79.047px); }
+    }
+    @keyframes zenHistoryLid {
+      0% { transform: translate(63.977px, 37.148px) rotate(0deg) translate(-46.852px, -12.82px); animation-timing-function: cubic-bezier(0.21, 0, 0.56, 1); }
+      31.43% { transform: translate(63.977px, 45.436px) rotate(0deg) translate(-46.852px, -12.82px); animation-timing-function: cubic-bezier(0.38, 0, 0.55, 1); }
+      62.86% { transform: translate(63.977px, 17.08px) rotate(-5.57deg) translate(-46.852px, -12.82px); animation-timing-function: cubic-bezier(0.43, 0.14, 0.38, 1); }
+      82.86% { transform: translate(63.977px, 23.397px) rotate(3deg) translate(-46.852px, -12.82px); animation-timing-function: cubic-bezier(0.41, 0, 0.49, 1); }
+      100% { transform: translate(63.977px, 37.148px) rotate(0deg) translate(-46.852px, -12.82px); }
+    }
+    @keyframes zenHistoryDashTranslate {
+      0% { transform: translate(64px, 65px) scale(0.9, 1); animation-timing-function: cubic-bezier(0.38, 0, 0.44, 1); }
+      31.43% { transform: translate(64px, 74.038px) scale(0.9, 1); animation-timing-function: cubic-bezier(0.43, 0, 0.73, -0.57); }
+      45.71% { transform: translate(64px, 72.423px) scale(0.9, 1); animation-timing-function: cubic-bezier(0.34, 0.28, 0.7, 0.79); }
+      60% { transform: translate(64px, 61.033px) scale(0.9, 1); animation-timing-function: cubic-bezier(0.22, -1.27, 0.34, 1.22); }
+      100% { transform: translate(64px, 65px) scale(0.9, 1); }
+    }
+    .zen-history-body-translate { animation: zenHistoryBodyTranslate 0.583s forwards; }
+    .zen-history-lid { animation: zenHistoryLid 0.583s forwards; }
+    .zen-history-dash-translate { animation: zenHistoryDashTranslate 0.583s forwards; }
+  </style>
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="0" x2="64" y2="128" id="zen-history-grad-front">
+      <stop offset="0" stop-color="context-fill"/>
+      <stop offset="1" stop-color="context-stroke"/>
+    </linearGradient>
+  </defs>
+  <g class="zen-history-body-translate" style="transform-origin: 0 0; transform: translate(63.977px, 79.047px);">
+    <g transform="translate(-39.867, -30.328)">
+      <path class="zen-history-bg"
+            d="M 3.55 0 L 76.184 0 L 76.184 46.856 A 10.25 10.25 0 0 1 65.934 57.106 L 13.8 57.106 A 10.25 10.25 0 0 1 3.55 46.856 Z"
+            fill="context-fill" fill-opacity="1"/>
+      <path class="zen-history-gradient"
+            d="M 3.55 0 L 76.184 0 L 76.184 46.856 A 10.25 10.25 0 0 1 65.934 57.106 L 13.8 57.106 A 10.25 10.25 0 0 1 3.55 46.856 Z"
+            fill="url(#zen-history-grad-front)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
+      <path class="zen-history-border"
+            d="M 3.55 0 L 76.184 0 L 76.184 46.856 A 10.25 10.25 0 0 1 65.934 57.106 L 13.8 57.106 A 10.25 10.25 0 0 1 3.55 46.856 Z"
+            fill="none" stroke="context-stroke" stroke-width="7.1"/>
+    </g>
+  </g>
+  <g class="zen-history-lid" style="transform-origin: 0 0; transform: translate(63.977px, 37.148px) rotate(0deg) translate(-46.852px, -12.82px);">
+    <rect class="zen-history-bg" x="3.55" y="3.55" width="86.603" height="18.541" rx="6.05"
+          fill="context-fill" fill-opacity="1"/>
+    <rect class="zen-history-gradient" x="3.55" y="3.55" width="86.603" height="18.541" rx="6.05"
+          fill="url(#zen-history-grad-front)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
+    <rect class="zen-history-border" x="3.55" y="3.55" width="86.603" height="18.541" rx="6.05"
+          fill="none" stroke="context-stroke" stroke-width="7.1"/>
+  </g>
+  <g class="zen-history-dash-translate" style="transform-origin: 0 0; transform: translate(64px, 65px) scale(0.9, 1);">
+    <path class="zen-history-dash-path" fill="none"
+          d="M -16 0 L 16 0"
+          stroke="context-stroke" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+</svg>
diff --git a/src/browser/themes/shared/zen-icons/common/library/library-history.svg b/src/browser/themes/shared/zen-icons/common/library/library-history.svg
index 2f8aa6d78..2cc30e8b1 100644
--- a/src/browser/themes/shared/zen-icons/common/library/library-history.svg
+++ b/src/browser/themes/shared/zen-icons/common/library/library-history.svg
@@ -2,7 +2,13 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="12" cy="12" r="9" stroke="context-stroke" stroke-width="2" fill="context-fill" fill-opacity="context-fill-opacity"/>
-  <path d="M12 7V12 L 15.5 14" stroke="context-stroke" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
\ No newline at end of file
+<svg class="zen-history-icon" width="28" height="28" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g transform="translate(63.977, 79.047)">
+    <path d="M -36.317 -30.328 L 36.317 -30.328 L 36.317 16.528 A 10.25 10.25 0 0 1 26.067 26.778 L -26.067 26.778 A 10.25 10.25 0 0 1 -36.317 16.528 Z"
+          fill="none" stroke="context-stroke" stroke-width="7.1"/>
+  </g>
+  <g transform="translate(17.125, 24.328)">
+    <rect x="3.55" y="3.55" width="86.603" height="18.541" rx="6.05" fill="none" stroke="context-stroke" stroke-width="7.1"/>
+  </g>
+  <path d="M 49.6 65 L 78.4 65" fill="none" stroke="context-stroke" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/browser/themes/shared/zen-icons/common/library/library-media-active.svg b/src/browser/themes/shared/zen-icons/common/library/library-media-active.svg
new file mode 100644
index 000000000..2233a7d53
--- /dev/null
+++ b/src/browser/themes/shared/zen-icons/common/library/library-media-active.svg
@@ -0,0 +1,74 @@
+#filter dumbComments emptyLines substitution
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+<svg class="zen-media-icon" width="28" height="28" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @keyframes zenMediaBackBounce {
+      0% { transform: translate(54.799px, 57.743px) rotate(-7deg) translate(-46.27px, -36.445px); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
+      29.41% { transform: translate(57.299px, 65.243px) rotate(3deg) translate(-46.27px, -36.445px); animation-timing-function: cubic-bezier(0.3, 0, 0.8, 1); }
+      61.76% { transform: translate(56.16px, 47.803px) rotate(-18.58deg) translate(-46.27px, -36.445px); animation-timing-function: cubic-bezier(0.16, 0, 0.8, 1); }
+      79.41% { transform: translate(55.25px, 54.3px) rotate(-3.2deg) translate(-46.27px, -36.445px); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
+      100% { transform: translate(54.799px, 57.743px) rotate(-7deg) translate(-46.27px, -36.445px); }
+    }
+    @keyframes zenMediaFrontBounce {
+      0% { transform: translate(78.827px, 77.737px) rotate(0deg) translate(-46.27px, -36.445px); animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1); }
+      29.41% { transform: translate(78.827px, 80.737px) rotate(0deg) translate(-46.27px, -36.445px); animation-timing-function: cubic-bezier(0.4, 0, 0.64, 1); }
+      55.88% { transform: translate(75.827px, 62.61px) rotate(9.32deg) translate(-46.27px, -36.445px); animation-timing-function: cubic-bezier(0.25, 0, 0.75, 1); }
+      88.24% { transform: translate(78.827px, 77.737px) rotate(0deg) translate(-46.27px, -36.445px); animation-timing-function: linear; }
+      100% { transform: translate(78.827px, 77.737px) rotate(0deg) translate(-46.27px, -36.445px); }
+    }
+    @keyframes zenMediaSunBounce {
+      0% { transform: translate(64.76px, 67.886px) translate(-9.914px, -9.984px); animation-timing-function: cubic-bezier(0.32, 0, 0.67, 1); }
+      29.41% { transform: translate(64.76px, 73.606px) translate(-9.914px, -9.984px); animation-timing-function: linear; }
+      35.29% { transform: translate(64.76px, 73.606px) translate(-9.914px, -9.984px); animation-timing-function: cubic-bezier(0.35, 0, 0.76, 0.72); }
+      55.88% { transform: translate(61.737px, 51.974px) translate(-9.914px, -9.984px); animation-timing-function: cubic-bezier(0.21, -0.71, 0.45, 1); }
+      100% { transform: translate(64.76px, 67.886px) translate(-9.914px, -9.984px); }
+    }
+    .zen-media-back-card { animation: zenMediaBackBounce 0.583s forwards; }
+    .zen-media-front-card { animation: zenMediaFrontBounce 0.583s forwards; }
+    .zen-media-sun { animation: zenMediaSunBounce 0.583s forwards; }
+  </style>
+  <defs>
+    <mask id="zen-media-mask">
+      <rect x="-10" y="-10" width="148" height="148" fill="white"/>
+      <g class="zen-media-front-card-mask" transform="translate(78.827, 77.737) translate(-46.27, -36.445)">
+        <rect x="0" y="0" width="92.539" height="72.891" rx="12.812" fill="black"/>
+      </g>
+    </mask>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="0" x2="64" y2="128" id="zen-media-grad-back">
+      <stop offset="0" stop-color="context-fill"/>
+      <stop offset="1" stop-color="context-stroke"/>
+    </linearGradient>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="0" x2="64" y2="128" id="zen-media-grad-front">
+      <stop offset="0" stop-color="context-fill"/>
+      <stop offset="1" stop-color="context-stroke"/>
+    </linearGradient>
+  </defs>
+  <g class="zen-media-back-wrapper" mask="url(#zen-media-mask)">
+    <g class="zen-media-back-card" transform="translate(54.799, 57.743) rotate(-7) translate(-46.27, -36.445)">
+      <rect class="zen-media-bg" x="3.55" y="3.55" width="85.439" height="65.791" rx="9.262"
+            fill="context-fill" fill-opacity="1"/>
+      <rect class="zen-media-gradient" x="3.55" y="3.55" width="85.439" height="65.791" rx="9.262"
+            fill="url(#zen-media-grad-back)" fill-opacity="1" style="mix-blend-mode: overlay; opacity: 0.1;"/>
+      <rect class="zen-media-border" x="3.55" y="3.55" width="85.439" height="65.791" rx="9.262"
+            fill="none" stroke="context-stroke" stroke-width="7.1"/>
+    </g>
+  </g>
+  <g class="zen-media-front-card" transform="translate(78.827, 77.737) translate(-46.27, -36.445)">
+    <rect class="zen-media-bg" x="3.55" y="3.55" width="85.439" height="65.791" rx="9.262"
+          fill="context-fill" fill-opacity="1"/>
+    <rect class="zen-media-gradient" x="3.55" y="3.55" width="85.439" height="65.791" rx="9.262"
+          fill="url(#zen-media-grad-front)" fill-opacity="1" style="mix-blend-mode: overlay; opacity: 0.1;"/>
+    <g class="zen-media-mountain" transform="translate(0.289, 32.609)">
+      <path class="zen-media-mountain-path" d="M7.432 21.147 L17.865 12.11 C19.665 10.596 21.373 9.862 23.173 9.862 C25.158 9.862 27.005 10.596 28.805 12.202 L36.191 18.853 L54.84 2.431 C56.779 0.734 58.81 0 61.072 0 C63.334 0 65.55 0.826 67.35 2.477 L84.568 18.67 L92 25.78 C92 35.23 87.153 40 77.551 40 L14.495 40 C4.801 40 0 35.275 0 25.78 Z"
+            fill="context-stroke"/>
+    </g>
+    <rect class="zen-media-border" x="3.55" y="3.55" width="85.439" height="65.791" rx="9.262"
+          fill="none" stroke="context-stroke" stroke-width="7.1"/>
+  </g>
+  <g class="zen-media-sun" transform="translate(64.76, 67.886) translate(-9.914, -9.984)">
+    <circle class="zen-media-sun-path" cx="9.914" cy="9.984" r="9.914"
+            fill="context-stroke"/>
+  </g>
+</svg>
diff --git a/src/browser/themes/shared/zen-icons/common/library/library-media.svg b/src/browser/themes/shared/zen-icons/common/library/library-media.svg
new file mode 100644
index 000000000..9f6b9f048
--- /dev/null
+++ b/src/browser/themes/shared/zen-icons/common/library/library-media.svg
@@ -0,0 +1,22 @@
+#filter dumbComments emptyLines substitution
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+<svg class="zen-media-icon" width="28" height="28" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <mask id="zen-media-mask-inactive">
+      <rect x="-10" y="-10" width="148" height="148" fill="white"/>
+      <g transform="translate(78.827, 77.737) translate(-46.27, -36.445)">
+        <rect x="0" y="0" width="92.539" height="72.891" rx="12.812" fill="black"/>
+      </g>
+    </mask>
+  </defs>
+  <g mask="url(#zen-media-mask-inactive)">
+    <g transform="translate(54.799, 57.743) rotate(-7) translate(-46.27, -36.445)">
+      <rect x="3.55" y="3.55" width="85.439" height="65.791" rx="9.262" fill="none" stroke="context-stroke" stroke-width="7.1"/>
+    </g>
+  </g>
+  <g transform="translate(78.827, 77.737) translate(-46.27, -36.445)">
+    <rect x="3.55" y="3.55" width="85.439" height="65.791" rx="9.262" fill="none" stroke="context-stroke" stroke-width="7.1"/>
+  </g>
+</svg>
diff --git a/src/browser/themes/shared/zen-icons/common/library/library-spaces-active.svg b/src/browser/themes/shared/zen-icons/common/library/library-spaces-active.svg
new file mode 100644
index 000000000..90ab225dc
--- /dev/null
+++ b/src/browser/themes/shared/zen-icons/common/library/library-spaces-active.svg
@@ -0,0 +1,56 @@
+#filter dumbComments emptyLines substitution
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+<svg class="zen-spaces-icon" width="28" height="28" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    @keyframes zenSpacesBackBounce {
+      0% { transform: translate(51.28px, 61.69px) rotate(-17.5deg) translate(-35.022px, -44.68px); animation-timing-function: cubic-bezier(0.21, 0, 0.56, 1); }
+      34.28% { transform: translate(56.28px, 72.19px) rotate(6deg) translate(-35.022px, -44.68px); animation-timing-function: cubic-bezier(0.38, 0, 0.55, 1); }
+      62.86% { transform: translate(51.28px, 55.52px) rotate(-27.83deg) translate(-35.022px, -44.68px); animation-timing-function: cubic-bezier(0.73, 0, 0.63, 1); }
+      100% { transform: translate(51.28px, 61.69px) rotate(-17.5deg) translate(-35.022px, -44.68px); }
+    }
+    @keyframes zenSpacesFrontBounce {
+      0% { transform: translate(77.02px, 75.93px) rotate(0deg) translate(-35.022px, -44.68px); animation-timing-function: cubic-bezier(0.21, 0, 0.56, 1); }
+      31.43% { transform: translate(77.02px, 78.18px) rotate(-5deg) translate(-35.022px, -44.68px); animation-timing-function: cubic-bezier(0.38, 0, 0.55, 1); }
+      54.28% { transform: translate(77.02px, 55.71px) rotate(28.96deg) translate(-35.022px, -44.68px); animation-timing-function: cubic-bezier(0.73, 0, 0.63, 1); }
+      100% { transform: translate(77.02px, 75.93px) rotate(0deg) translate(-35.022px, -44.68px); }
+    }
+    .zen-spaces-back-card { animation: zenSpacesBackBounce 0.583s forwards; }
+    .zen-spaces-front-card { animation: zenSpacesFrontBounce 0.583s forwards; }
+  </style>
+  <defs>
+    <mask id="zen-spaces-mask">
+      <rect x="-10" y="-10" width="148" height="148" fill="white"/>
+      <g class="zen-spaces-front-card" style="transform-origin: 0 0; transform: translate(77.02px, 75.93px) rotate(0deg) translate(-35.022px, -44.68px);">
+        <rect x="0" y="0" width="70.04" height="89.36" rx="14" fill="black"/>
+      </g>
+    </mask>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="0" x2="64" y2="128" id="zen-spaces-grad-back">
+      <stop offset="0" stop-color="context-fill"/>
+      <stop offset="1" stop-color="context-stroke"/>
+    </linearGradient>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="64" y1="0" x2="64" y2="128" id="zen-spaces-grad-front">
+      <stop offset="0" stop-color="context-fill"/>
+      <stop offset="1" stop-color="context-stroke"/>
+    </linearGradient>
+  </defs>
+  <g class="zen-spaces-back-wrapper" mask="url(#zen-spaces-mask)">
+    <g class="zen-spaces-back-card" style="transform-origin: 0 0; transform: translate(51.28px, 61.69px) rotate(-17.5deg) translate(-35.022px, -44.68px);">
+      <rect class="zen-spaces-bg" x="3.55" y="3.55" width="62.94" height="82.26" rx="10.45"
+            fill="context-fill" fill-opacity="1"/>
+      <rect class="zen-spaces-gradient" x="3.55" y="3.55" width="62.94" height="82.26" rx="10.45"
+            fill="url(#zen-spaces-grad-back)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
+      <rect class="zen-spaces-border" x="3.55" y="3.55" width="62.94" height="82.26" rx="10.45"
+            fill="none" stroke="context-stroke" stroke-width="7.1"/>
+    </g>
+  </g>
+  <g class="zen-spaces-front-card" style="transform-origin: 0 0; transform: translate(77.02px, 75.93px) rotate(0deg) translate(-35.022px, -44.68px);">
+    <rect class="zen-spaces-bg" x="3.55" y="3.55" width="62.94" height="82.26" rx="10.45"
+          fill="context-fill" fill-opacity="1"/>
+    <rect class="zen-spaces-gradient" x="3.55" y="3.55" width="62.94" height="82.26" rx="10.45"
+          fill="url(#zen-spaces-grad-front)" style="mix-blend-mode: overlay; opacity: 0.1;"/>
+    <rect class="zen-spaces-border" x="3.55" y="3.55" width="62.94" height="82.26" rx="10.45"
+          fill="none" stroke="context-stroke" stroke-width="7.1"/>
+  </g>
+</svg>
diff --git a/src/browser/themes/shared/zen-icons/common/library/library-spaces.svg b/src/browser/themes/shared/zen-icons/common/library/library-spaces.svg
index c4343ccec..a2165ea53 100644
--- a/src/browser/themes/shared/zen-icons/common/library/library-spaces.svg
+++ b/src/browser/themes/shared/zen-icons/common/library/library-spaces.svg
@@ -2,17 +2,21 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
-<svg class="icon spaces-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg class="zen-spaces-icon" width="28" height="28" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
   <defs>
-    <mask id="spaces-mask">
-      <rect x="0" y="0" width="24" height="24" fill="white"/>
-      <rect x="9" y="6" width="10" height="14" rx="2" fill="black"/>
+    <mask id="zen-spaces-mask-inactive">
+      <rect x="-10" y="-10" width="148" height="148" fill="white"/>
+      <g style="transform-origin: 0 0; transform: translate(77.02px, 75.93px) translate(-35.022px, -44.68px);">
+        <rect x="0" y="0" width="70.04" height="89.36" rx="14" fill="black"/>
+      </g>
     </mask>
   </defs>
-  <g class="back" transform="rotate(-15 12 12)" mask="url(#spaces-mask)">
-    <rect class="back-rect" x="6" y="4" width="10" height="14" rx="2" stroke="context-stroke" stroke-width="2" fill="context-fill" fill-opacity="context-fill-opacity"/>
+  <g mask="url(#zen-spaces-mask-inactive)">
+    <g style="transform-origin: 0 0; transform: translate(51.28px, 61.69px) rotate(-17.5deg) translate(-35.022px, -44.68px);">
+      <rect x="3.55" y="3.55" width="62.94" height="82.26" rx="10.45" fill="none" stroke="context-stroke" stroke-width="7.1"/>
+    </g>
   </g>
-  <g class="front">
-    <rect class="front-rect" x="9" y="6" width="10" height="14" rx="2" stroke="context-stroke" stroke-width="2" fill="context-fill" fill-opacity="context-fill-opacity"/>
+  <g style="transform-origin: 0 0; transform: translate(77.02px, 75.93px) translate(-35.022px, -44.68px);">
+    <rect x="3.55" y="3.55" width="62.94" height="82.26" rx="10.45" fill="none" stroke="context-stroke" stroke-width="7.1"/>
   </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/src/browser/themes/shared/zen-icons/jar.inc.mn b/src/browser/themes/shared/zen-icons/jar.inc.mn
index 243cb317a..0538f9926 100644
--- a/src/browser/themes/shared/zen-icons/jar.inc.mn
+++ b/src/browser/themes/shared/zen-icons/jar.inc.mn
@@ -13,7 +13,6 @@
 *  skin/classic/browser/zen-icons/autoplay-media-fill.svg                      (../shared/zen-icons/nucleo/autoplay-media-fill.svg) 
 *  skin/classic/browser/zen-icons/autoplay-media.svg                      (../shared/zen-icons/nucleo/autoplay-media.svg) 
 *  skin/classic/browser/zen-icons/back.svg                      (../shared/zen-icons/nucleo/back.svg) 
-*  skin/classic/browser/zen-icons/blocked-element.svg                      (../shared/zen-icons/nucleo/blocked-element.svg) 
 *  skin/classic/browser/zen-icons/block.svg                      (../shared/zen-icons/nucleo/block.svg) 
 *  skin/classic/browser/zen-icons/blocked-element.svg                      (../shared/zen-icons/nucleo/blocked-element.svg) 
 *  skin/classic/browser/zen-icons/bolt.svg                      (../shared/zen-icons/nucleo/bolt.svg) 
@@ -104,26 +103,26 @@
 *  skin/classic/browser/zen-icons/popup-fill.svg                      (../shared/zen-icons/nucleo/popup-fill.svg) 
 *  skin/classic/browser/zen-icons/popup.svg                      (../shared/zen-icons/nucleo/popup.svg) 
 *  skin/classic/browser/zen-icons/print.svg                      (../shared/zen-icons/nucleo/print.svg) 
-*  skin/classic/browser/zen-icons/privateBrowsing.svg                      (../shared/zen-icons/nucleo/privateBrowsing.svg) 
 *  skin/classic/browser/zen-icons/private-window.svg                      (../shared/zen-icons/nucleo/private-window.svg) 
+*  skin/classic/browser/zen-icons/privateBrowsing.svg                      (../shared/zen-icons/nucleo/privateBrowsing.svg) 
 *  skin/classic/browser/zen-icons/reader-mode.svg                      (../shared/zen-icons/nucleo/reader-mode.svg) 
 *  skin/classic/browser/zen-icons/reload.svg                      (../shared/zen-icons/nucleo/reload.svg) 
 *  skin/classic/browser/zen-icons/save.svg                      (../shared/zen-icons/nucleo/save.svg) 
 *  skin/classic/browser/zen-icons/screen-blocked.svg                      (../shared/zen-icons/nucleo/screen-blocked.svg) 
-*  skin/classic/browser/zen-icons/screenshot.svg                      (../shared/zen-icons/nucleo/screenshot.svg) 
 *  skin/classic/browser/zen-icons/screen.svg                      (../shared/zen-icons/nucleo/screen.svg) 
+*  skin/classic/browser/zen-icons/screenshot.svg                      (../shared/zen-icons/nucleo/screenshot.svg) 
 *  skin/classic/browser/zen-icons/search-glass.svg                      (../shared/zen-icons/nucleo/search-glass.svg) 
 *  skin/classic/browser/zen-icons/search-page.svg                      (../shared/zen-icons/nucleo/search-page.svg) 
 *  skin/classic/browser/zen-icons/security-broken.svg                      (../shared/zen-icons/nucleo/security-broken.svg) 
-*  skin/classic/browser/zen-icons/security.svg                      (../shared/zen-icons/nucleo/security.svg) 
 *  skin/classic/browser/zen-icons/security-warning.svg                      (../shared/zen-icons/nucleo/security-warning.svg) 
+*  skin/classic/browser/zen-icons/security.svg                      (../shared/zen-icons/nucleo/security.svg) 
 *  skin/classic/browser/zen-icons/send-to-device.svg                      (../shared/zen-icons/nucleo/send-to-device.svg) 
 *  skin/classic/browser/zen-icons/settings-fill.svg                      (../shared/zen-icons/nucleo/settings-fill.svg) 
 *  skin/classic/browser/zen-icons/settings.svg                      (../shared/zen-icons/nucleo/settings.svg) 
 *  skin/classic/browser/zen-icons/share.svg                      (../shared/zen-icons/nucleo/share.svg) 
 *  skin/classic/browser/zen-icons/sidebar-right.svg                      (../shared/zen-icons/nucleo/sidebar-right.svg) 
-*  skin/classic/browser/zen-icons/sidebars-right.svg                      (../shared/zen-icons/nucleo/sidebars-right.svg) 
 *  skin/classic/browser/zen-icons/sidebar.svg                      (../shared/zen-icons/nucleo/sidebar.svg) 
+*  skin/classic/browser/zen-icons/sidebars-right.svg                      (../shared/zen-icons/nucleo/sidebars-right.svg) 
 *  skin/classic/browser/zen-icons/sliders.svg                      (../shared/zen-icons/nucleo/sliders.svg) 
 *  skin/classic/browser/zen-icons/sparkles.svg                      (../shared/zen-icons/nucleo/sparkles.svg) 
 *  skin/classic/browser/zen-icons/spell-check.svg                      (../shared/zen-icons/nucleo/spell-check.svg) 
@@ -163,7 +162,6 @@
 *  skin/classic/browser/zen-icons/autoplay-media-fill.svg                      (../shared/zen-icons/nucleo/autoplay-media-fill.svg) 
 *  skin/classic/browser/zen-icons/autoplay-media.svg                      (../shared/zen-icons/nucleo/autoplay-media.svg) 
 *  skin/classic/browser/zen-icons/back.svg                      (../shared/zen-icons/nucleo/back.svg) 
-*  skin/classic/browser/zen-icons/blocked-element.svg                      (../shared/zen-icons/nucleo/blocked-element.svg) 
 *  skin/classic/browser/zen-icons/block.svg                      (../shared/zen-icons/nucleo/block.svg) 
 *  skin/classic/browser/zen-icons/blocked-element.svg                      (../shared/zen-icons/nucleo/blocked-element.svg) 
 *  skin/classic/browser/zen-icons/bolt.svg                      (../shared/zen-icons/nucleo/bolt.svg) 
@@ -254,26 +252,26 @@
 *  skin/classic/browser/zen-icons/popup-fill.svg                      (../shared/zen-icons/nucleo/popup-fill.svg) 
 *  skin/classic/browser/zen-icons/popup.svg                      (../shared/zen-icons/nucleo/popup.svg) 
 *  skin/classic/browser/zen-icons/print.svg                      (../shared/zen-icons/nucleo/print.svg) 
-*  skin/classic/browser/zen-icons/privateBrowsing.svg                      (../shared/zen-icons/nucleo/privateBrowsing.svg) 
 *  skin/classic/browser/zen-icons/private-window.svg                      (../shared/zen-icons/nucleo/private-window.svg) 
+*  skin/classic/browser/zen-icons/privateBrowsing.svg                      (../shared/zen-icons/nucleo/privateBrowsing.svg) 
 *  skin/classic/browser/zen-icons/reader-mode.svg                      (../shared/zen-icons/nucleo/reader-mode.svg) 
 *  skin/classic/browser/zen-icons/reload.svg                      (../shared/zen-icons/nucleo/reload.svg) 
 *  skin/classic/browser/zen-icons/save.svg                      (../shared/zen-icons/nucleo/save.svg) 
 *  skin/classic/browser/zen-icons/screen-blocked.svg                      (../shared/zen-icons/nucleo/screen-blocked.svg) 
-*  skin/classic/browser/zen-icons/screenshot.svg                      (../shared/zen-icons/nucleo/screenshot.svg) 
 *  skin/classic/browser/zen-icons/screen.svg                      (../shared/zen-icons/nucleo/screen.svg) 
+*  skin/classic/browser/zen-icons/screenshot.svg                      (../shared/zen-icons/nucleo/screenshot.svg) 
 *  skin/classic/browser/zen-icons/search-glass.svg                      (../shared/zen-icons/nucleo/search-glass.svg) 
 *  skin/classic/browser/zen-icons/search-page.svg                      (../shared/zen-icons/nucleo/search-page.svg) 
 *  skin/classic/browser/zen-icons/security-broken.svg                      (../shared/zen-icons/nucleo/security-broken.svg) 
-*  skin/classic/browser/zen-icons/security.svg                      (../shared/zen-icons/nucleo/security.svg) 
 *  skin/classic/browser/zen-icons/security-warning.svg                      (../shared/zen-icons/nucleo/security-warning.svg) 
+*  skin/classic/browser/zen-icons/security.svg                      (../shared/zen-icons/nucleo/security.svg) 
 *  skin/classic/browser/zen-icons/send-to-device.svg                      (../shared/zen-icons/nucleo/send-to-device.svg) 
 *  skin/classic/browser/zen-icons/settings-fill.svg                      (../shared/zen-icons/nucleo/settings-fill.svg) 
 *  skin/classic/browser/zen-icons/settings.svg                      (../shared/zen-icons/nucleo/settings.svg) 
 *  skin/classic/browser/zen-icons/share.svg                      (../shared/zen-icons/nucleo/share.svg) 
 *  skin/classic/browser/zen-icons/sidebar-right.svg                      (../shared/zen-icons/nucleo/sidebar-right.svg) 
-*  skin/classic/browser/zen-icons/sidebars-right.svg                      (../shared/zen-icons/nucleo/sidebars-right.svg) 
 *  skin/classic/browser/zen-icons/sidebar.svg                      (../shared/zen-icons/nucleo/sidebar.svg) 
+*  skin/classic/browser/zen-icons/sidebars-right.svg                      (../shared/zen-icons/nucleo/sidebars-right.svg) 
 *  skin/classic/browser/zen-icons/sliders.svg                      (../shared/zen-icons/nucleo/sliders.svg) 
 *  skin/classic/browser/zen-icons/sparkles.svg                      (../shared/zen-icons/nucleo/sparkles.svg) 
 *  skin/classic/browser/zen-icons/spell-check.svg                      (../shared/zen-icons/nucleo/spell-check.svg) 
@@ -313,7 +311,6 @@
 *  skin/classic/browser/zen-icons/autoplay-media-fill.svg                      (../shared/zen-icons/nucleo/autoplay-media-fill.svg) 
 *  skin/classic/browser/zen-icons/autoplay-media.svg                      (../shared/zen-icons/nucleo/autoplay-media.svg) 
 *  skin/classic/browser/zen-icons/back.svg                      (../shared/zen-icons/nucleo/back.svg) 
-*  skin/classic/browser/zen-icons/blocked-element.svg                      (../shared/zen-icons/nucleo/blocked-element.svg) 
 *  skin/classic/browser/zen-icons/block.svg                      (../shared/zen-icons/nucleo/block.svg) 
 *  skin/classic/browser/zen-icons/blocked-element.svg                      (../shared/zen-icons/nucleo/blocked-element.svg) 
 *  skin/classic/browser/zen-icons/bolt.svg                      (../shared/zen-icons/nucleo/bolt.svg) 
@@ -404,26 +401,26 @@
 *  skin/classic/browser/zen-icons/popup-fill.svg                      (../shared/zen-icons/nucleo/popup-fill.svg) 
 *  skin/classic/browser/zen-icons/popup.svg                      (../shared/zen-icons/nucleo/popup.svg) 
 *  skin/classic/browser/zen-icons/print.svg                      (../shared/zen-icons/nucleo/print.svg) 
-*  skin/classic/browser/zen-icons/privateBrowsing.svg                      (../shared/zen-icons/nucleo/privateBrowsing.svg) 
 *  skin/classic/browser/zen-icons/private-window.svg                      (../shared/zen-icons/nucleo/private-window.svg) 
+*  skin/classic/browser/zen-icons/privateBrowsing.svg                      (../shared/zen-icons/nucleo/privateBrowsing.svg) 
 *  skin/classic/browser/zen-icons/reader-mode.svg                      (../shared/zen-icons/nucleo/reader-mode.svg) 
 *  skin/classic/browser/zen-icons/reload.svg                      (../shared/zen-icons/nucleo/reload.svg) 
 *  skin/classic/browser/zen-icons/save.svg                      (../shared/zen-icons/nucleo/save.svg) 
 *  skin/classic/browser/zen-icons/screen-blocked.svg                      (../shared/zen-icons/nucleo/screen-blocked.svg) 
-*  skin/classic/browser/zen-icons/screenshot.svg                      (../shared/zen-icons/nucleo/screenshot.svg) 
 *  skin/classic/browser/zen-icons/screen.svg                      (../shared/zen-icons/nucleo/screen.svg) 
+*  skin/classic/browser/zen-icons/screenshot.svg                      (../shared/zen-icons/nucleo/screenshot.svg) 
 *  skin/classic/browser/zen-icons/search-glass.svg                      (../shared/zen-icons/nucleo/search-glass.svg) 
 *  skin/classic/browser/zen-icons/search-page.svg                      (../shared/zen-icons/nucleo/search-page.svg) 
 *  skin/classic/browser/zen-icons/security-broken.svg                      (../shared/zen-icons/nucleo/security-broken.svg) 
-*  skin/classic/browser/zen-icons/security.svg                      (../shared/zen-icons/nucleo/security.svg) 
 *  skin/classic/browser/zen-icons/security-warning.svg                      (../shared/zen-icons/nucleo/security-warning.svg) 
+*  skin/classic/browser/zen-icons/security.svg                      (../shared/zen-icons/nucleo/security.svg) 
 *  skin/classic/browser/zen-icons/send-to-device.svg                      (../shared/zen-icons/nucleo/send-to-device.svg) 
 *  skin/classic/browser/zen-icons/settings-fill.svg                      (../shared/zen-icons/nucleo/settings-fill.svg) 
 *  skin/classic/browser/zen-icons/settings.svg                      (../shared/zen-icons/nucleo/settings.svg) 
 *  skin/classic/browser/zen-icons/share.svg                      (../shared/zen-icons/nucleo/share.svg) 
 *  skin/classic/browser/zen-icons/sidebar-right.svg                      (../shared/zen-icons/nucleo/sidebar-right.svg) 
-*  skin/classic/browser/zen-icons/sidebars-right.svg                      (../shared/zen-icons/nucleo/sidebars-right.svg) 
 *  skin/classic/browser/zen-icons/sidebar.svg                      (../shared/zen-icons/nucleo/sidebar.svg) 
+*  skin/classic/browser/zen-icons/sidebars-right.svg                      (../shared/zen-icons/nucleo/sidebars-right.svg) 
 *  skin/classic/browser/zen-icons/sliders.svg                      (../shared/zen-icons/nucleo/sliders.svg) 
 *  skin/classic/browser/zen-icons/sparkles.svg                      (../shared/zen-icons/nucleo/sparkles.svg) 
 *  skin/classic/browser/zen-icons/spell-check.svg                      (../shared/zen-icons/nucleo/spell-check.svg) 
@@ -453,17 +450,22 @@
 *  skin/classic/browser/zen-icons/zoom-out.svg                      (../shared/zen-icons/nucleo/zoom-out.svg) 
 #endif
 *  skin/classic/browser/zen-icons/urlbar-arrow.svg                      (../shared/zen-icons/common/urlbar-arrow.svg) 
-*  skin/classic/browser/zen-icons/library/library-downloads.svg          (../shared/zen-icons/common/library/library-downloads.svg) 
-*  skin/classic/browser/zen-icons/library/library-history.svg          (../shared/zen-icons/common/library/library-history.svg) 
-*  skin/classic/browser/zen-icons/library/library-spaces.svg          (../shared/zen-icons/common/library/library-spaces.svg) 
+*  skin/classic/browser/zen-icons/library/library-downloads.svg          (../shared/zen-icons/common/library/library-downloads.svg)
+*  skin/classic/browser/zen-icons/library/library-downloads-active.svg          (../shared/zen-icons/common/library/library-downloads-active.svg)
+*  skin/classic/browser/zen-icons/library/library-history.svg          (../shared/zen-icons/common/library/library-history.svg)
+*  skin/classic/browser/zen-icons/library/library-history-active.svg          (../shared/zen-icons/common/library/library-history-active.svg)
+*  skin/classic/browser/zen-icons/library/library-spaces.svg          (../shared/zen-icons/common/library/library-spaces.svg)
+*  skin/classic/browser/zen-icons/library/library-spaces-active.svg          (../shared/zen-icons/common/library/library-spaces-active.svg)
+*  skin/classic/browser/zen-icons/library/library-media.svg          (../shared/zen-icons/common/library/library-media.svg)
+*  skin/classic/browser/zen-icons/library/library-media-active.svg          (../shared/zen-icons/common/library/library-media-active.svg)
 *  skin/classic/browser/zen-icons/selectable/airplane.svg          (../shared/zen-icons/common/selectable/airplane.svg) 
 *  skin/classic/browser/zen-icons/selectable/american-football.svg          (../shared/zen-icons/common/selectable/american-football.svg) 
 *  skin/classic/browser/zen-icons/selectable/baseball.svg          (../shared/zen-icons/common/selectable/baseball.svg) 
 *  skin/classic/browser/zen-icons/selectable/basket.svg          (../shared/zen-icons/common/selectable/basket.svg) 
 *  skin/classic/browser/zen-icons/selectable/bed.svg          (../shared/zen-icons/common/selectable/bed.svg) 
 *  skin/classic/browser/zen-icons/selectable/bell.svg          (../shared/zen-icons/common/selectable/bell.svg) 
-*  skin/classic/browser/zen-icons/selectable/bookmark.svg          (../shared/zen-icons/common/selectable/bookmark.svg) 
 *  skin/classic/browser/zen-icons/selectable/book.svg          (../shared/zen-icons/common/selectable/book.svg) 
+*  skin/classic/browser/zen-icons/selectable/bookmark.svg          (../shared/zen-icons/common/selectable/bookmark.svg) 
 *  skin/classic/browser/zen-icons/selectable/briefcase.svg          (../shared/zen-icons/common/selectable/briefcase.svg) 
 *  skin/classic/browser/zen-icons/selectable/brush.svg          (../shared/zen-icons/common/selectable/brush.svg) 
 *  skin/classic/browser/zen-icons/selectable/bug.svg          (../shared/zen-icons/common/selectable/bug.svg) 
@@ -525,8 +527,8 @@
 *  skin/classic/browser/zen-icons/selectable/shapes.svg          (../shared/zen-icons/common/selectable/shapes.svg) 
 *  skin/classic/browser/zen-icons/selectable/shirt.svg          (../shared/zen-icons/common/selectable/shirt.svg) 
 *  skin/classic/browser/zen-icons/selectable/skull.svg          (../shared/zen-icons/common/selectable/skull.svg) 
-*  skin/classic/browser/zen-icons/selectable/squares.svg          (../shared/zen-icons/common/selectable/squares.svg) 
 *  skin/classic/browser/zen-icons/selectable/square.svg          (../shared/zen-icons/common/selectable/square.svg) 
+*  skin/classic/browser/zen-icons/selectable/squares.svg          (../shared/zen-icons/common/selectable/squares.svg) 
 *  skin/classic/browser/zen-icons/selectable/star-1.svg          (../shared/zen-icons/common/selectable/star-1.svg) 
 *  skin/classic/browser/zen-icons/selectable/star.svg          (../shared/zen-icons/common/selectable/star.svg) 
 *  skin/classic/browser/zen-icons/selectable/stats-chart.svg          (../shared/zen-icons/common/selectable/stats-chart.svg) 
diff --git a/src/zen/common/sys/ZenUIMigration.sys.mjs b/src/zen/common/sys/ZenUIMigration.sys.mjs
index d025d97df..250a730a6 100644
--- a/src/zen/common/sys/ZenUIMigration.sys.mjs
+++ b/src/zen/common/sys/ZenUIMigration.sys.mjs
@@ -7,11 +7,14 @@ import { AppConstants } from "resource://gre/modules/AppConstants.sys.mjs";
 const lazy = {};
 
 ChromeUtils.defineESModuleGetters(lazy, {
+  CustomizableUI: "moz-src:///browser/components/customizableui/CustomizableUI.sys.mjs",
   SessionStore: "resource:///modules/sessionstore/SessionStore.sys.mjs",
 });
 
 class nsZenUIMigration {
   PREF_NAME = "zen.ui.migration.version";
+  PREF_LIBRARY_REPLACED_DOWNLOADS =
+    "zen.ui.migration.library-button-replaced-downloads";
   MIGRATION_VERSION = 6;
 
   init(isNewProfile) {
@@ -22,6 +25,14 @@ class nsZenUIMigration {
         console.error("ZenUIMigration: Error during migration", e);
       }
     }
+    try {
+      this.#maybeReplaceDownloadsWithLibrary(isNewProfile);
+    } catch (e) {
+      console.error(
+        "ZenUIMigration: Error replacing downloads with library button",
+        e
+      );
+    }
     this.clearVariables();
     if (this.shouldRestart) {
       Services.startup.quit(
@@ -50,6 +61,28 @@ class nsZenUIMigration {
     this._migrationVersion = this.MIGRATION_VERSION;
   }
 
+  #maybeReplaceDownloadsWithLibrary(isNewProfile) {
+    if (
+      Services.prefs.getBoolPref(this.PREF_LIBRARY_REPLACED_DOWNLOADS, false)
+    ) {
+      return;
+    }
+    if (!isNewProfile) {
+      const placement =
+        lazy.CustomizableUI.getPlacementOfWidget("downloads-button");
+      if (placement?.area === "zen-sidebar-foot-buttons") {
+        const { position } = placement;
+        lazy.CustomizableUI.removeWidgetFromArea("downloads-button");
+        lazy.CustomizableUI.addWidgetToArea(
+          "zen-library-button",
+          "zen-sidebar-foot-buttons",
+          position
+        );
+      }
+    }
+    Services.prefs.setBoolPref(this.PREF_LIBRARY_REPLACED_DOWNLOADS, true);
+  }
+
   _migrateV1() {
     // If there's an userChrome.css or userContent.css existing, we set
     // 'toolkit.legacyUserProfileCustomizations.stylesheets' back to true
diff --git a/src/zen/library/ZenLibrary.mjs b/src/zen/library/ZenLibrary.mjs
index 6397e9178..99cbe2c42 100644
--- a/src/zen/library/ZenLibrary.mjs
+++ b/src/zen/library/ZenLibrary.mjs
@@ -2,7 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-import { html } from "chrome://global/content/vendor/lit.all.mjs";
+import { html, keyed } from "chrome://global/content/vendor/lit.all.mjs";
 import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
 
 let lazy = {};
@@ -51,10 +51,16 @@ export class ZenLibrary extends MozLitElement {
   static queries = {
     _content: "#zen-library-content",
     _tabs: { all: "#zen-library-sidebar-tabs > .library-tab" },
+    _header: "#zen-library-sidebar-header",
   };
 
+  createRenderRoot() {
+    return this;
+  }
+
   constructor() {
     super();
+    this._iconKeys = {};
     this.activeTab = Services.prefs.getStringPref(PREVIOUS_TAB_PREF, "") || "history";
   }
 
@@ -62,6 +68,7 @@ export class ZenLibrary extends MozLitElement {
     if (this.activeTab === value) {
       return;
     }
+    this._iconKeys[value] = Date.now();
     this._activeTab = value;
     Services.prefs.setStringPref(PREVIOUS_TAB_PREF, value);
   }
@@ -106,6 +113,13 @@ export class ZenLibrary extends MozLitElement {
     this.#initialized = false;
   }
 
+  firstUpdated() {
+    super.firstUpdated?.();
+    this._header.appendChild(
+      gZenVerticalTabsManager.actualWindowButtons.cloneNode(true)
+    );
+  }
+
   render() {
     return html`
       <link
@@ -120,11 +134,25 @@ export class ZenLibrary extends MozLitElement {
               <vbox
                 class="zen-library-tab"
                 ?active=${this.activeTab === Section.id}
-                @click=${() => (this.activeTab = Section.id)}
+                @click=${() => {
+                  this._iconKeys[Section.id] = Date.now();
+                  if (this.activeTab !== Section.id) {
+                    this.activeTab = Section.id;
+                  } else {
+                    this.requestUpdate();
+                  }
+                }}
               >
-                <img
-                  src=${`chrome://browser/skin/zen-icons/library/library-${Section.id}.svg`}
-                />
+                ${this.activeTab === Section.id
+                  ? keyed(
+                      this._iconKeys[Section.id],
+                      html`<img
+                        src=${`chrome://browser/skin/zen-icons/library/library-${Section.id}-active.svg`}
+                      />`
+                    )
+                  : html`<img
+                      src=${`chrome://browser/skin/zen-icons/library/library-${Section.id}.svg`}
+                    />`}
                 <label>${lazy.l10n.formatValueSync(Section.label)}</label>
               </vbox>
             `
@@ -237,8 +265,7 @@ export class ZenLibrary extends MozLitElement {
    */
   #computeWrapperTargetPx() {
     const isRightSide = gZenVerticalTabsManager._prefsRightSide;
-    let translateX =
-      window.windowUtils.getBoundsWithoutFlushing(this)[
+    let translateX = this.getBoundingClientRect()[
         isRightSide ? "left" : "right"
       ];
     const contentPosition = window.windowUtils.getBoundsWithoutFlushing(
diff --git a/src/zen/library/ZenLibrarySections.mjs b/src/zen/library/ZenLibrarySections.mjs
index 94d1ca38e..c5dbdf3df 100644
--- a/src/zen/library/ZenLibrarySections.mjs
+++ b/src/zen/library/ZenLibrarySections.mjs
@@ -490,8 +490,8 @@ class SearchSection extends LibrarySection {
       url,
       clientX: rect.left - tabPanelRect.left,
       clientY: rect.top - tabPanelRect.top,
-      width: rect.width,
-      height: rect.height,
+      width: 0,
+      height: 0,
       triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal(),
     });
   }
diff --git a/src/zen/library/zen-library.css b/src/zen/library/zen-library.css
index 03e0ca99b..cd53f24f8 100644
--- a/src/zen/library/zen-library.css
+++ b/src/zen/library/zen-library.css
@@ -4,7 +4,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-:host(zen-library) {
+zen-library {
 
   @media (-moz-platform: windows) {
     --border-radius-medium: 6px;
@@ -26,7 +26,7 @@
   z-index: 2;
 }
 
-:host(zen-library[open]) {
+zen-library[open] {
   transform: translateX(0);
   opacity: 1;
   z-index: 9;
@@ -114,12 +114,7 @@
     height: 28px;
     fill: rgba(255, 255, 255, 0.8);
     stroke: var(--zen-colors-primary);
-    fill-opacity: 0;
-    -moz-context-properties: fill, fill-opacity, stroke;
-  }
-
-  &[active] img {
-    fill-opacity: 1;
+    -moz-context-properties: fill, stroke;
   }
 }