diff --git a/packages/calcite-components/src/components/button/button.e2e.ts b/packages/calcite-components/src/components/button/button.e2e.ts
index 3a38a5ec879..843aeb4cb7e 100644
--- a/packages/calcite-components/src/components/button/button.e2e.ts
+++ b/packages/calcite-components/src/components/button/button.e2e.ts
@@ -695,5 +695,19 @@ describe("calcite-button", () => {
         },
       });
     });
+    describe("icons", () => {
+      themed(html`<calcite-button icon-start="layer" icon-end="layer"></calcite-button>`, {
+        "--calcite-button-icon-color": [
+          {
+            shadowSelector: `.${CSS.iconStart}`,
+            targetProp: "color",
+          },
+          {
+            shadowSelector: `.${CSS.iconEnd}`,
+            targetProp: "color",
+          },
+        ],
+      });
+    });
   });
 });
diff --git a/packages/calcite-components/src/components/button/button.scss b/packages/calcite-components/src/components/button/button.scss
index 6f8e3ce13cb..f54e1947062 100644
--- a/packages/calcite-components/src/components/button/button.scss
+++ b/packages/calcite-components/src/components/button/button.scss
@@ -226,6 +226,10 @@
   }
 }
 
+.icon--start,
+.icon--end {
+  color: var(--calcite-button-icon-color, var(--calcite-icon-color));
+}
 @include includes.disabled();
 
 @keyframes loader-in {
diff --git a/packages/calcite-components/src/demos/button.html b/packages/calcite-components/src/demos/button.html
index 0c435bf602f..74a606ba307 100644
--- a/packages/calcite-components/src/demos/button.html
+++ b/packages/calcite-components/src/demos/button.html
@@ -96,6 +96,7 @@
         --calcite-button-border-color: var(--calcite-color-status-danger);
         --calcite-button-shadow: var(--calcite-shadow-sm);
         --calcite-button-corner-radius: 8px;
+        --calcite-button-icon-color: pink;
       }
     </style>
 
@@ -2114,7 +2115,7 @@
     -->
       <div class="loader">
         <p class="loader-padding">Themed</p>
-        <calcite-button id="themed-button" icon-start="drive-time">Themed</calcite-button>
+        <calcite-button id="themed-button" icon-start="drive-time" icon-end="play-f">Themed</calcite-button>
         <p class="loader-padding">Loader</p>
 
         <section>