diff --git a/docs/src/pages/components/TextInput.svx b/docs/src/pages/components/TextInput.svx
index 9f6ced8f..326bc1b9 100644
--- a/docs/src/pages/components/TextInput.svx
+++ b/docs/src/pages/components/TextInput.svx
@@ -39,6 +39,10 @@ components: ["TextInput", "TextInputSkeleton"]
 
 <TextInput invalid invalidText="User name is already taken. Please try another." labelText="User name" placeholder="Enter user name..." />
 
+### Warning state
+
+<TextInput warn warnText="Your user name is different from your log in ID." labelText="User name" placeholder="Enter user name..." />
+
 ### Disabled state
 
 <TextInput disabled labelText="User name" placeholder="Enter user name..." />
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
index 47fdff59..0a4b0114 100644
--- a/src/TextInput/TextInput.svelte
+++ b/src/TextInput/TextInput.svelte
@@ -63,8 +63,8 @@
   export let inline = false;
 
   import { getContext } from "svelte";
-  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
-  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
+  import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
 
   const ctx = getContext("Form");
 
@@ -127,6 +127,7 @@
       data-invalid="{invalid || undefined}"
       data-warn="{warn || undefined}"
       class:bx--text-input__field-wrapper="{true}"
+      class:bx--text-input__field-wrapper--warning="{!invalid && warn}"
     >
       {#if invalid}
         <WarningFilled16 class="bx--text-input__invalid-icon" />