diff --git a/packages/calcite-components/calcite-preset.ts b/packages/calcite-components/calcite-preset.ts
index 3f6d734f044..367bb340342 100644
--- a/packages/calcite-components/calcite-preset.ts
+++ b/packages/calcite-components/calcite-preset.ts
@@ -68,7 +68,7 @@ export default {
         3: "var(--calcite-color-text-3)",
         inverse: "var(--calcite-color-text-inverse)",
         link: "var(--calcite-color-text-link)",
-        icon: "var(--calcite-ui-icon-color)",
+        icon: "var(--calcite-icon-color, var(--calcite-ui-icon-color, currentColor))",
       },
       transparent: "transparent",
     },
diff --git a/packages/calcite-components/src/assets/styles/global.scss b/packages/calcite-components/src/assets/styles/global.scss
index 5dc33feb239..c23a1d00581 100644
--- a/packages/calcite-components/src/assets/styles/global.scss
+++ b/packages/calcite-components/src/assets/styles/global.scss
@@ -20,7 +20,6 @@
   --calcite-border-radius-base: 0;
   --calcite-offset-invert-focus: 0; // should be 0 or 1
   --calcite-panel-width-multiplier: 1;
-  --calcite-ui-icon-color: currentColor;
 
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
diff --git a/packages/calcite-components/src/components/card/card.scss b/packages/calcite-components/src/components/card/card.scss
index 8b6b3fdfb9a..2cc338f08de 100644
--- a/packages/calcite-components/src/components/card/card.scss
+++ b/packages/calcite-components/src/components/card/card.scss
@@ -173,10 +173,10 @@
   display: flex;
   align-items: center;
   justify-items: center;
-  --calcite-ui-icon-color: var(--calcite-card-selection-icon-color);
+  --calcite-icon-color: var(--calcite-card-selection-icon-color);
   &:hover {
     background-color: var(--calcite-card-selection-background-color-hover);
-    --calcite-ui-icon-color: var(--calcite-card-selection-icon-color-hover);
+    --calcite-icon-color: var(--calcite-card-selection-icon-color-hover);
   }
   &:active {
     background-color: var(--calcite-card-selection-background-color-active);
@@ -187,7 +187,7 @@
 }
 
 :host([selected]) .checkbox-wrapper {
-  --calcite-ui-icon-color: var(--calcite-card-selection-icon-color-selected);
+  --calcite-icon-color: var(--calcite-card-selection-icon-color-selected);
   background-color: var(--calcite-card-selection-background-color-selected);
   &:hover {
     background-color: var(--calcite-card-selection-background-color-hover);
@@ -199,12 +199,12 @@
 
 :host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper {
   background-color: var(--calcite-card-selection-background-color-hover);
-  --calcite-ui-icon-color: var(--calcite-card-selection-icon-color-hover);
+  --calcite-icon-color: var(--calcite-card-selection-icon-color-hover);
 }
 
 :host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper {
   background-color: var(--calcite-card-selection-background-color-active);
-  --calcite-ui-icon-color: var(--calcite-card-selection-icon-color-selected);
+  --calcite-icon-color: var(--calcite-card-selection-icon-color-selected);
 }
 
 .thumbnail-wrapper {
diff --git a/packages/calcite-components/src/components/chip/chip.scss b/packages/calcite-components/src/components/chip/chip.scss
index a84a83f8e90..0b6cd8689aa 100644
--- a/packages/calcite-components/src/components/chip/chip.scss
+++ b/packages/calcite-components/src/components/chip/chip.scss
@@ -400,9 +400,6 @@ slot[name="image"]::slotted(*) {
   .close {
     color: var(--calcite-color-text-3);
   }
-  .chip-icon {
-    color: var(--calcite-ui-icon-color, var(--calcite-color-text-3));
-  }
 }
 
 :host([kind="inverse"]) {
@@ -414,9 +411,6 @@ slot[name="image"]::slotted(*) {
   .close {
     @apply text-color-inverse;
   }
-  .chip-icon {
-    color: var(--calcite-ui-icon-color, var(--calcite-color-text-inverse));
-  }
 }
 
 :host([kind="brand"]) {
@@ -428,9 +422,6 @@ slot[name="image"]::slotted(*) {
   .close {
     @apply text-color-inverse;
   }
-  .chip-icon {
-    color: var(--calcite-ui-icon-color, var(--calcite-color-text-inverse));
-  }
 }
 
 :host([appearance="outline-fill"]),
@@ -439,9 +430,6 @@ slot[name="image"]::slotted(*) {
   .close {
     @apply text-color-3;
   }
-  .chip-icon {
-    color: var(--calcite-ui-icon-color, var(--calcite-color-text-3));
-  }
 }
 
 :host([appearance="outline-fill"]) {
diff --git a/packages/calcite-components/src/components/chip/chip.stories.ts b/packages/calcite-components/src/components/chip/chip.stories.ts
index cdc02c8b8d0..3115e95f9a4 100644
--- a/packages/calcite-components/src/components/chip/chip.stories.ts
+++ b/packages/calcite-components/src/components/chip/chip.stories.ts
@@ -119,7 +119,7 @@ export const withAvatarAndIconAndClosable = (): string => {
   `;
 };
 export const overriddenIconColor = (): string =>
-  html`<calcite-chip icon="banana" style="--calcite-ui-icon-color: #ac9f42" closable>Banana</calcite-chip>`;
+  html`<calcite-chip icon="banana" style="--calcite-icon-color: #ac9f42" closable>Banana</calcite-chip>`;
 
 export const darkModeRTL_TestOnly = (): string => html`
   <div style="background-color:#2b2b2b;padding:100px" dir="rtl">
diff --git a/packages/calcite-components/src/components/icon/icon.e2e.ts b/packages/calcite-components/src/components/icon/icon.e2e.ts
index 4e8072af2d3..39f619a8ca3 100644
--- a/packages/calcite-components/src/components/icon/icon.e2e.ts
+++ b/packages/calcite-components/src/components/icon/icon.e2e.ts
@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, hidden, reflects, renders } from "../../tests/commonTests";
+import { accessible, defaults, hidden, reflects, renders, themed } from "../../tests/commonTests";
 import { CSS } from "./resources";
 import { scaleToPx } from "./utils";
 
@@ -106,4 +106,21 @@ describe("calcite-icon", () => {
       );
     });
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-icon", {
+        "--calcite-icon-color": {
+          targetProp: "color",
+        },
+      });
+    });
+    describe("deprecated", () => {
+      themed("calcite-icon", {
+        "--calcite-ui-icon-color": {
+          targetProp: "color",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/icon/icon.scss b/packages/calcite-components/src/components/icon/icon.scss
index 7143878579e..be0af200edd 100644
--- a/packages/calcite-components/src/components/icon/icon.scss
+++ b/packages/calcite-components/src/components/icon/icon.scss
@@ -3,7 +3,8 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-ui-icon-color: The component's color. Defaults to `currentColor`.
+ * @prop --calcite-ui-icon-color: [Deprecated] Use --calcite-icon-color. Specifies the component's color. Defaults to `currentColor`.
+ * @prop --calcite-icon-color: Specifies the component's color. Defaults to `currentColor`.
  */
 
 :host {
diff --git a/packages/calcite-components/src/components/icon/icon.stories.ts b/packages/calcite-components/src/components/icon/icon.stories.ts
index 793934a30df..074ee4207eb 100644
--- a/packages/calcite-components/src/components/icon/icon.stories.ts
+++ b/packages/calcite-components/src/components/icon/icon.stories.ts
@@ -2,6 +2,7 @@ import { iconNames } from "../../../.storybook/helpers";
 import { modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { setCSSVariables } from "../../tests/utils/cssTokenValues";
 import { Icon } from "./icon";
 const { scale } = ATTRIBUTES;
 
@@ -45,3 +46,13 @@ export const darkModeRTL_TestOnly = (): string => html`
   <calcite-icon class="calcite-mode-dark" dir="rtl" icon="${sampleIcon}" flip-rtl></calcite-icon>
 `;
 darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault };
+
+export const theming_TestOnly = (): string => html`
+  <style>
+    .container {
+        ${setCSSVariables(["--calcite-icon-color"])}
+  </style>
+  <div class="container">
+    <calcite-icon icon="banana" scale="s"></calcite-icon>
+  </div>
+`;
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss b/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
index 63ecba1d92e..478b030e202 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
@@ -34,12 +34,12 @@
   inset-inline-end: 0;
   inset-block: 0;
   padding-inline: var(--calcite-toggle-spacing);
-  --calcite-ui-icon-color: var(--calcite-color-text-3);
+  --calcite-icon-color: var(--calcite-color-text-3);
 }
 
 .input-wrapper:hover .toggle-icon,
 calcite-input-text:focus + .toggle-icon {
-  --calcite-ui-icon-color: var(--calcite-color-text-1);
+  --calcite-icon-color: var(--calcite-color-text-1);
 }
 
 @include form-validation-message();
diff --git a/packages/calcite-components/src/components/menu-item/menu-item.scss b/packages/calcite-components/src/components/menu-item/menu-item.scss
index 8e152bdb6d3..70f4ec0aa9c 100644
--- a/packages/calcite-components/src/components/menu-item/menu-item.scss
+++ b/packages/calcite-components/src/components/menu-item/menu-item.scss
@@ -65,7 +65,7 @@
   @apply text-color-1;
   border-color: var(--calcite-color-brand);
   .icon {
-    --calcite-ui-icon-color: var(--calcite-color-brand);
+    --calcite-icon-color: var(--calcite-color-brand);
   }
 }
 :host([layout="vertical"]) .content {
@@ -86,7 +86,7 @@
 
 .icon--dropdown {
   @apply ms-auto me-0 ps-2 relative;
-  --calcite-ui-icon-color: var(--calcite-color-text-3);
+  --calcite-icon-color: var(--calcite-color-text-3);
 }
 
 :host([layout="vertical"]) .icon--end ~ .icon--dropdown {
@@ -106,7 +106,7 @@
 
 .icon--breadcrumb {
   @apply ps-2 me-0;
-  --calcite-ui-icon-color: var(--calcite-color-text-3);
+  --calcite-icon-color: var(--calcite-color-text-3);
 }
 
 :host([layout="vertical"]) .icon--breadcrumb {
diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss
index 933ce57961c..528a66c1989 100644
--- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss
+++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss
@@ -49,7 +49,7 @@
 :host([active]) .anchor {
   @apply text-color-1;
   border-color: var(--calcite-color-brand);
-  --calcite-ui-icon-color: var(--calcite-color-brand);
+  --calcite-icon-color: var(--calcite-color-brand);
 }
 
 .container {
diff --git a/packages/calcite-components/src/components/navigation-user/navigation-user.scss b/packages/calcite-components/src/components/navigation-user/navigation-user.scss
index 5f03ebce70d..93be4c1f2b5 100644
--- a/packages/calcite-components/src/components/navigation-user/navigation-user.scss
+++ b/packages/calcite-components/src/components/navigation-user/navigation-user.scss
@@ -31,7 +31,7 @@
 
 :host([active]) .button {
   @apply text-color-1 border-color-brand;
-  --calcite-ui-icon-color: var(--calcite-color-brand);
+  --calcite-icon-color: var(--calcite-color-brand);
 }
 
 .text-container {
diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
index 7e8f4896243..c9b1f43fedc 100644
--- a/packages/calcite-components/src/components/tile/tile.scss
+++ b/packages/calcite-components/src/components/tile/tile.scss
@@ -14,7 +14,7 @@
   --calcite-tile-border-color: var(--calcite-color-border-2);
   --calcite-tile-description-text-color: var(--calcite-color-text-3);
   --calcite-tile-heading-text-color: var(--calcite-color-text-2);
-  --calcite-ui-icon-color: var(--calcite-color-text-3);
+  --calcite-icon-color: var(--calcite-color-text-3);
 
   box-sizing: border-box;
   display: inline-block;
@@ -35,7 +35,7 @@
       outline-color: var(--calcite-color-brand);
       position: relative;
       .selection-icon {
-        --calcite-ui-icon-color: var(--calcite-color-brand);
+        --calcite-icon-color: var(--calcite-color-brand);
       }
     }
     &.selected {
@@ -216,7 +216,7 @@
 :host([href]:hover:not([disabled])) {
   --calcite-tile-border-color: var(--calcite-color-text-link);
   --calcite-tile-heading-text-color: var(--calcite-color-text-link);
-  --calcite-ui-icon-color: var(--calcite-color-text-link);
+  --calcite-icon-color: var(--calcite-color-text-link);
   .container {
     position: relative;
     z-index: var(--calcite-z-index);
diff --git a/packages/calcite-components/src/demos/chip-group.html b/packages/calcite-components/src/demos/chip-group.html
index fda81d59f28..3bb69daa2d5 100644
--- a/packages/calcite-components/src/demos/chip-group.html
+++ b/packages/calcite-components/src/demos/chip-group.html
@@ -48,7 +48,7 @@
       }
 
       .icon-search calcite-chip[selected] {
-        --calcite-ui-icon-color: #974dff;
+        --calcite-icon-color: #974dff;
       }
 
       .themed-children calcite-chip:first-of-type {
@@ -101,19 +101,19 @@
       .themed-children-card calcite-chip:first-of-type {
         --calcite-color-foreground-2: rgb(222 239 220);
         --calcite-color-text-1: var(--calcite-color-status-success);
-        --calcite-ui-icon-color: var(--calcite-color-status-success);
+        --calcite-icon-color: var(--calcite-color-status-success);
       }
 
       .themed-children-card calcite-chip:nth-of-type(2) {
         --calcite-color-foreground-2: rgb(221 238 249);
         --calcite-color-text-1: var(--calcite-color-status-info);
-        --calcite-ui-icon-color: var(--calcite-color-status-info);
+        --calcite-icon-color: var(--calcite-color-status-info);
       }
 
       .themed-children-card calcite-chip:nth-of-type(3) {
         --calcite-color-foreground-2: rgb(221 238 249);
         --calcite-color-text-1: var(--calcite-color-status-info);
-        --calcite-ui-icon-color: var(--calcite-color-status-info);
+        --calcite-icon-color: var(--calcite-color-status-info);
       }
 
       hr {
diff --git a/packages/calcite-components/src/demos/chip.html b/packages/calcite-components/src/demos/chip.html
index e8d9cdd7589..ce1963ce7db 100644
--- a/packages/calcite-components/src/demos/chip.html
+++ b/packages/calcite-components/src/demos/chip.html
@@ -98,19 +98,19 @@
       .themed-children-card calcite-chip:first-of-type {
         --calcite-color-foreground-2: rgb(222 239 220);
         --calcite-color-text-1: var(--calcite-color-status-success);
-        --calcite-ui-icon-color: var(--calcite-color-status-success);
+        --calcite-icon-color: var(--calcite-color-status-success);
       }
 
       .themed-children-card calcite-chip:nth-of-type(2) {
         --calcite-color-foreground-2: rgb(221 238 249);
         --calcite-color-text-1: var(--calcite-color-status-info);
-        --calcite-ui-icon-color: var(--calcite-color-status-info);
+        --calcite-icon-color: var(--calcite-color-status-info);
       }
 
       .themed-children-card calcite-chip:nth-of-type(3) {
         --calcite-color-foreground-2: rgb(221 238 249);
         --calcite-color-text-1: var(--calcite-color-status-info);
-        --calcite-ui-icon-color: var(--calcite-color-status-info);
+        --calcite-icon-color: var(--calcite-color-status-info);
       }
     </style>
     <script src="_assets/head.js"></script>
diff --git a/packages/calcite-components/src/demos/icon.html b/packages/calcite-components/src/demos/icon.html
index 2cb317514f2..5f44033810e 100644
--- a/packages/calcite-components/src/demos/icon.html
+++ b/packages/calcite-components/src/demos/icon.html
@@ -33,7 +33,7 @@
       }
 
       .my-icon-color-class {
-        --calcite-ui-icon-color: #007ac2;
+        --calcite-icon-color: #007ac2;
       }
     </style>
     <script src="./_assets/head.js"></script>
diff --git a/packages/calcite-components/src/demos/navigation.html b/packages/calcite-components/src/demos/navigation.html
index c7ce300c77b..dca83bfa835 100644
--- a/packages/calcite-components/src/demos/navigation.html
+++ b/packages/calcite-components/src/demos/navigation.html
@@ -757,7 +757,7 @@ <h2>Theming</h2>
           --calcite-color-text-1: white;
           --calcite-color-text-2: white;
           --calcite-color-text-3: white;
-          --calcite-ui-icon-color: white;
+          --calcite-icon-color: white;
         }
 
         .example-theming-tier-primary calcite-navigation-logo {
@@ -767,7 +767,7 @@ <h2>Theming</h2>
           --calcite-color-text-1: white;
           --calcite-color-text-2: white;
           --calcite-color-text-3: white;
-          --calcite-ui-icon-color: white;
+          --calcite-icon-color: white;
         }
 
         .example-theming-tier-primary calcite-navigation-user {
@@ -777,7 +777,7 @@ <h2>Theming</h2>
           --calcite-color-text-1: white;
           --calcite-color-text-2: white;
           --calcite-color-text-3: white;
-          --calcite-ui-icon-color: white;
+          --calcite-icon-color: white;
         }
 
         calcite-menu.example-primary-theming {
@@ -787,7 +787,7 @@ <h2>Theming</h2>
           --calcite-color-text-1: white;
           --calcite-color-text-2: white;
           --calcite-color-text-3: white;
-          --calcite-ui-icon-color: white;
+          --calcite-icon-color: white;
         }
 
         calcite-menu.example-secondary-theming {
@@ -797,7 +797,7 @@ <h2>Theming</h2>
           --calcite-color-text-1: white;
           --calcite-color-text-2: white;
           --calcite-color-text-3: white;
-          --calcite-ui-icon-color: white;
+          --calcite-icon-color: white;
         }
 
         calcite-menu.example-tertiary-theming {
diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html
index 03fd1cbbd3d..7d7725a8038 100644
--- a/packages/calcite-components/src/demos/table.html
+++ b/packages/calcite-components/src/demos/table.html
@@ -17,11 +17,11 @@
       }
 
       #theme-chip-default[selected] {
-        --calcite-ui-icon-color: var(--calcite-color-brand);
+        --calcite-icon-color: var(--calcite-color-brand);
       }
 
       .calcite-mode-dark #theme-chip-default[selected] {
-        --calcite-ui-icon-color: var(--calcite-color-brand);
+        --calcite-icon-color: var(--calcite-color-brand);
       }
 
       h3,
@@ -90,7 +90,7 @@
       }
 
       #theme-chip-ranger[selected] {
-        --calcite-ui-icon-color: #308e29;
+        --calcite-icon-color: #308e29;
       }
 
       .calcite-mode-dark #theme-chip-ranger {
@@ -98,7 +98,7 @@
       }
 
       .calcite-mode-dark #theme-chip-ranger[selected] {
-        --calcite-ui-icon-color: #3cb233;
+        --calcite-icon-color: #3cb233;
       }
 
       .theme-mint-glacier {
@@ -156,7 +156,7 @@
       }
 
       #theme-chip-mint[selected] {
-        --calcite-ui-icon-color: #00c291;
+        --calcite-icon-color: #00c291;
       }
 
       .calcite-mode-dark #theme-chip-mint {
@@ -164,7 +164,7 @@
       }
 
       .calcite-mode-dark #theme-chip-mint[selected] {
-        --calcite-ui-icon-color: #00dea6;
+        --calcite-icon-color: #00dea6;
       }
 
       .theme-lavender-field {
@@ -222,7 +222,7 @@
       }
 
       #theme-chip-lavender[selected] {
-        --calcite-ui-icon-color: #8f4a89;
+        --calcite-icon-color: #8f4a89;
       }
 
       .calcite-mode-dark #theme-chip-lavender {
@@ -230,7 +230,7 @@
       }
 
       .calcite-mode-dark #theme-chip-lavender[selected] {
-        --calcite-ui-icon-color: #d6b9eb;
+        --calcite-icon-color: #d6b9eb;
       }
     </style>
   </head>