diff --git a/packages/calcite-components/src/components/input-number/input-number.scss b/packages/calcite-components/src/components/input-number/input-number.scss
index 1b84960b52a..cae5da49748 100755
--- a/packages/calcite-components/src/components/input-number/input-number.scss
+++ b/packages/calcite-components/src/components/input-number/input-number.scss
@@ -27,6 +27,12 @@
  * @prop --calcite-input-suffix-text-color: Specifies the text color of the suffix element.
  */
 
+// AUTO-GENERATED — do not modify. Changes will be overwritten.
+//
+// Internal CSS custom properties for component use only. Overwriting is not recommended.
+//
+// --calcite-internal-input-number-alignment
+
 :host {
   @apply block;
 }
@@ -192,6 +198,7 @@ input:focus {
     inline-flex
     flex-1
     items-center;
+  isolation: isolate;
 }
 
 .icon {
diff --git a/packages/calcite-components/src/components/input-number/input-number.stories.ts b/packages/calcite-components/src/components/input-number/input-number.stories.ts
index 7398d7a0e55..d185f9b6b55 100644
--- a/packages/calcite-components/src/components/input-number/input-number.stories.ts
+++ b/packages/calcite-components/src/components/input-number/input-number.stories.ts
@@ -237,3 +237,15 @@ export const alignmentAllOptions = (): string => html`
     <calcite-input-number alignment="end" placeholder="Placeholder text"></calcite-input-number>
   </div>
 `;
+
+export const overlayDoesNotObscureIcon = (): string =>
+  html` <style>
+      .overlay {
+        position: absolute;
+        inset: 0;
+        background-color: white;
+        opacity: 0.75;
+      }
+    </style>
+    <calcite-input-number icon="check-square-f"></calcite-input-number>
+    <div class="overlay"></div>`;
diff --git a/packages/calcite-components/src/components/input-text/input-text.scss b/packages/calcite-components/src/components/input-text/input-text.scss
index c589120d621..843a1839896 100755
--- a/packages/calcite-components/src/components/input-text/input-text.scss
+++ b/packages/calcite-components/src/components/input-text/input-text.scss
@@ -26,6 +26,12 @@
  * @prop --calcite-input-text-text-color-focus: Specifies the component's text color when focused.
  */
 
+// AUTO-GENERATED — do not modify. Changes will be overwritten.
+//
+// Internal CSS custom properties for component use only. Overwriting is not recommended.
+//
+// --calcite-internal-input-text-alignment
+
 :host {
   @apply block;
 }
@@ -224,6 +230,7 @@ input:focus {
     inline-flex
     flex-1
     items-center;
+  isolation: isolate;
 }
 
 .icon {
diff --git a/packages/calcite-components/src/components/input-text/input-text.stories.ts b/packages/calcite-components/src/components/input-text/input-text.stories.ts
index 40b977d7b58..78531ba5835 100644
--- a/packages/calcite-components/src/components/input-text/input-text.stories.ts
+++ b/packages/calcite-components/src/components/input-text/input-text.stories.ts
@@ -187,3 +187,15 @@ export const alignmentAllOptions = (): string => html`
     <calcite-input-text alignment="end" placeholder="Placeholder text"></calcite-input-text>
   </div>
 `;
+
+export const overlayDoesNotObscureIcon = (): string =>
+  html` <style>
+      .overlay {
+        position: absolute;
+        inset: 0;
+        background-color: white;
+        opacity: 0.75;
+      }
+    </style>
+    <calcite-input-text icon="check-square-f"></calcite-input-text>
+    <div class="overlay"></div>`;
diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss
index 5b6ba2009e1..60a1ebd461c 100755
--- a/packages/calcite-components/src/components/input/input.scss
+++ b/packages/calcite-components/src/components/input/input.scss
@@ -293,6 +293,7 @@ input:focus {
     inline-flex
     flex-1
     items-center;
+  isolation: isolate;
 }
 
 .icon {
diff --git a/packages/calcite-components/src/components/input/input.stories.ts b/packages/calcite-components/src/components/input/input.stories.ts
index 6ea26746ea0..10c72b90f1e 100644
--- a/packages/calcite-components/src/components/input/input.stories.ts
+++ b/packages/calcite-components/src/components/input/input.stories.ts
@@ -260,3 +260,15 @@ export const fontSizeSetAtRoot = (): string =>
     <calcite-input placeholder="Placeholder" prefix-text="Prefix" suffix-text="Suffix" type="text" icon="search">
       <calcite-button slot="action"> Search </calcite-button>
     </calcite-input>`;
+
+export const overlayDoesNotObscureIcon = (): string =>
+  html` <style>
+      .overlay {
+        position: absolute;
+        inset: 0;
+        background-color: white;
+        opacity: 0.75;
+      }
+    </style>
+    <calcite-input icon="check-square-f"></calcite-input>
+    <div class="overlay"></div>`;