diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
index 3cd0d7016..50a972882 100644
--- a/src/components/TextInput/TextInput.tsx
+++ b/src/components/TextInput/TextInput.tsx
@@ -191,7 +191,7 @@ export const TextInput: ForwardRefExoticComponent<TextInputProps> = forwardRef<H
           data-testid="text-input-clear-button"
           aria-label="clear input"
         >
-          <Icon name="remove" className="display-block" />
+          <Icon name="remove-light" className="display-block" />
         </button>
       );
     };
diff --git a/src/components/TextInputFloating/TextInputFloating.module.scss b/src/components/TextInputFloating/TextInputFloating.module.scss
index 9f9a5d5c8..db89696f2 100644
--- a/src/components/TextInputFloating/TextInputFloating.module.scss
+++ b/src/components/TextInputFloating/TextInputFloating.module.scss
@@ -410,6 +410,42 @@
           --form-control-border-color-focus,
           var(--INTERNAL_form-control-border-color-focus)
         );
+
+    .prefix {
+      border-top: 1px solid
+        var(
+          --form-control-border-color-focus,
+          var(--INTERNAL_form-control-border-color-focus)
+        );
+      border-bottom: 1px solid
+        var(
+          --form-control-border-color-focus,
+          var(--INTERNAL_form-control-border-color-focus)
+        );
+      border-left: 1px solid
+        var(
+          --form-control-border-color-focus,
+          var(--INTERNAL_form-control-border-color-focus)
+        );
+    }
+
+    .suffix {
+      border-top: 1px solid
+        var(
+          --form-control-border-color-focus,
+          var(--INTERNAL_form-control-border-color-focus)
+        );
+      border-bottom: 1px solid
+        var(
+          --form-control-border-color-focus,
+          var(--INTERNAL_form-control-border-color-focus)
+        );
+      border-right: 1px solid
+        var(
+          --form-control-border-color-focus,
+          var(--INTERNAL_form-control-border-color-focus)
+        );
+    }
   }
 
   &.disabled {
diff --git a/src/components/TextInputFloating/TextInputFloating.tsx b/src/components/TextInputFloating/TextInputFloating.tsx
index 60c060511..e8880f45c 100644
--- a/src/components/TextInputFloating/TextInputFloating.tsx
+++ b/src/components/TextInputFloating/TextInputFloating.tsx
@@ -187,7 +187,7 @@ export const TextInputFloating: ForwardRefExoticComponent<TextInputFloatingProps
           data-testid="text-input-clear-button"
           aria-label="clear input"
         >
-          <Icon name="remove" className="display-block" />
+          <Icon name="remove-light" className="display-block" />
         </button>
       );
     };