diff --git a/docs/src/pages/components/NumberInput.svx b/docs/src/pages/components/NumberInput.svx
index 237569db..923fab25 100644
--- a/docs/src/pages/components/NumberInput.svx
+++ b/docs/src/pages/components/NumberInput.svx
@@ -31,6 +31,10 @@ components: ["NumberInput", "NumberInputSkeleton"]
 
 <NumberInput light label="Clusters" />
 
+### Read-only variant
+
+<NumberInput readonly label="Clusters" />
+
 ### Extra-large size
 
 <NumberInput size="xl" label="Clusters" />
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index b88b142f..ea93b23e 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -108,6 +108,7 @@
   import Subtract16 from "carbon-icons-svelte/lib/Subtract16/Subtract16.svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
   import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
+  import EditOff16 from "carbon-icons-svelte/lib/EditOff16/EditOff16.svelte";
 
   const defaultTranslations = {
     [translationIds.increment]: "Increment number",
@@ -273,6 +274,9 @@
             class="bx--number__invalid bx--number__invalid--warning"
           />
         {/if}
+        {#if readonly}
+          <EditOff16 class="bx--text-input__readonly-icon" />
+        {/if}
         {#if !hideSteppers}
           <div class:bx--number__controls="{true}">
             <button