diff --git a/packages/react/cypress-image-diff-screenshots/baseline/IcButton.cy.tsx-icon-variants-button-group.png b/packages/react/cypress-image-diff-screenshots/baseline/IcButton.cy.tsx-icon-variants-button-group.png
index d944c97987..fb6e366175 100755
Binary files a/packages/react/cypress-image-diff-screenshots/baseline/IcButton.cy.tsx-icon-variants-button-group.png and b/packages/react/cypress-image-diff-screenshots/baseline/IcButton.cy.tsx-icon-variants-button-group.png differ
diff --git a/packages/react/cypress-image-diff-screenshots/baseline/IcButton.cy.tsx-icon-variants-high-contrast.png b/packages/react/cypress-image-diff-screenshots/baseline/IcButton.cy.tsx-icon-variants-high-contrast.png
index 4a7032d5f8..0ea0838e4f 100755
Binary files a/packages/react/cypress-image-diff-screenshots/baseline/IcButton.cy.tsx-icon-variants-high-contrast.png and b/packages/react/cypress-image-diff-screenshots/baseline/IcButton.cy.tsx-icon-variants-high-contrast.png differ
diff --git a/packages/react/src/component-tests/IcButton/IcButton.cy.tsx b/packages/react/src/component-tests/IcButton/IcButton.cy.tsx
index 8651f06d92..5d7fe4b251 100644
--- a/packages/react/src/component-tests/IcButton/IcButton.cy.tsx
+++ b/packages/react/src/component-tests/IcButton/IcButton.cy.tsx
@@ -465,6 +465,14 @@ describe("IcButton visual regression and a11y tests", () => {
 
     cy.checkHydrated(IC_BUTTON_SELECTOR);
 
+    cy.findShadowEl(IC_BUTTON_SELECTOR, "ic-loading-indicator").then(
+      (loadingIndicators) => {
+        for (let i = 0; i < loadingIndicators.length; i++) {
+          cy.wrap(loadingIndicators[i]).invoke("attr", "progress", 50);
+        }
+      }
+    );
+
     cy.checkA11yWithWait();
     cy.wait(500).compareSnapshot({
       name: "icon-variants-button-group",
diff --git a/packages/react/src/component-tests/IcButton/IcButtonTestData.tsx b/packages/react/src/component-tests/IcButton/IcButtonTestData.tsx
index 526b529a9b..83919269c0 100644
--- a/packages/react/src/component-tests/IcButton/IcButtonTestData.tsx
+++ b/packages/react/src/component-tests/IcButton/IcButtonTestData.tsx
@@ -33,6 +33,14 @@ export const iconProps = {
     disabled: false,
     monochrome: false,
   },
+  iconLoading: {
+    title: "Default",
+    size: "medium",
+    theme: "light",
+    loading: true,
+    disabled: false,
+    monochrome: false,
+  },
   iconDisabled: {
     title: "Disabled",
     size: "medium",
@@ -49,6 +57,22 @@ export const iconProps = {
     disabled: false,
     monochrome: true,
   },
+  iconDarkLoading: {
+    title: "Dark",
+    size: "medium",
+    theme: "dark",
+    loading: true,
+    disabled: false,
+    monochrome: false,
+  },
+  iconDarkLoadingMonochrome: {
+    title: "Dark",
+    size: "medium",
+    theme: "dark",
+    loading: true,
+    disabled: false,
+    monochrome: true,
+  },
   iconLight: {
     title: "Light",
     size: "medium",
@@ -57,6 +81,14 @@ export const iconProps = {
     disabled: false,
     monochrome: true,
   },
+  iconLightLoadingMonochrome: {
+    title: "Light",
+    size: "medium",
+    theme: "light",
+    loading: true,
+    disabled: false,
+    monochrome: true,
+  },
 };
 
 export const SlottedIcon = () => {
@@ -787,9 +819,13 @@ export const IconButtonGroup = (): ReactElement => {
       <IconBtnGroup props={iconProps.iconDefault} />
       <IconBtnGroup props={iconProps.iconLarge} />
       <IconBtnGroup props={iconProps.iconSmall} />
+      <IconBtnGroup props={iconProps.iconLoading} />
       <IconBtnGroup props={iconProps.iconDisabled} />
       <IconBtnGroup props={iconProps.iconDark} />
+      <IconBtnGroup props={iconProps.iconDarkLoading} />
+      <IconBtnGroup props={iconProps.iconDarkLoadingMonochrome} />
       <IconBtnGroup props={iconProps.iconLight} />
+      <IconBtnGroup props={iconProps.iconLightLoadingMonochrome} />
     </>
   );
 };
diff --git a/packages/web-components/src/components/ic-button/ic-button.css b/packages/web-components/src/components/ic-button/ic-button.css
index 6b64137a5e..414c001307 100644
--- a/packages/web-components/src/components/ic-button/ic-button.css
+++ b/packages/web-components/src/components/ic-button/ic-button.css
@@ -377,6 +377,7 @@
   background-color: var(
     --ic-button-secondary-background-non-transparent-monochrome
   );
+  color: var(--ic-button-primary-text);
 }
 
 :host(.ic-button-variant-secondary.background.monochrome) ::slotted(a),
@@ -395,6 +396,7 @@
   background-color: var(
     --ic-button-secondary-background-non-transparent-monochrome-disabled
   );
+  color: var(--ic-button-secondary-text-disabled-monochrome);
 }
 
 :host(.ic-button-variant-secondary.background.monochrome.ic-button-disabled)
diff --git a/packages/web-components/src/components/ic-button/ic-button.stories.mdx b/packages/web-components/src/components/ic-button/ic-button.stories.mdx
index 0b878fbb24..008119cddb 100644
--- a/packages/web-components/src/components/ic-button/ic-button.stories.mdx
+++ b/packages/web-components/src/components/ic-button/ic-button.stories.mdx
@@ -343,7 +343,7 @@ export const defaultArgs = {
   <Story name="Icon variants" parameters={{ loki: { skip: true } }}>
     {html`<div style="display:flex; gap: 1rem; flex-direction:column;">
       <div>
-        <h1>Default</h1>
+        <ic-typography>Default</ic-typography>
         <div style="display:flex; gap: 0.5rem">
           <ic-button
             variant="icon-primary"
@@ -420,7 +420,7 @@ export const defaultArgs = {
         </div>
       </div>
       <div>
-        <h1>Small</h1>
+        <ic-typography>Small</ic-typography>
         <div style="display:flex; gap: 0.5rem">
           <ic-button
             variant="icon-primary"
@@ -501,7 +501,7 @@ export const defaultArgs = {
         </div>
       </div>
       <div>
-        <h1>Large</h1>
+        <ic-typography>Large</ic-typography>
         <div style="display:flex; gap: 0.5rem">
           <ic-button
             variant="icon-primary"
@@ -582,7 +582,7 @@ export const defaultArgs = {
         </div>
       </div>
       <div>
-        <h1>Loading</h1>
+        <ic-typography>Loading</ic-typography>
         <div style="display:flex; gap: 0.5rem">
           <ic-button
             variant="icon-primary"
@@ -664,7 +664,7 @@ export const defaultArgs = {
         </div>
       </div>
       <div>
-        <h1>Disabled</h1>
+        <ic-typography>Disabled</ic-typography>
         <div style="display:flex; gap: 0.5rem">
           <ic-button
             variant="icon-primary"
@@ -745,7 +745,7 @@ export const defaultArgs = {
         </div>
       </div>
       <div>
-        <h1>Light - monochrome</h1>
+        <ic-typography>Light - monochrome</ic-typography>
         <div
           style="width: fit-content; background-color: #ececec; padding: 0.5rem;"
         >
@@ -874,7 +874,7 @@ export const defaultArgs = {
           </ic-button>
         </div>
       </div>
-      <h1>Dark</h1>
+      <ic-typography>Dark</ic-typography>
       <div
         style="background-color:#474A48; padding: 0.5rem; width: fit-content;"
       >
@@ -957,8 +957,10 @@ export const defaultArgs = {
           </ic-button>
         </div>
       </div>
-      <h1>Dark Loading</h1>
-      <div style="padding: 0.5rem; width: fit-content;">
+      <ic-typography>Dark Loading</ic-typography>
+      <div
+        style="background-color:#474A48; padding: 0.5rem; width: fit-content;"
+      >
         <div>
           <ic-button
             variant="icon-primary"
@@ -1042,8 +1044,10 @@ export const defaultArgs = {
           </ic-button>
         </div>
       </div>
-      <h1>Dark - monochrome</h1>
-      <div style="padding: 0.5rem; width: fit-content;">
+      <ic-typography>Dark - monochrome</ic-typography>
+      <div
+        style="background-color:#474A48; padding: 0.5rem; width: fit-content;"
+      >
         <div>
           <ic-button
             variant="icon-primary"