diff --git a/src/core/Icon/EncapsulatedIcon.tsx b/src/core/Icon/EncapsulatedIcon.tsx
index fb493e2d9..9f55f6565 100644
--- a/src/core/Icon/EncapsulatedIcon.tsx
+++ b/src/core/Icon/EncapsulatedIcon.tsx
@@ -1,10 +1,8 @@
 import React from "react";
 import Icon, { IconProps } from "../Icon";
-import { Theme } from "../styles/colors/types";
 import { IconSize } from "./types";
 
 type EncapsulatedIconProps = {
-  theme?: Theme;
   className?: string;
   innerClassName?: string;
   iconSize?: IconSize;
@@ -14,7 +12,6 @@ const ICON_SIZE_REDUCTION = 12;
 const ICON_HEIGHT_REDUCTION = 2;
 
 const EncapsulatedIcon = ({
-  theme = "dark",
   size = "40px",
   iconSize,
   className,
@@ -38,11 +35,11 @@ const EncapsulatedIcon = ({
 
   return (
     <div
-      className={`p-1 rounded-lg ${theme === "light" ? "bg-gradient-to-t" : "bg-gradient-to-b"} from-neutral-400 dark:from-neutral-900 ${className ?? ""}`}
+      className={`p-1 rounded-lg bg-gradient-to-t dark:bg-gradient-to-b ${className ?? "from-neutral-400 dark:from-neutral-900"}`}
       style={{ width: size, height: size }}
     >
       <div
-        className={`flex items-center justify-center rounded-lg bg-neutral-200 dark:bg-neutral-1100 ${innerClassName ?? ""}`}
+        className={`flex items-center justify-center rounded-lg ${innerClassName ?? "bg-neutral-200 dark:bg-neutral-1100"}`}
         style={{ height: computedIconHeight }}
       >
         <Icon size={computedIconSize} {...iconProps} />
diff --git a/src/core/Pricing/PricingCards.tsx b/src/core/Pricing/PricingCards.tsx
index 3c5a5ec97..d9ebf4dba 100644
--- a/src/core/Pricing/PricingCards.tsx
+++ b/src/core/Pricing/PricingCards.tsx
@@ -1,7 +1,6 @@
 import React, { Fragment, useEffect, useRef, useState } from "react";
 import throttle from "lodash.throttle";
 import type { PricingDataFeature } from "./types";
-import { Theme } from "../styles/colors/types";
 import Icon from "../Icon";
 import FeaturedLink from "../FeaturedLink";
 import { IconName } from "../Icon/types";
@@ -9,7 +8,6 @@ import Tooltip from "../Tooltip";
 
 export type PricingCardsProps = {
   data: PricingDataFeature[];
-  theme?: Theme;
   delimiter?: IconName | "blank";
 };
 
diff --git a/src/core/ProductTile.tsx b/src/core/ProductTile.tsx
index 79da2f400..991e3e145 100644
--- a/src/core/ProductTile.tsx
+++ b/src/core/ProductTile.tsx
@@ -36,7 +36,19 @@ const ProductTile = ({
     >
       <div className="flex gap-12 items-center">
         {icon ? (
-          <EncapsulatedIcon name={icon} theme={selected ? "light" : "dark"} />
+          <EncapsulatedIcon
+            name={icon}
+            className={
+              selected
+                ? "from-neutral-900 dark:from-neutral-400"
+                : "from-neutral-400 dark:from-neutral-900"
+            }
+            innerClassName={
+              selected
+                ? "bg-neutral-1100 dark:bg-neutral-200"
+                : "bg-neutral-200 dark:bg-neutral-1100"
+            }
+          />
         ) : null}
         <div
           className={clsx(