diff --git a/src/core/Icon.tsx b/src/core/Icon.tsx
index 740a5ae55..a6e4370e8 100644
--- a/src/core/Icon.tsx
+++ b/src/core/Icon.tsx
@@ -4,7 +4,7 @@ import { IconName } from "./Icon/types";
 import { ColorClass } from "./styles/colors/types";
 import { convertTailwindClassToVar } from "./styles/colors/utils";
 
-type IconProps = {
+export type IconProps = {
   name: IconName;
   size?: string;
   color?: ColorClass;
diff --git a/src/core/Icon/EncapsulatedIcon.tsx b/src/core/Icon/EncapsulatedIcon.tsx
new file mode 100644
index 000000000..709ab2177
--- /dev/null
+++ b/src/core/Icon/EncapsulatedIcon.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import Icon, { IconProps } from "../Icon";
+import { determineThemeColor } from "../styles/colors/utils";
+import { ColorClass, Theme } from "../styles/colors/types";
+
+type EncapsulatedIconProps = {
+  theme?: Theme;
+  className?: string;
+} & IconProps;
+
+const EncapsulatedIcon = ({
+  theme = "dark",
+  size = "40px",
+  className,
+  ...iconProps
+}: EncapsulatedIconProps) => {
+  const t = (color: ColorClass) => determineThemeColor("dark", theme, color);
+  const numericalSize = parseInt(size, 10);
+
+  return (
+    <div
+      className={`p-1 rounded-lg ${theme === "light" ? "bg-gradient-to-t" : "bg-gradient-to-b"} ${t("from-neutral-900")} ${className ?? ""}`}
+      style={{ width: numericalSize, height: numericalSize }}
+    >
+      <div
+        className={`flex items-center justify-center rounded-lg ${t("bg-neutral-1100")}`}
+        style={{ height: numericalSize - 2 }}
+      >
+        <Icon size={`${numericalSize - 12}`} {...iconProps} />
+      </div>
+    </div>
+  );
+};
+
+export default EncapsulatedIcon;
diff --git a/src/core/Icon/Icon.stories.tsx b/src/core/Icon/Icon.stories.tsx
index 0921487f3..c1f537232 100644
--- a/src/core/Icon/Icon.stories.tsx
+++ b/src/core/Icon/Icon.stories.tsx
@@ -1,7 +1,9 @@
 import React from "react";
 import Icon from "../Icon";
+import EncapsulatedIcon from "./EncapsulatedIcon";
 import loadIcons from "../icons";
 import { IconName, iconNames } from "./types";
+import { Theme } from "../styles/colors/types";
 
 export default {
   title: "JS Components/Icon",
@@ -12,7 +14,11 @@ export default {
   tags: ["autodocs"],
 };
 
-const renderIcons = (iconSet: IconName[]) => {
+const renderIcons = (
+  iconSet: IconName[],
+  encapsulated?: boolean,
+  theme?: Theme,
+) => {
   loadIcons();
 
   return (
@@ -25,12 +31,16 @@ const renderIcons = (iconSet: IconName[]) => {
           <code className="ui-text-code mb-8 block">{icon}</code>
           <div className="border inline-flex flex-0">
             <div className="flex pi-checkered-bg">
-              <Icon
-                name={icon}
-                additionalCSS="hover:text-active-orange"
-                color="text-cool-black"
-                size="1.5rem"
-              />
+              {encapsulated ? (
+                <EncapsulatedIcon name={icon} theme={theme ?? "dark"} />
+              ) : (
+                <Icon
+                  name={icon}
+                  additionalCSS="hover:text-active-orange"
+                  color="text-cool-black"
+                  size="1.5rem"
+                />
+              )}
             </div>
           </div>
         </div>
@@ -88,3 +98,11 @@ export const IconWithSecondaryColor = {
     },
   },
 };
+
+export const DarkEncapsulatedIcons = {
+  render: () => renderIcons([...iconNames.product], true),
+};
+
+export const LightEncapsulatedIcons = {
+  render: () => renderIcons([...iconNames.product], true, "light"),
+};
diff --git a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
index 84e4effbd..797b5639e 100644
--- a/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
+++ b/src/core/Icon/__snapshots__/Icon.stories.tsx.snap
@@ -1,5 +1,148 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`JS Components/Icon DarkEncapsulatedIcons smoke-test 1`] = `
+<div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
+    <code class="ui-text-code mb-8 block">
+      icon-product-asset-tracking
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+             style="width: 40px; height: 40px;"
+        >
+          <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+               style="height: 38px;"
+          >
+            <svg class=" "
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-asset-tracking">
+              </use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
+    <code class="ui-text-code mb-8 block">
+      icon-product-chat
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+             style="width: 40px; height: 40px;"
+        >
+          <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+               style="height: 38px;"
+          >
+            <svg class=" "
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-chat">
+              </use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
+    <code class="ui-text-code mb-8 block">
+      icon-product-liveobjects
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+             style="width: 40px; height: 40px;"
+        >
+          <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+               style="height: 38px;"
+          >
+            <svg class=" "
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-liveobjects">
+              </use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
+    <code class="ui-text-code mb-8 block">
+      icon-product-livesync
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+             style="width: 40px; height: 40px;"
+        >
+          <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+               style="height: 38px;"
+          >
+            <svg class=" "
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-livesync">
+              </use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
+    <code class="ui-text-code mb-8 block">
+      icon-product-pubsub
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+             style="width: 40px; height: 40px;"
+        >
+          <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+               style="height: 38px;"
+          >
+            <svg class=" "
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-pubsub">
+              </use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
+    <code class="ui-text-code mb-8 block">
+      icon-product-spaces
+    </code>
+    <div class="border inline-flex flex-0">
+      <div class="flex pi-checkered-bg">
+        <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+             style="width: 40px; height: 40px;"
+        >
+          <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+               style="height: 38px;"
+          >
+            <svg class=" "
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-spaces">
+              </use>
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`JS Components/Icon DisplayIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
@@ -1812,128 +1955,181 @@ exports[`JS Components/Icon IconWithSecondaryColor smoke-test 1`] = `
 </div>
 `;
 
-exports[`JS Components/Icon Other smoke-test 1`] = `
+exports[`JS Components/Icon LightEncapsulatedIcons smoke-test 1`] = `
 <div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
     <code class="ui-text-code mb-8 block">
-      quote
+      icon-product-asset-tracking
     </code>
     <div class="border inline-flex flex-0">
       <div class="flex pi-checkered-bg">
-        <svg class="text-cool-black hover:text-active-orange"
-             style="width: 1.5rem; height: 1.5rem;"
+        <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
+             style="width: 40px; height: 40px;"
         >
-          <use xlink:href="#sprite-quote">
-          </use>
-        </svg>
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200"
+               style="height: 38px;"
+          >
+            <svg class=" "
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-asset-tracking">
+              </use>
+            </svg>
+          </div>
+        </div>
       </div>
     </div>
   </div>
-</div>
-`;
-
-exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
-<div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
     <code class="ui-text-code mb-8 block">
-      icon-product-asset-tracking
+      icon-product-chat
     </code>
     <div class="border inline-flex flex-0">
       <div class="flex pi-checkered-bg">
-        <svg class="text-cool-black hover:text-active-orange"
-             style="width: 1.5rem; height: 1.5rem;"
+        <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
+             style="width: 40px; height: 40px;"
         >
-          <use xlink:href="#sprite-icon-product-asset-tracking">
-          </use>
-        </svg>
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200"
+               style="height: 38px;"
+          >
+            <svg class=" "
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-chat">
+              </use>
+            </svg>
+          </div>
+        </div>
       </div>
     </div>
   </div>
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
     <code class="ui-text-code mb-8 block">
-      icon-product-chat
+      icon-product-liveobjects
     </code>
     <div class="border inline-flex flex-0">
       <div class="flex pi-checkered-bg">
-        <svg class="text-cool-black hover:text-active-orange"
-             style="width: 1.5rem; height: 1.5rem;"
+        <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
+             style="width: 40px; height: 40px;"
         >
-          <use xlink:href="#sprite-icon-product-chat">
-          </use>
-        </svg>
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200"
+               style="height: 38px;"
+          >
+            <svg class=" "
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-liveobjects">
+              </use>
+            </svg>
+          </div>
+        </div>
       </div>
     </div>
   </div>
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
     <code class="ui-text-code mb-8 block">
-      icon-product-liveobjects
+      icon-product-livesync
     </code>
     <div class="border inline-flex flex-0">
       <div class="flex pi-checkered-bg">
-        <svg class="text-cool-black hover:text-active-orange"
-             style="width: 1.5rem; height: 1.5rem;"
+        <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
+             style="width: 40px; height: 40px;"
         >
-          <use xlink:href="#sprite-icon-product-liveobjects">
-          </use>
-        </svg>
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200"
+               style="height: 38px;"
+          >
+            <svg class=" "
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-livesync">
+              </use>
+            </svg>
+          </div>
+        </div>
       </div>
     </div>
   </div>
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
     <code class="ui-text-code mb-8 block">
-      icon-product-livesync
+      icon-product-pubsub
     </code>
     <div class="border inline-flex flex-0">
       <div class="flex pi-checkered-bg">
-        <svg class="text-cool-black hover:text-active-orange"
-             style="width: 1.5rem; height: 1.5rem;"
+        <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
+             style="width: 40px; height: 40px;"
         >
-          <use xlink:href="#sprite-icon-product-livesync">
-          </use>
-        </svg>
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200"
+               style="height: 38px;"
+          >
+            <svg class=" "
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-pubsub">
+              </use>
+            </svg>
+          </div>
+        </div>
       </div>
     </div>
   </div>
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
     <code class="ui-text-code mb-8 block">
-      icon-product-pubsub
+      icon-product-spaces
     </code>
     <div class="border inline-flex flex-0">
       <div class="flex pi-checkered-bg">
-        <svg class="text-cool-black hover:text-active-orange"
-             style="width: 1.5rem; height: 1.5rem;"
+        <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
+             style="width: 40px; height: 40px;"
         >
-          <use xlink:href="#sprite-icon-product-pubsub">
-          </use>
-        </svg>
+          <div class="flex items-center justify-center rounded-lg bg-neutral-200"
+               style="height: 38px;"
+          >
+            <svg class=" "
+                 style="width: 28px; height: 28px;"
+            >
+              <use xlink:href="#sprite-icon-product-spaces">
+              </use>
+            </svg>
+          </div>
+        </div>
       </div>
     </div>
   </div>
+</div>
+`;
+
+exports[`JS Components/Icon Other smoke-test 1`] = `
+<div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
     <code class="ui-text-code mb-8 block">
-      icon-product-spaces
+      quote
     </code>
     <div class="border inline-flex flex-0">
       <div class="flex pi-checkered-bg">
         <svg class="text-cool-black hover:text-active-orange"
              style="width: 1.5rem; height: 1.5rem;"
         >
-          <use xlink:href="#sprite-icon-product-spaces">
+          <use xlink:href="#sprite-quote">
           </use>
         </svg>
       </div>
     </div>
   </div>
+</div>
+`;
+
+exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
+<div class="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
     <code class="ui-text-code mb-8 block">
-      icon-product-pubsub-encapsulated
+      icon-product-asset-tracking
     </code>
     <div class="border inline-flex flex-0">
       <div class="flex pi-checkered-bg">
         <svg class="text-cool-black hover:text-active-orange"
              style="width: 1.5rem; height: 1.5rem;"
         >
-          <use xlink:href="#sprite-icon-product-pubsub-encapsulated">
+          <use xlink:href="#sprite-icon-product-asset-tracking">
           </use>
         </svg>
       </div>
@@ -1941,14 +2137,14 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
   </div>
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
     <code class="ui-text-code mb-8 block">
-      icon-product-chat-encapsulated
+      icon-product-chat
     </code>
     <div class="border inline-flex flex-0">
       <div class="flex pi-checkered-bg">
         <svg class="text-cool-black hover:text-active-orange"
              style="width: 1.5rem; height: 1.5rem;"
         >
-          <use xlink:href="#sprite-icon-product-chat-encapsulated">
+          <use xlink:href="#sprite-icon-product-chat">
           </use>
         </svg>
       </div>
@@ -1956,14 +2152,14 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
   </div>
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
     <code class="ui-text-code mb-8 block">
-      icon-product-spaces-encapsulated
+      icon-product-liveobjects
     </code>
     <div class="border inline-flex flex-0">
       <div class="flex pi-checkered-bg">
         <svg class="text-cool-black hover:text-active-orange"
              style="width: 1.5rem; height: 1.5rem;"
         >
-          <use xlink:href="#sprite-icon-product-spaces-encapsulated">
+          <use xlink:href="#sprite-icon-product-liveobjects">
           </use>
         </svg>
       </div>
@@ -1971,14 +2167,14 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
   </div>
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
     <code class="ui-text-code mb-8 block">
-      icon-product-livesync-encapsulated
+      icon-product-livesync
     </code>
     <div class="border inline-flex flex-0">
       <div class="flex pi-checkered-bg">
         <svg class="text-cool-black hover:text-active-orange"
              style="width: 1.5rem; height: 1.5rem;"
         >
-          <use xlink:href="#sprite-icon-product-livesync-encapsulated">
+          <use xlink:href="#sprite-icon-product-livesync">
           </use>
         </svg>
       </div>
@@ -1986,14 +2182,14 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
   </div>
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
     <code class="ui-text-code mb-8 block">
-      icon-product-asset-tracking-encapsulated
+      icon-product-pubsub
     </code>
     <div class="border inline-flex flex-0">
       <div class="flex pi-checkered-bg">
         <svg class="text-cool-black hover:text-active-orange"
              style="width: 1.5rem; height: 1.5rem;"
         >
-          <use xlink:href="#sprite-icon-product-asset-tracking-encapsulated">
+          <use xlink:href="#sprite-icon-product-pubsub">
           </use>
         </svg>
       </div>
@@ -2001,14 +2197,14 @@ exports[`JS Components/Icon ProductIcons smoke-test 1`] = `
   </div>
   <div class="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12">
     <code class="ui-text-code mb-8 block">
-      icon-product-liveobjects-encapsulated
+      icon-product-spaces
     </code>
     <div class="border inline-flex flex-0">
       <div class="flex pi-checkered-bg">
         <svg class="text-cool-black hover:text-active-orange"
              style="width: 1.5rem; height: 1.5rem;"
         >
-          <use xlink:href="#sprite-icon-product-liveobjects-encapsulated">
+          <use xlink:href="#sprite-icon-product-spaces">
           </use>
         </svg>
       </div>
diff --git a/src/core/Icon/types.ts b/src/core/Icon/types.ts
index aefadceb5..58effbccd 100644
--- a/src/core/Icon/types.ts
+++ b/src/core/Icon/types.ts
@@ -180,12 +180,6 @@ const productIcons = [
   "icon-product-livesync",
   "icon-product-pubsub",
   "icon-product-spaces",
-  "icon-product-pubsub-encapsulated",
-  "icon-product-chat-encapsulated",
-  "icon-product-spaces-encapsulated",
-  "icon-product-livesync-encapsulated",
-  "icon-product-asset-tracking-encapsulated",
-  "icon-product-liveobjects-encapsulated",
 ] as const;
 
 export const iconNames = {
diff --git a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
index 9118fd954..387e61f46 100644
--- a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
+++ b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
@@ -2,13 +2,21 @@
 
 exports[`JS Components/Product Tile ProductTileWithOverriddenStylesAndClick smoke-test 1`] = `
 <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 bg-pink-800 hover:bg-pink-600 cursor-pointer">
-  <div class="flex gap-12">
-    <svg class=" "
-         style="width: 48px; height: 48px;"
+  <div class="flex gap-12 items-center">
+    <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+         style="width: 40px; height: 40px;"
     >
-      <use xlink:href="#sprite-icon-product-pubsub-encapsulated">
-      </use>
-    </svg>
+      <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+           style="height: 38px;"
+      >
+        <svg class=" "
+             style="width: 28px; height: 28px;"
+        >
+          <use xlink:href="#sprite-icon-product-pubsub">
+          </use>
+        </svg>
+      </div>
+    </div>
     <div class="flex flex-col justify-center ">
       <p class="ui-text-p3 text-neutral-300 font-medium">
         Ably
@@ -27,13 +35,21 @@ exports[`JS Components/Product Tile ProductTileWithOverriddenStylesAndClick smok
 exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
 <div class="grid sm:grid-cols-3 gap-32">
   <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
-    <div class="flex gap-12">
-      <svg class=" "
-           style="width: 48px; height: 48px;"
+    <div class="flex gap-12 items-center">
+      <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+           style="width: 40px; height: 40px;"
       >
-        <use xlink:href="#sprite-icon-product-pubsub-encapsulated">
-        </use>
-      </svg>
+        <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+             style="height: 38px;"
+        >
+          <svg class=" "
+               style="width: 28px; height: 28px;"
+          >
+            <use xlink:href="#sprite-icon-product-pubsub">
+            </use>
+          </svg>
+        </div>
+      </div>
       <div class="flex flex-col justify-center ">
         <p class="ui-text-p3 text-neutral-300 font-medium">
           Ably
@@ -48,13 +64,21 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
     </p>
   </div>
   <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
-    <div class="flex gap-12">
-      <svg class=" "
-           style="width: 48px; height: 48px;"
+    <div class="flex gap-12 items-center">
+      <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+           style="width: 40px; height: 40px;"
       >
-        <use xlink:href="#sprite-icon-product-chat-encapsulated">
-        </use>
-      </svg>
+        <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+             style="height: 38px;"
+        >
+          <svg class=" "
+               style="width: 28px; height: 28px;"
+          >
+            <use xlink:href="#sprite-icon-product-chat">
+            </use>
+          </svg>
+        </div>
+      </div>
       <div class="flex flex-col justify-center ">
         <p class="ui-text-p3 text-neutral-300 font-medium">
           Ably
@@ -69,13 +93,21 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
     </p>
   </div>
   <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
-    <div class="flex gap-12">
-      <svg class=" "
-           style="width: 48px; height: 48px;"
+    <div class="flex gap-12 items-center">
+      <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+           style="width: 40px; height: 40px;"
       >
-        <use xlink:href="#sprite-icon-product-spaces-encapsulated">
-        </use>
-      </svg>
+        <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+             style="height: 38px;"
+        >
+          <svg class=" "
+               style="width: 28px; height: 28px;"
+          >
+            <use xlink:href="#sprite-icon-product-spaces">
+            </use>
+          </svg>
+        </div>
+      </div>
       <div class="flex flex-col justify-center ">
         <p class="ui-text-p3 text-neutral-300 font-medium">
           Ably
@@ -90,13 +122,21 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
     </p>
   </div>
   <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
-    <div class="flex gap-12">
-      <svg class=" "
-           style="width: 48px; height: 48px;"
+    <div class="flex gap-12 items-center">
+      <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+           style="width: 40px; height: 40px;"
       >
-        <use xlink:href="#sprite-icon-product-livesync-encapsulated">
-        </use>
-      </svg>
+        <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+             style="height: 38px;"
+        >
+          <svg class=" "
+               style="width: 28px; height: 28px;"
+          >
+            <use xlink:href="#sprite-icon-product-livesync">
+            </use>
+          </svg>
+        </div>
+      </div>
       <div class="flex flex-col justify-center ">
         <p class="ui-text-p3 text-neutral-300 font-medium">
           Ably
@@ -111,13 +151,21 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
     </p>
   </div>
   <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
-    <div class="flex gap-12">
-      <svg class=" "
-           style="width: 48px; height: 48px;"
+    <div class="flex gap-12 items-center">
+      <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+           style="width: 40px; height: 40px;"
       >
-        <use xlink:href="#sprite-icon-product-asset-tracking-encapsulated">
-        </use>
-      </svg>
+        <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+             style="height: 38px;"
+        >
+          <svg class=" "
+               style="width: 28px; height: 28px;"
+          >
+            <use xlink:href="#sprite-icon-product-asset-tracking">
+            </use>
+          </svg>
+        </div>
+      </div>
       <div class="flex flex-col justify-center ">
         <p class="ui-text-p3 text-neutral-300 font-medium">
           Ably
@@ -132,7 +180,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
     </p>
   </div>
   <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
-    <div class="flex gap-12">
+    <div class="flex gap-12 items-center">
       <div class="flex flex-row items-center gap-4 ">
         <p class="ui-text-p2 text-neutral-300 font-medium">
           Ably
@@ -143,7 +191,7 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
       </div>
     </div>
     <div class="-mt-8">
-      <div class="table-cell bg-neutral-1000 rounded-full px-6 py-2 text-neutral-600 tracking-tighten-0.015 font-bold text-[8px] leading-snug">
+      <div class="table-cell font-sans bg-neutral-1000 rounded-full px-6 py-2 text-gui-unavailable tracking-tighten-0.015 font-bold text-[8px] leading-snug">
         COMING SOON
       </div>
     </div>
@@ -156,28 +204,36 @@ exports[`JS Components/Product Tile ProductTiles smoke-test 1`] = `
 
 exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
 <div class="grid grid-cols-3 gap-32">
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-300 ">
-    <div class="flex gap-12">
-      <svg class=" "
-           style="width: 48px; height: 48px;"
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-100  ">
+    <div class="flex gap-12 items-center">
+      <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
+           style="width: 40px; height: 40px;"
       >
-        <use xlink:href="#sprite-icon-product-pubsub-encapsulated">
-        </use>
-      </svg>
+        <div class="flex items-center justify-center rounded-lg bg-neutral-200"
+             style="height: 38px;"
+        >
+          <svg class=" "
+               style="width: 28px; height: 28px;"
+          >
+            <use xlink:href="#sprite-icon-product-pubsub">
+            </use>
+          </svg>
+        </div>
+      </div>
       <div class="flex flex-col justify-center ">
         <p class="ui-text-p3 text-neutral-1000 font-medium">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-1300 font-bold mt-[-3px]">
+        <p class="ui-text-p2 text-neutral-1000 font-bold mt-[-3px]">
           PubSub
         </p>
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-1000 font-medium leading-snug">
+    <p class="ui-text-p3 text-neutral-600 font-medium leading-snug">
       Low-level APIs to build any realtime experience
     </p>
     <a href="/docs/products/channels"
-       class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 ui-btn-secondary w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-1300"
+       class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-1300"
        style="--featured-link-icon-size: var(--fs-p2);"
     >
       View docs
@@ -190,13 +246,21 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
     </a>
   </div>
   <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
-    <div class="flex gap-12">
-      <svg class=" "
-           style="width: 48px; height: 48px;"
+    <div class="flex gap-12 items-center">
+      <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+           style="width: 40px; height: 40px;"
       >
-        <use xlink:href="#sprite-icon-product-chat-encapsulated">
-        </use>
-      </svg>
+        <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+             style="height: 38px;"
+        >
+          <svg class=" "
+               style="width: 28px; height: 28px;"
+          >
+            <use xlink:href="#sprite-icon-product-chat">
+            </use>
+          </svg>
+        </div>
+      </div>
       <div class="flex flex-col justify-center ">
         <p class="ui-text-p3 text-neutral-300 font-medium">
           Ably
@@ -210,28 +274,36 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       Rapidly build chat features and roll-out at scale
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-300 ">
-    <div class="flex gap-12">
-      <svg class=" "
-           style="width: 48px; height: 48px;"
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-100  ">
+    <div class="flex gap-12 items-center">
+      <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
+           style="width: 40px; height: 40px;"
       >
-        <use xlink:href="#sprite-icon-product-spaces-encapsulated">
-        </use>
-      </svg>
+        <div class="flex items-center justify-center rounded-lg bg-neutral-200"
+             style="height: 38px;"
+        >
+          <svg class=" "
+               style="width: 28px; height: 28px;"
+          >
+            <use xlink:href="#sprite-icon-product-spaces">
+            </use>
+          </svg>
+        </div>
+      </div>
       <div class="flex flex-col justify-center ">
         <p class="ui-text-p3 text-neutral-1000 font-medium">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-1300 font-bold mt-[-3px]">
+        <p class="ui-text-p2 text-neutral-1000 font-bold mt-[-3px]">
           Spaces
         </p>
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-1000 font-medium leading-snug">
+    <p class="ui-text-p3 text-neutral-600 font-medium leading-snug">
       Create collaborative environments in a few lines of code
     </p>
     <a href="/docs/products/spaces"
-       class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 ui-btn-secondary w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-1300"
+       class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-1300"
        style="--featured-link-icon-size: var(--fs-p2);"
     >
       Explore
@@ -244,13 +316,21 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
     </a>
   </div>
   <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
-    <div class="flex gap-12">
-      <svg class=" "
-           style="width: 48px; height: 48px;"
+    <div class="flex gap-12 items-center">
+      <div class="p-1 rounded-lg bg-gradient-to-b from-neutral-900 "
+           style="width: 40px; height: 40px;"
       >
-        <use xlink:href="#sprite-icon-product-livesync-encapsulated">
-        </use>
-      </svg>
+        <div class="flex items-center justify-center rounded-lg bg-neutral-1100"
+             style="height: 38px;"
+        >
+          <svg class=" "
+               style="width: 28px; height: 28px;"
+          >
+            <use xlink:href="#sprite-icon-product-livesync">
+            </use>
+          </svg>
+        </div>
+      </div>
       <div class="flex flex-col justify-center ">
         <p class="ui-text-p3 text-neutral-300 font-medium">
           Ably
@@ -264,28 +344,36 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       Sync database changes with frontend clients
     </p>
   </div>
-  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-300 ">
-    <div class="flex gap-12">
-      <svg class=" "
-           style="width: 48px; height: 48px;"
+  <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-100  ">
+    <div class="flex gap-12 items-center">
+      <div class="p-1 rounded-lg bg-gradient-to-t from-neutral-400 "
+           style="width: 40px; height: 40px;"
       >
-        <use xlink:href="#sprite-icon-product-asset-tracking-encapsulated">
-        </use>
-      </svg>
+        <div class="flex items-center justify-center rounded-lg bg-neutral-200"
+             style="height: 38px;"
+        >
+          <svg class=" "
+               style="width: 28px; height: 28px;"
+          >
+            <use xlink:href="#sprite-icon-product-asset-tracking">
+            </use>
+          </svg>
+        </div>
+      </div>
       <div class="flex flex-col justify-center ">
         <p class="ui-text-p3 text-neutral-1000 font-medium">
           Ably
         </p>
-        <p class="ui-text-p2 text-neutral-1300 font-bold mt-[-3px]">
+        <p class="ui-text-p2 text-neutral-1000 font-bold mt-[-3px]">
           Asset Tracking
         </p>
       </div>
     </div>
-    <p class="ui-text-p3 text-neutral-1000 font-medium leading-snug">
+    <p class="ui-text-p3 text-neutral-600 font-medium leading-snug">
       Simple APIs to build realtime tracking applications
     </p>
     <a href="/docs/products/asset-tracking"
-       class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 ui-btn-secondary w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-1300"
+       class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-text-p2 py-8 ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-1300"
        style="--featured-link-icon-size: var(--fs-p2);"
     >
       Explore
@@ -298,7 +386,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
     </a>
   </div>
   <div class="rounded-lg p-12 flex flex-col gap-8 transition-colors bg-neutral-1200 hover:bg-neutral-1100 ">
-    <div class="flex gap-12">
+    <div class="flex gap-12 items-center">
       <div class="flex flex-row items-center gap-4 ">
         <p class="ui-text-p2 text-neutral-300 font-medium">
           Ably
@@ -309,7 +397,7 @@ exports[`JS Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       </div>
     </div>
     <div class="-mt-8">
-      <div class="table-cell bg-neutral-1000 rounded-full px-6 py-2 text-neutral-600 tracking-tighten-0.015 font-bold text-[8px] leading-snug">
+      <div class="table-cell font-sans bg-neutral-1000 rounded-full px-6 py-2 text-gui-unavailable tracking-tighten-0.015 font-bold text-[8px] leading-snug">
         COMING SOON
       </div>
     </div>
diff --git a/src/core/icons/icon-product-asset-tracking-encapsulated.svg b/src/core/icons/icon-product-asset-tracking-encapsulated.svg
deleted file mode 100644
index cb5c0337a..000000000
--- a/src/core/icons/icon-product-asset-tracking-encapsulated.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 0.375H30C35.3157 0.375 39.625 4.68426 39.625 10V30C39.625 35.3157 35.3157 39.625 30 39.625H10C4.68426 39.625 0.375 35.3157 0.375 30V10C0.375 4.68426 4.68426 0.375 10 0.375Z" fill="#202531"/>
-<path d="M10 0.375H30C35.3157 0.375 39.625 4.68426 39.625 10V30C39.625 35.3157 35.3157 39.625 30 39.625H10C4.68426 39.625 0.375 35.3157 0.375 30V10C0.375 4.68426 4.68426 0.375 10 0.375Z" stroke="url(#paint0_linear_4209_14107)" stroke-width="0.75"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21.7099 30.8795C24.4143 27.864 29.375 21.7778 29.375 17.7084C29.375 12.5307 25.1777 8.33337 20 8.33337C14.8223 8.33337 10.625 12.5307 10.625 17.7084C10.625 21.7778 15.5857 27.864 18.2901 30.8795C19.214 31.9098 20.786 31.9098 21.7099 30.8795ZM20 21.4583C22.0711 21.4583 23.75 19.7794 23.75 17.7083C23.75 15.6373 22.0711 13.9583 20 13.9583C17.9289 13.9583 16.25 15.6373 16.25 17.7083C16.25 19.7794 17.9289 21.4583 20 21.4583Z" fill="url(#paint1_linear_4209_14107)"/>
-<defs>
-<linearGradient id="paint0_linear_4209_14107" x1="20" y1="0" x2="20" y2="40" gradientUnits="userSpaceOnUse">
-<stop stop-color="#39414E"/>
-<stop offset="1" stop-color="#39414E" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_4209_14107" x1="20" y1="8.33337" x2="20" y2="31.6523" gradientUnits="userSpaceOnUse">
-<stop stop-color="#B986F8"/>
-<stop offset="1" stop-color="#9951F5"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/src/core/icons/icon-product-chat-encapsulated.svg b/src/core/icons/icon-product-chat-encapsulated.svg
deleted file mode 100644
index 4965f978b..000000000
--- a/src/core/icons/icon-product-chat-encapsulated.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 0.375H30C35.3157 0.375 39.625 4.68426 39.625 10V30C39.625 35.3157 35.3157 39.625 30 39.625H10C4.68426 39.625 0.375 35.3157 0.375 30V10C0.375 4.68426 4.68426 0.375 10 0.375Z" fill="#202531"/>
-<path d="M10 0.375H30C35.3157 0.375 39.625 4.68426 39.625 10V30C39.625 35.3157 35.3157 39.625 30 39.625H10C4.68426 39.625 0.375 35.3157 0.375 30V10C0.375 4.68426 4.68426 0.375 10 0.375Z" stroke="url(#paint0_linear_4209_14062)" stroke-width="0.75"/>
-<g clip-path="url(#clip0_4209_14062)">
-<path d="M11.6673 8.33337H28.334C30.1749 8.33337 31.6673 9.82576 31.6673 11.6667V30.4918C31.6673 31.5795 30.3744 32.1482 29.5727 31.4133L24.4063 26.6774C24.2526 26.5365 24.0517 26.4584 23.8432 26.4584H11.6673C9.82637 26.4584 8.33398 24.966 8.33398 23.125V11.6667C8.33398 9.82576 9.82637 8.33337 11.6673 8.33337Z" fill="url(#paint1_linear_4209_14062)"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_4209_14062" x1="20" y1="0" x2="20" y2="40" gradientUnits="userSpaceOnUse">
-<stop stop-color="#39414E"/>
-<stop offset="1" stop-color="#39414E" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_4209_14062" x1="20.0007" y1="8.33337" x2="20.0007" y2="32.0834" gradientUnits="userSpaceOnUse">
-<stop stop-color="#4AD4FF"/>
-<stop offset="1" stop-color="#2CC0FF"/>
-</linearGradient>
-<clipPath id="clip0_4209_14062">
-<rect width="26.6667" height="26.6667" fill="white" transform="translate(6.66602 6.66663)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/core/icons/icon-product-livesync-encapsulated.svg b/src/core/icons/icon-product-livesync-encapsulated.svg
deleted file mode 100644
index 21e142549..000000000
--- a/src/core/icons/icon-product-livesync-encapsulated.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 0.375H30C35.3157 0.375 39.625 4.68426 39.625 10V30C39.625 35.3157 35.3157 39.625 30 39.625H10C4.68426 39.625 0.375 35.3157 0.375 30V10C0.375 4.68426 4.68426 0.375 10 0.375Z" fill="#202531"/>
-<path d="M10 0.375H30C35.3157 0.375 39.625 4.68426 39.625 10V30C39.625 35.3157 35.3157 39.625 30 39.625H10C4.68426 39.625 0.375 35.3157 0.375 30V10C0.375 4.68426 4.68426 0.375 10 0.375Z" stroke="url(#paint0_linear_4209_14088)" stroke-width="0.75"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22.0833 10.8333H20V17.0247C20 17.7219 19.1948 18.1108 18.6486 17.6774L8.74746 9.81933C8.12916 9.32862 8.47615 8.33325 9.2655 8.33325H18.75H20H22.0833C27.3761 8.33325 31.6667 12.6239 31.6667 17.9166V21.2499C31.6667 21.9403 31.107 22.4999 30.4167 22.4999C29.7263 22.4999 29.1667 21.9403 29.1667 21.2499V17.9166C29.1667 14.0046 25.9954 10.8333 22.0833 10.8333ZM17.9154 29.1667H19.9987V22.9753C19.9987 22.278 20.8039 21.8891 21.3501 22.3225L31.2512 30.1806C31.8695 30.6713 31.5226 31.6667 30.7332 31.6667H21.2487H19.9987H17.9154C12.6226 31.6667 8.33203 27.3761 8.33203 22.0833V18.75C8.33203 18.0596 8.89168 17.5 9.58203 17.5C10.2724 17.5 10.832 18.0596 10.832 18.75V22.0833C10.832 25.9954 14.0033 29.1667 17.9154 29.1667Z" fill="url(#paint1_linear_4209_14088)"/>
-<defs>
-<linearGradient id="paint0_linear_4209_14088" x1="20" y1="0" x2="20" y2="40" gradientUnits="userSpaceOnUse">
-<stop stop-color="#39414E"/>
-<stop offset="1" stop-color="#39414E" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_4209_14088" x1="20.0479" y1="8.33325" x2="20.0479" y2="22.5" gradientUnits="userSpaceOnUse">
-<stop stop-color="#00E80B"/>
-<stop offset="1" stop-color="#00C008"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/src/core/icons/icon-product-pubsub-encapsulated.svg b/src/core/icons/icon-product-pubsub-encapsulated.svg
deleted file mode 100644
index bdd4491e6..000000000
--- a/src/core/icons/icon-product-pubsub-encapsulated.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.208333" y="0.208333" width="39.5833" height="39.5833" rx="9.79167" fill="#202531"/>
-<rect x="0.208333" y="0.208333" width="39.5833" height="39.5833" rx="9.79167" stroke="url(#paint0_linear_4209_14043)" stroke-width="0.416667"/>
-<g clip-path="url(#clip0_4209_14043)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29597 23.3082L18.4591 7.0472C18.9028 6.33722 19.9991 6.65163 19.9991 7.48887V24.5832H9.00263C8.3481 24.5832 7.94907 23.8632 8.29597 23.3082ZM19.9991 24.5832L19.9991 32.5109C19.9991 33.3481 21.0954 33.6626 21.5391 32.9526L31.7022 16.6916C32.0491 16.1365 31.6501 15.4166 30.9956 15.4166L19.9991 15.4166L19.9991 24.5832Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.29597 23.3082L18.4591 7.0472C18.9028 6.33722 19.9991 6.65163 19.9991 7.48887V24.5832H9.00263C8.3481 24.5832 7.94907 23.8632 8.29597 23.3082ZM19.9991 24.5832L19.9991 32.5109C19.9991 33.3481 21.0954 33.6626 21.5391 32.9526L31.7022 16.6916C32.0491 16.1365 31.6501 15.4166 30.9956 15.4166L19.9991 15.4166L19.9991 24.5832Z" fill="url(#paint1_linear_4209_14043)"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_4209_14043" x1="20" y1="0" x2="20" y2="40" gradientUnits="userSpaceOnUse">
-<stop stop-color="#39414E"/>
-<stop offset="1" stop-color="#39414E" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_4209_14043" x1="19.9991" y1="11.0468" x2="19.9991" y2="31.3093" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FF5416"/>
-<stop offset="1" stop-color="#FF2739"/>
-</linearGradient>
-<clipPath id="clip0_4209_14043">
-<rect width="26.6667" height="26.6667" fill="white" transform="translate(6.66602 6.66663)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/src/core/icons/icon-product-spaces-encapsulated.svg b/src/core/icons/icon-product-spaces-encapsulated.svg
deleted file mode 100644
index 2818dbb6c..000000000
--- a/src/core/icons/icon-product-spaces-encapsulated.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 0.375H30C35.3157 0.375 39.625 4.68426 39.625 10V30C39.625 35.3157 35.3157 39.625 30 39.625H10C4.68426 39.625 0.375 35.3157 0.375 30V10C0.375 4.68426 4.68426 0.375 10 0.375Z" fill="#202531"/>
-<path d="M10 0.375H30C35.3157 0.375 39.625 4.68426 39.625 10V30C39.625 35.3157 35.3157 39.625 30 39.625H10C4.68426 39.625 0.375 35.3157 0.375 30V10C0.375 4.68426 4.68426 0.375 10 0.375Z" stroke="url(#paint0_linear_4209_14075)" stroke-width="0.75"/>
-<g clip-path="url(#clip0_4209_14075)">
-<path d="M15.55 31.5454L9.22463 10.7853C8.93307 9.82838 9.82777 8.93368 10.7847 9.22524L31.5448 15.5506C32.7015 15.903 32.7336 17.5288 31.5918 17.9267L22.2181 21.1933C21.7377 21.3607 21.3601 21.7383 21.1927 22.2187L17.9261 31.5924C17.5282 32.7342 15.9024 32.7021 15.55 31.5454Z" fill="url(#paint1_linear_4209_14075)"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_4209_14075" x1="20" y1="0" x2="20" y2="40" gradientUnits="userSpaceOnUse">
-<stop stop-color="#39414E"/>
-<stop offset="1" stop-color="#39414E" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_4209_14075" x1="21.8743" y1="8.54163" x2="21.8743" y2="35.2083" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FF17D2"/>
-<stop offset="1" stop-color="#D400AB"/>
-</linearGradient>
-<clipPath id="clip0_4209_14075">
-<rect width="26.6667" height="26.6667" fill="white" transform="translate(6.66602 6.66663)"/>
-</clipPath>
-</defs>
-</svg>