diff --git a/packages/eui/changelogs/upcoming/7959.md b/packages/eui/changelogs/upcoming/7959.md
new file mode 100644
index 00000000000..fce7568a447
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/7959.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Removed `@euiFormControlLayoutClearIcon` Sass mixin
diff --git a/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap b/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
index b8b6cb24abe..71d6ac1e6e8 100644
--- a/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
+++ b/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
@@ -12,10 +12,10 @@ exports[`EuiColorPicker color empty string 1`] = `
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -35,10 +35,10 @@ exports[`EuiColorPicker color empty string 1`] = `
         value=""
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -64,10 +64,10 @@ exports[`EuiColorPicker color null 1`] = `
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -87,10 +87,10 @@ exports[`EuiColorPicker color null 1`] = `
         value=""
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -116,10 +116,10 @@ exports[`EuiColorPicker color valid string 1`] = `
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
       >
         <span
-          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
@@ -138,10 +138,10 @@ exports[`EuiColorPicker color valid string 1`] = `
         value="#FFFFFF"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -167,10 +167,10 @@ exports[`EuiColorPicker compressed 1`] = `
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-compressed-absolute-left"
       >
         <span
-          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
@@ -189,10 +189,10 @@ exports[`EuiColorPicker compressed 1`] = `
         value="#FFEEDD"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-compressed-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -218,10 +218,10 @@ exports[`EuiColorPicker disabled 1`] = `
       style="--euiFormControlLeftIconsCount: 1;"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left-disabled"
       >
         <span
-          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
@@ -257,10 +257,10 @@ exports[`EuiColorPicker fullWidth 1`] = `
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
       >
         <span
-          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
@@ -279,10 +279,10 @@ exports[`EuiColorPicker fullWidth 1`] = `
         value="#FFEEDD"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -458,10 +458,10 @@ exports[`EuiColorPicker isClearable 1`] = `
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 2;"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
       >
         <span
-          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
@@ -480,20 +480,20 @@ exports[`EuiColorPicker isClearable 1`] = `
         value="#FFEEDD"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <button
           aria-label="Clear input"
-          class="euiFormControlLayoutClearButton"
+          class="euiFormControlLayoutClearButton emotion-euiFormControlLayoutClearButton"
           type="button"
         >
           <span
-            class="euiFormControlLayoutClearButton__icon"
+            class="euiFormControlLayoutClearButton__icon emotion-euiFormControlLayoutClearButton__icon-m"
             data-euiicon-type="cross"
           />
         </button>
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -519,10 +519,10 @@ exports[`EuiColorPicker placeholder 1`] = `
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -542,10 +542,10 @@ exports[`EuiColorPicker placeholder 1`] = `
         value=""
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -580,10 +580,10 @@ exports[`EuiColorPicker prepend and append 1`] = `
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
       >
         <span
-          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
@@ -602,10 +602,10 @@ exports[`EuiColorPicker prepend and append 1`] = `
         value="#FFEEDD"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -640,10 +640,10 @@ exports[`EuiColorPicker readOnly 1`] = `
       style="--euiFormControlLeftIconsCount: 1;"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
       >
         <span
-          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
@@ -679,10 +679,10 @@ exports[`EuiColorPicker renders 1`] = `
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
       >
         <span
-          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
@@ -701,10 +701,10 @@ exports[`EuiColorPicker renders 1`] = `
         value="#FFEEDD"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -730,10 +730,10 @@ exports[`EuiColorPicker showAlpha 1`] = `
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
       >
         <span
-          class="euiFormControlLayoutCustomIcon emotion-euiColorPicker__swatchInputIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon-euiColorPicker__swatchInputIcon"
         >
           <span
             aria-hidden="true"
@@ -752,10 +752,10 @@ exports[`EuiColorPicker showAlpha 1`] = `
         value="#FFEEDD"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
diff --git a/packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap b/packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
index 7e5db4ccf30..2bbfe75acb0 100644
--- a/packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
+++ b/packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
@@ -23,10 +23,10 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
         type="button"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -65,10 +65,10 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = `
         Plain text as a custom option
       </button>
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -135,10 +135,10 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
         </span>
       </button>
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -185,10 +185,10 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`]
         />
       </button>
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -235,10 +235,10 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with
         />
       </button>
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -277,10 +277,10 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as
         Palette 1
       </button>
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -348,10 +348,10 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
             </span>
           </button>
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+            class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
           >
             <span
-              class="euiFormControlLayoutCustomIcon"
+              class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
             >
               <span
                 aria-hidden="true"
diff --git a/packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
index 5863abd3b29..c0ed3b3cbec 100644
--- a/packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
+++ b/packages/eui/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -36,11 +36,11 @@ exports[`EuiComboBox renders 1`] = `
           />
         </div>
         <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+          class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
         >
           <button
             aria-label="Open list of options"
-            class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+            class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon-clickable"
             data-test-subj="comboBoxToggleListButton"
             tabindex="-1"
             type="button"
@@ -102,11 +102,11 @@ exports[`EuiComboBox renders the options list dropdown 1`] = `
               </span>
             </div>
             <div
-              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+              class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
             >
               <button
                 aria-label="Close list of options"
-                class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon-clickable"
                 data-test-subj="comboBoxToggleListButton"
                 tabindex="-1"
                 type="button"
diff --git a/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx b/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx
index c53176e1568..d423da4c2be 100644
--- a/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx
+++ b/packages/eui/src/components/combo_box/combo_box_input/combo_box_input.tsx
@@ -351,6 +351,7 @@ export class EuiComboBoxInput<T> extends Component<
               inputId={id}
               isLoading={isLoading}
               isInvalid={isInvalid}
+              isDisabled={isDisabled}
               compressed={compressed}
               fullWidth={fullWidth}
               prepend={prepend}
diff --git a/packages/eui/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap b/packages/eui/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
index 80b76dd6b1b..96942b839e9 100644
--- a/packages/eui/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
@@ -970,10 +970,10 @@ exports[`EuiDatePicker renders 1`] = `
       style="--euiFormControlLeftIconsCount: 1;"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
diff --git a/packages/eui/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap b/packages/eui/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap
index d216171f869..21e8b2e5a3b 100644
--- a/packages/eui/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap
@@ -13,10 +13,10 @@ exports[`EuiDatePickerRange is rendered 1`] = `
       class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly-delimited"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--static"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-static"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -78,10 +78,10 @@ exports[`EuiDatePickerRange props compressed 1`] = `
       class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly-delimited"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--static"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-compressed-static"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -143,10 +143,10 @@ exports[`EuiDatePickerRange props disabled 1`] = `
       class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly-delimited"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--static"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-static-disabled"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -210,10 +210,10 @@ exports[`EuiDatePickerRange props fullWidth 1`] = `
       class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly-delimited"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--static"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-static"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -1333,10 +1333,10 @@ exports[`EuiDatePickerRange props isInvalid 1`] = `
       class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly-delimited-invalid"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--static"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-static"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -1385,7 +1385,7 @@ exports[`EuiDatePickerRange props isInvalid 1`] = `
         </div>
       </div>
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--static"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-static"
       >
         <span
           color="danger"
@@ -1408,10 +1408,10 @@ exports[`EuiDatePickerRange props isLoading 1`] = `
       class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly-delimited"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--static"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-static"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -1458,7 +1458,7 @@ exports[`EuiDatePickerRange props isLoading 1`] = `
         </div>
       </div>
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--static"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-static"
       >
         <span
           aria-label="Loading"
@@ -1482,10 +1482,10 @@ exports[`EuiDatePickerRange props readOnly 1`] = `
       class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly-delimited"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--static"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-static"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -1551,10 +1551,10 @@ exports[`EuiDatePickerRange uses individual EuiDatePicker props 1`] = `
       class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly-delimited"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--static"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-static"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
diff --git a/packages/eui/src/components/date_picker/date_picker.spec.tsx b/packages/eui/src/components/date_picker/date_picker.spec.tsx
index 2beab3b3c68..1c3246a53d2 100644
--- a/packages/eui/src/components/date_picker/date_picker.spec.tsx
+++ b/packages/eui/src/components/date_picker/date_picker.spec.tsx
@@ -41,10 +41,9 @@ describe('EuiDatePicker', () => {
     it('renders form control icons below the date picker', () => {
       cy.realMount(<EuiDatePicker inline isLoading isInvalid />);
 
-      cy.get('.euiFormControlLayoutIcons').should(
-        'have.class',
-        'euiFormControlLayoutIcons--static'
-      );
+      cy.get('.euiFormControlLayoutIcons')
+        .invoke('attr', 'class')
+        .should('contain', 'euiFormControlLayoutIcons-static');
     });
 
     it('renders as disabled', () => {
diff --git a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
index 2204d05b802..37a6e3a5b1f 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
@@ -208,7 +208,7 @@ exports[`EuiSuperDatePicker props isAutoRefreshOnly passes required props 1`] =
     class="euiPopover euiInputPopover euiAutoRefresh emotion-euiPopover-block-EuiInputPopover"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--group euiFormControlLayout-readOnly emotion-euiFormControlLayout-group"
+      class="euiFormControlLayout euiFormControlLayout--group euiFormControlLayout-isDisabled euiFormControlLayout-readOnly emotion-euiFormControlLayout-group"
     >
       <div
         class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
@@ -274,8 +274,7 @@ exports[`EuiSuperDatePicker props isDisabled true 1`] = `
   class="euiSuperDatePicker emotion-euiSuperDatePicker-restricted"
 >
   <div
-    class="euiFormControlLayout euiFormControlLayout--group emotion-euiFormControlLayout-fullWidth-group-euiSuperDatePicker__formControlLayout-disabled"
-    disabled=""
+    class="euiFormControlLayout euiFormControlLayout--group euiFormControlLayout-isDisabled emotion-euiFormControlLayout-fullWidth-group-euiSuperDatePicker__formControlLayout-disabled"
   >
     <div
       class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.tsx.snap
index e69c9d92c8c..c8f372f6957 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.tsx.snap
@@ -88,10 +88,10 @@ exports[`EuiQuickSelect is rendered 1`] = `
               </option>
             </select>
             <div
-              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+              class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-compressed-absolute-right"
             >
               <span
-                class="euiFormControlLayoutCustomIcon"
+                class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
               >
                 <span
                   aria-hidden="true"
@@ -175,10 +175,10 @@ exports[`EuiQuickSelect is rendered 1`] = `
               </option>
             </select>
             <div
-              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+              class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-compressed-absolute-right"
             >
               <span
-                class="euiFormControlLayoutCustomIcon"
+                class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
               >
                 <span
                   aria-hidden="true"
@@ -305,10 +305,10 @@ exports[`EuiQuickSelect prevQuickSelect 1`] = `
               </option>
             </select>
             <div
-              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+              class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-compressed-absolute-right"
             >
               <span
-                class="euiFormControlLayoutCustomIcon"
+                class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
               >
                 <span
                   aria-hidden="true"
@@ -392,10 +392,10 @@ exports[`EuiQuickSelect prevQuickSelect 1`] = `
               </option>
             </select>
             <div
-              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+              class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-compressed-absolute-right"
             >
               <span
-                class="euiFormControlLayoutCustomIcon"
+                class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
               >
                 <span
                   aria-hidden="true"
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
index 159f0791e3d..f0a8e28e33c 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
@@ -92,10 +92,10 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
                 </option>
               </select>
               <div
-                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+                class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-compressed-absolute-right"
               >
                 <span
-                  class="euiFormControlLayoutCustomIcon"
+                  class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
                 >
                   <span
                     aria-hidden="true"
@@ -179,10 +179,10 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
                 </option>
               </select>
               <div
-                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+                class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-compressed-absolute-right"
               >
                 <span
-                  class="euiFormControlLayoutCustomIcon"
+                  class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
                 >
                   <span
                     aria-hidden="true"
@@ -328,7 +328,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
         style="min-width: 60px;"
       >
         <div
-          class="euiFormControlLayout emotion-euiFormControlLayout-compressed-fullWidth"
+          class="euiFormControlLayout euiFormControlLayout-isDisabled emotion-euiFormControlLayout-compressed-fullWidth"
         >
           <div
             class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx
index 13490c9e9e3..0c804ca5f79 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx
@@ -537,7 +537,7 @@ export class EuiSuperDatePickerInternal extends Component<
       compressed,
       isInvalid,
       isLoading: isLoading && !showUpdateButton,
-      disabled: !!isDisabled,
+      isDisabled: !!isDisabled,
       prepend: this.renderQuickSelect(),
       append: autoRefreshAppend,
       fullWidth: true,
@@ -601,11 +601,18 @@ export class EuiSuperDatePickerInternal extends Component<
       formControlLayoutProps.css,
     ];
 
+    // EuiFormControlLayout wants `isDisabled`, EuiDatePickerRange wants `disabled` :T
+    const { isDisabled: _, ..._rangeProps } = formControlLayoutProps;
+    const rangeProps = {
+      ..._rangeProps,
+      disabled: formControlLayoutProps.isDisabled,
+    };
+
     return (
       <EuiI18nConsumer>
         {({ locale: contextLocale }) => (
           <EuiDatePickerRange
-            {...formControlLayoutProps}
+            {...rangeProps}
             css={rangeCssStyles}
             isCustom={true}
             iconType={false}
diff --git a/packages/eui/src/components/form/_index.scss b/packages/eui/src/components/form/_index.scss
index b4c9f0dd4e2..84b7392e68e 100644
--- a/packages/eui/src/components/form/_index.scss
+++ b/packages/eui/src/components/form/_index.scss
@@ -1,7 +1,6 @@
 @import 'checkbox/index';
 @import 'described_form_group/index';
 @import 'form';
-@import 'form_control_layout/index';
 @import 'form_error_text/index';
 @import 'form_fieldset/index';
 @import 'form_help_text/index';
diff --git a/packages/eui/src/components/form/field_number/field_number.tsx b/packages/eui/src/components/form/field_number/field_number.tsx
index cdeae657218..2e648b9cdee 100644
--- a/packages/eui/src/components/form/field_number/field_number.tsx
+++ b/packages/eui/src/components/form/field_number/field_number.tsx
@@ -184,6 +184,7 @@ export const EuiFieldNumber: FunctionComponent<EuiFieldNumberProps> = (
       fullWidth={fullWidth}
       isLoading={isLoading}
       isInvalid={isInvalid || isNativelyInvalid}
+      isDisabled={rest.disabled}
       compressed={compressed}
       readOnly={readOnly}
       prepend={prepend}
diff --git a/packages/eui/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap b/packages/eui/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
index f0a09ada527..39845a04ec3 100644
--- a/packages/eui/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
+++ b/packages/eui/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
@@ -9,10 +9,10 @@ exports[`EuiFieldPassword is rendered 1`] = `
     style="--euiFormControlLeftIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
@@ -46,10 +46,10 @@ exports[`EuiFieldPassword props compressed is rendered 1`] = `
     style="--euiFormControlLeftIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-compressed-absolute-left"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
@@ -78,10 +78,10 @@ exports[`EuiFieldPassword props dual dual type also renders append 1`] = `
     style="--euiFormControlLeftIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
@@ -135,10 +135,10 @@ exports[`EuiFieldPassword props dual dualToggleProps is rendered 1`] = `
     style="--euiFormControlLeftIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
@@ -185,10 +185,10 @@ exports[`EuiFieldPassword props fullWidth is rendered 1`] = `
     style="--euiFormControlLeftIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
@@ -217,10 +217,10 @@ exports[`EuiFieldPassword props isInvalid is rendered 1`] = `
     style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
@@ -239,7 +239,7 @@ exports[`EuiFieldPassword props isInvalid is rendered 1`] = `
       />
     </eui-validatable-control>
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
     >
       <span
         color="danger"
@@ -259,10 +259,10 @@ exports[`EuiFieldPassword props isLoading is rendered 1`] = `
     style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
@@ -279,7 +279,7 @@ exports[`EuiFieldPassword props isLoading is rendered 1`] = `
       />
     </eui-validatable-control>
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
     >
       <span
         aria-label="Loading"
@@ -309,10 +309,10 @@ exports[`EuiFieldPassword props prepend and append is rendered 1`] = `
     style="--euiFormControlLeftIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
@@ -350,10 +350,10 @@ exports[`EuiFieldPassword props type dual is rendered 1`] = `
     style="--euiFormControlLeftIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
@@ -399,10 +399,10 @@ exports[`EuiFieldPassword props type password is rendered 1`] = `
     style="--euiFormControlLeftIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
@@ -431,10 +431,10 @@ exports[`EuiFieldPassword props type text is rendered 1`] = `
     style="--euiFormControlLeftIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
diff --git a/packages/eui/src/components/form/field_password/field_password.tsx b/packages/eui/src/components/form/field_password/field_password.tsx
index 9b90dc4cf47..84055bf38a8 100644
--- a/packages/eui/src/components/form/field_password/field_password.tsx
+++ b/packages/eui/src/components/form/field_password/field_password.tsx
@@ -83,6 +83,7 @@ export const EuiFieldPassword: FunctionComponent<EuiFieldPasswordProps> = (
     name,
     placeholder,
     value,
+    disabled,
     isInvalid,
     fullWidth = defaultFullWidth,
     isLoading = false,
@@ -134,7 +135,7 @@ export const EuiFieldPassword: FunctionComponent<EuiFieldPasswordProps> = (
           iconType={isVisible ? 'eyeClosed' : 'eye'}
           aria-label={isVisible ? maskPasswordLabel : showPasswordLabel}
           title={isVisible ? maskPasswordLabel : showPasswordLabel}
-          disabled={rest.disabled}
+          disabled={disabled}
           {...dualToggleProps}
           onClick={(e) => handleToggle(e, isVisible)}
         />
@@ -147,7 +148,7 @@ export const EuiFieldPassword: FunctionComponent<EuiFieldPasswordProps> = (
     showPasswordLabel,
     dualToggleProps,
     handleToggle,
-    rest.disabled,
+    disabled,
   ]);
 
   const finalAppend = useMemo(() => {
@@ -186,6 +187,7 @@ export const EuiFieldPassword: FunctionComponent<EuiFieldPasswordProps> = (
       fullWidth={fullWidth}
       isLoading={isLoading}
       isInvalid={isInvalid}
+      isDisabled={disabled}
       compressed={compressed}
       prepend={prepend}
       append={finalAppend}
@@ -199,6 +201,7 @@ export const EuiFieldPassword: FunctionComponent<EuiFieldPasswordProps> = (
           className={classes}
           css={cssStyles}
           value={value}
+          disabled={disabled}
           ref={setInputRef}
           {...rest}
         />
diff --git a/packages/eui/src/components/form/field_search/field_search.tsx b/packages/eui/src/components/form/field_search/field_search.tsx
index 902d33fa932..33bcc8e3348 100644
--- a/packages/eui/src/components/form/field_search/field_search.tsx
+++ b/packages/eui/src/components/form/field_search/field_search.tsx
@@ -216,6 +216,7 @@ export class EuiFieldSearchClass extends Component<
       name,
       placeholder,
       isInvalid,
+      disabled,
       fullWidth = defaultFullWidth,
       isLoading,
       inputRef,
@@ -233,7 +234,7 @@ export class EuiFieldSearchClass extends Component<
 
     // Set actual value of isClearable if value exists as well
     const isClearable = Boolean(
-      _isClearable && value && !rest.readOnly && !rest.disabled
+      _isClearable && value && !rest.readOnly && !disabled
     );
 
     const classes = classNames(
@@ -260,6 +261,7 @@ export class EuiFieldSearchClass extends Component<
         fullWidth={fullWidth}
         isLoading={isLoading}
         isInvalid={isInvalid}
+        isDisabled={disabled}
         clear={
           isClearable
             ? { onClick: this.onClear, 'data-test-subj': 'clearSearchButton' }
@@ -278,6 +280,7 @@ export class EuiFieldSearchClass extends Component<
             className={classes}
             css={cssStyles}
             onKeyUp={(e) => this.onKeyUp(e, incremental, onSearch)}
+            disabled={disabled}
             ref={this.setRef}
             {...rest}
           />
diff --git a/packages/eui/src/components/form/field_text/field_text.tsx b/packages/eui/src/components/form/field_text/field_text.tsx
index 3f99adc1762..ef56133bbf7 100644
--- a/packages/eui/src/components/form/field_text/field_text.tsx
+++ b/packages/eui/src/components/form/field_text/field_text.tsx
@@ -117,6 +117,7 @@ export const EuiFieldText: FunctionComponent<EuiFieldTextProps> = (props) => {
       fullWidth={fullWidth}
       isLoading={isLoading}
       isInvalid={isInvalid}
+      isDisabled={rest.disabled}
       compressed={compressed}
       readOnly={readOnly}
       prepend={prepend}
diff --git a/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap b/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap
index 05a8a099983..6093a747678 100644
--- a/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap
+++ b/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap
@@ -23,16 +23,16 @@ exports[`EuiFormControlLayout props clear onClick is rendered 1`] = `
     style="--euiFormControlRightIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
     >
       <button
         aria-label="Clear input"
-        class="euiFormControlLayoutClearButton customClass"
+        class="euiFormControlLayoutClearButton customClass emotion-euiFormControlLayoutClearButton"
         data-test-subj="clearButton"
         type="button"
       >
         <span
-          class="euiFormControlLayoutClearButton__icon"
+          class="euiFormControlLayoutClearButton__icon emotion-euiFormControlLayoutClearButton__icon-m"
           data-euiicon-type="cross"
         />
       </button>
@@ -50,10 +50,10 @@ exports[`EuiFormControlLayout props compressed renders small-sized icon, clear b
     style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 2;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-compressed-absolute-left"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
@@ -63,15 +63,15 @@ exports[`EuiFormControlLayout props compressed renders small-sized icon, clear b
       </span>
     </div>
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-compressed-absolute-right"
     >
       <button
         aria-label="Clear input"
-        class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
+        class="euiFormControlLayoutClearButton emotion-euiFormControlLayoutClearButton"
         type="button"
       >
         <span
-          class="euiFormControlLayoutClearButton__icon"
+          class="euiFormControlLayoutClearButton__icon emotion-euiFormControlLayoutClearButton__icon-s"
           data-euiicon-type="cross"
         />
       </button>
@@ -104,10 +104,10 @@ exports[`EuiFormControlLayout props icon is rendered as a string 1`] = `
     style="--euiFormControlLeftIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
@@ -129,10 +129,10 @@ exports[`EuiFormControlLayout props icon is rendered as an object 1`] = `
     style="--euiFormControlLeftIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
     >
       <span
-        class="euiFormControlLayoutCustomIcon customClass"
+        class="euiFormControlLayoutCustomIcon customClass emotion-euiFormControlLayoutCustomIcon"
         data-test-subj="myIcon"
       >
         <span
@@ -155,10 +155,10 @@ exports[`EuiFormControlLayout props icon side left is rendered 1`] = `
     style="--euiFormControlLeftIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
@@ -180,10 +180,10 @@ exports[`EuiFormControlLayout props icon side right is rendered 1`] = `
     style="--euiFormControlRightIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
@@ -206,10 +206,10 @@ exports[`EuiFormControlLayout props iconsPosition 1`] = `
     class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--static"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-static"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
@@ -219,7 +219,7 @@ exports[`EuiFormControlLayout props iconsPosition 1`] = `
       </span>
     </div>
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--static"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-static"
     >
       <span
         aria-label="Loading"
@@ -244,10 +244,10 @@ exports[`EuiFormControlLayout props isDropdown is rendered 1`] = `
     style="--euiFormControlRightIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
@@ -269,7 +269,7 @@ exports[`EuiFormControlLayout props isInvalid is rendered 1`] = `
     style="--euiFormControlRightIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
     >
       <span
         color="danger"
@@ -289,7 +289,7 @@ exports[`EuiFormControlLayout props isLoading is rendered 1`] = `
     style="--euiFormControlRightIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
     >
       <span
         aria-label="Loading"
diff --git a/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout_clear_button.test.tsx.snap b/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout_clear_button.test.tsx.snap
index 17a291c0d0b..992c2dbb323 100644
--- a/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout_clear_button.test.tsx.snap
+++ b/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout_clear_button.test.tsx.snap
@@ -3,12 +3,12 @@
 exports[`EuiFormControlLayoutClearButton is rendered 1`] = `
 <button
   aria-label="aria-label"
-  class="euiFormControlLayoutClearButton testClass1 testClass2 emotion-euiTestCss"
+  class="euiFormControlLayoutClearButton testClass1 testClass2 emotion-euiFormControlLayoutClearButton-euiTestCss"
   data-test-subj="test subject string"
   type="button"
 >
   <span
-    class="euiFormControlLayoutClearButton__icon"
+    class="euiFormControlLayoutClearButton__icon emotion-euiFormControlLayoutClearButton__icon-m"
     data-euiicon-type="cross"
   />
 </button>
@@ -17,11 +17,11 @@ exports[`EuiFormControlLayoutClearButton is rendered 1`] = `
 exports[`EuiFormControlLayoutClearButton size is rendered 1`] = `
 <button
   aria-label="Clear input"
-  class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
+  class="euiFormControlLayoutClearButton emotion-euiFormControlLayoutClearButton"
   type="button"
 >
   <span
-    class="euiFormControlLayoutClearButton__icon"
+    class="euiFormControlLayoutClearButton__icon emotion-euiFormControlLayoutClearButton__icon-s"
     data-euiicon-type="cross"
   />
 </button>
diff --git a/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout_custom_icon.test.tsx.snap b/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout_custom_icon.test.tsx.snap
index 899c46e6829..3125319fa98 100644
--- a/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout_custom_icon.test.tsx.snap
+++ b/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout_custom_icon.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiFormControlLayoutCustomIcon is rendered as button 1`] = `
 <button
   aria-label="aria-label"
-  class="euiFormControlLayoutCustomIcon testClass1 testClass2 emotion-euiTestCss euiFormControlLayoutCustomIcon--clickable"
+  class="euiFormControlLayoutCustomIcon testClass1 testClass2 emotion-euiFormControlLayoutCustomIcon-clickable-euiTestCss"
   data-test-subj="test subject string"
   type="button"
 >
@@ -19,7 +19,7 @@ exports[`EuiFormControlLayoutCustomIcon is rendered as button 1`] = `
 exports[`EuiFormControlLayoutCustomIcon is rendered as span 1`] = `
 <span
   aria-label="aria-label"
-  class="euiFormControlLayoutCustomIcon testClass1 testClass2 emotion-euiTestCss"
+  class="euiFormControlLayoutCustomIcon testClass1 testClass2 emotion-euiFormControlLayoutCustomIcon-euiTestCss"
   data-test-subj="test subject string"
 >
   <span
@@ -32,7 +32,7 @@ exports[`EuiFormControlLayoutCustomIcon is rendered as span 1`] = `
 
 exports[`EuiFormControlLayoutCustomIcon size is rendered 1`] = `
 <span
-  class="euiFormControlLayoutCustomIcon"
+  class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
 >
   <span
     aria-hidden="true"
diff --git a/packages/eui/src/components/form/form_control_layout/_form_control_layout_clear_button.scss b/packages/eui/src/components/form/form_control_layout/_form_control_layout_clear_button.scss
deleted file mode 100644
index 8bfaf521cf5..00000000000
--- a/packages/eui/src/components/form/form_control_layout/_form_control_layout_clear_button.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.euiFormControlLayoutClearButton {
-  @include euiFormControlLayoutClearIcon('.euiFormControlLayoutClearButton__icon');
-}
-
-.euiFormControlLayoutClearButton--small {
-  @include euiFormControlLayoutClearIcon('.euiFormControlLayoutClearButton__icon', $size: 's');
-}
diff --git a/packages/eui/src/components/form/form_control_layout/_form_control_layout_custom_icon.scss b/packages/eui/src/components/form/form_control_layout/_form_control_layout_custom_icon.scss
deleted file mode 100644
index 4c1677c0de2..00000000000
--- a/packages/eui/src/components/form/form_control_layout/_form_control_layout_custom_icon.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.euiFormControlLayoutCustomIcon {
-  pointer-events: none;
-  font-size: 0; // ensures the icon stays vertically centered
-}
-
-.euiFormControlLayoutCustomIcon--clickable {
-  @include size($euiSize);
-
-  pointer-events: all;
-
-  .euiFormControlLayoutCustomIcon__icon {
-    vertical-align: baseline;
-    transform: none;
-  }
-
-  &:focus {
-    @include euiFocusRing;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    color: $euiFormControlDisabledColor;
-  }
-}
diff --git a/packages/eui/src/components/form/form_control_layout/_form_control_layout_icons.scss b/packages/eui/src/components/form/form_control_layout/_form_control_layout_icons.scss
deleted file mode 100644
index bad4faf714e..00000000000
--- a/packages/eui/src/components/form/form_control_layout/_form_control_layout_icons.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-.euiFormControlLayoutIcons {
-  pointer-events: none;
-  display: flex;
-  align-items: center;
-
-  > * + * {
-    margin-left: $euiFormControlPadding / 2;
-  }
-
-  &--absolute {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: $euiFormControlPadding;
-
-    [class*='euiFormControlLayout-compressed'] & {
-      left: $euiFormControlCompressedPadding;
-    }
-  }
-
-  &--static {
-    // Absolutely positioning the icons sometimes doesn't work -
-    // in the case of delimited inputs, they overlay only one of controls making the layout unbalanced
-    position: static;
-    height: 100%;
-    align-self: stretch;
-    flex-grow: 0;
-    padding-inline: $euiFormControlPadding;
-
-    [class*='euiFormControlLayout-compressed'] & {
-      padding-inline: $euiFormControlCompressedPadding;
-    }
-  }
-}
-
-.euiFormControlLayoutIcons--left {
-  z-index: 1; // Ensure the icon is visible above sibling inputs
-}
-
-.euiFormControlLayoutIcons--right {
-  left: auto;
-  right: $euiFormControlPadding;
-
-  [class*='euiFormControlLayout-compressed'] & {
-    left: auto;
-    right: $euiFormControlCompressedPadding;
-  }
-}
-
-// If the control is disabled, change the color of the icons
-*:disabled + .euiFormControlLayoutIcons {
-  cursor: not-allowed;
-  color: $euiFormControlDisabledColor;
-}
diff --git a/packages/eui/src/components/form/form_control_layout/_index.scss b/packages/eui/src/components/form/form_control_layout/_index.scss
deleted file mode 100644
index df8eb6e7a27..00000000000
--- a/packages/eui/src/components/form/form_control_layout/_index.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'form_control_layout_icons';
-@import 'form_control_layout_clear_button';
-@import 'form_control_layout_custom_icon';
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout.stories.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout.stories.tsx
index acb511250a1..405f8031d82 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout.stories.tsx
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout.stories.tsx
@@ -87,7 +87,14 @@ export const Playground: Story = {
 export const IconShape: Story = {
   parameters: {
     controls: {
-      include: ['icon', 'isInvalid', 'isLoading', 'iconsPosition', 'clear'],
+      include: [
+        'icon',
+        'isInvalid',
+        'isLoading',
+        'isDisabled',
+        'iconsPosition',
+        'clear',
+      ],
     },
   },
   args: {
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout.tsx
index bfb4b97bdcd..1c7438f648e 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout.tsx
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout.tsx
@@ -183,6 +183,7 @@ export const EuiFormControlLayout: FunctionComponent<
             icon={icon}
             iconsPosition={iconsPosition}
             compressed={compressed}
+            isDisabled={isDisabled}
           />
         )}
 
@@ -198,6 +199,7 @@ export const EuiFormControlLayout: FunctionComponent<
             isLoading={isLoading}
             isInvalid={isInvalid}
             isDropdown={hasDropdownIcon}
+            isDisabled={isDisabled}
           />
         )}
       </div>
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.styles.ts b/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.styles.ts
new file mode 100644
index 00000000000..4da1965775f
--- /dev/null
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.styles.ts
@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../../services';
+
+export const EuiFormControlLayoutClearButtonStyles = ({
+  euiTheme,
+  colorMode,
+}: UseEuiTheme) => {
+  const backgroundColor =
+    colorMode === 'DARK'
+      ? euiTheme.colors.darkShade
+      : euiTheme.colors.mediumShade;
+  return {
+    euiFormControlLayoutClearButton: css`
+      pointer-events: all;
+      background-color: ${backgroundColor};
+      border-radius: 50%;
+      line-height: 0; /* ensures the icon stays vertically centered */
+
+      &:disabled {
+        cursor: not-allowed;
+        background-color: ${euiTheme.colors.disabled};
+      }
+    `,
+
+    euiFormControlLayoutClearButton__icon: css`
+      transform: scale(0.5);
+      fill: ${euiTheme.colors.emptyShade};
+      stroke: ${euiTheme.colors.emptyShade};
+    `,
+    size: {
+      s: css`
+        stroke-width: ${euiTheme.size.xs};
+      `,
+      m: css`
+        stroke-width: ${euiTheme.size.xxs};
+      `,
+    },
+  };
+};
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.test.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.test.tsx
index fca5cdffd1a..9b436c915a3 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.test.tsx
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.test.tsx
@@ -8,10 +8,14 @@
 
 import React from 'react';
 import { requiredProps } from '../../../test';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 import { render } from '../../../test/rtl';
+
 import { EuiFormControlLayoutClearButton } from './form_control_layout_clear_button';
 
 describe('EuiFormControlLayoutClearButton', () => {
+  shouldRenderCustomStyles(<EuiFormControlLayoutClearButton />);
+
   test('is rendered', () => {
     const { container } = render(
       <EuiFormControlLayoutClearButton
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.tsx
index 9d128ffde21..072da96221d 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.tsx
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout_clear_button.tsx
@@ -7,52 +7,50 @@
  */
 
 import React, { FunctionComponent, ButtonHTMLAttributes } from 'react';
-
 import classNames from 'classnames';
-import { CommonProps, keysOf } from '../../common';
-import { EuiIcon } from '../../icon';
-import { EuiI18n } from '../../i18n';
 
-const sizeToClassNameMap = {
-  s: 'euiFormControlLayoutClearButton--small',
-  m: null,
-};
+import { useEuiMemoizedStyles } from '../../../services';
+import { CommonProps } from '../../common';
+import { EuiIcon } from '../../icon';
+import { useEuiI18n } from '../../i18n';
 
-export const SIZES = keysOf(sizeToClassNameMap);
+import { EuiFormControlLayoutClearButtonStyles } from './form_control_layout_clear_button.styles';
 
 export type EuiFormControlLayoutClearButtonProps = CommonProps &
   ButtonHTMLAttributes<HTMLButtonElement> & {
-    size?: (typeof SIZES)[number];
+    size?: 's' | 'm';
   };
 
 export const EuiFormControlLayoutClearButton: FunctionComponent<
   EuiFormControlLayoutClearButtonProps
 > = ({ className, onClick, size = 'm', ...rest }) => {
-  const classes = classNames(
-    'euiFormControlLayoutClearButton',
-    sizeToClassNameMap[size],
-    className
+  const classes = classNames('euiFormControlLayoutClearButton', className);
+  const styles = useEuiMemoizedStyles(EuiFormControlLayoutClearButtonStyles);
+  const iconStyles = [
+    styles.euiFormControlLayoutClearButton__icon,
+    styles.size[size],
+  ];
+
+  const ariaLabel = useEuiI18n(
+    'euiFormControlLayoutClearButton.label',
+    'Clear input'
   );
 
   return (
-    <EuiI18n
-      token="euiFormControlLayoutClearButton.label"
-      default="Clear input"
+    <button
+      type="button"
+      css={styles.euiFormControlLayoutClearButton}
+      className={classes}
+      onClick={onClick}
+      aria-label={ariaLabel}
+      {...rest}
     >
-      {(label: string) => (
-        <button
-          type="button"
-          className={classes}
-          onClick={onClick}
-          aria-label={label}
-          {...rest}
-        >
-          <EuiIcon
-            className="euiFormControlLayoutClearButton__icon"
-            type="cross"
-          />
-        </button>
-      )}
-    </EuiI18n>
+      <EuiIcon
+        css={iconStyles}
+        className="euiFormControlLayoutClearButton__icon"
+        type="cross"
+        size={size}
+      />
+    </button>
   );
 };
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_custom_icon.test.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout_custom_icon.test.tsx
index b5abcb2c728..61a18d2afcc 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout_custom_icon.test.tsx
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout_custom_icon.test.tsx
@@ -9,12 +9,16 @@
 import React from 'react';
 import { requiredProps } from '../../../test';
 import { render } from '../../../test/rtl';
+import { shouldRenderCustomStyles } from '../../../test/internal';
+
 import {
   EuiFormControlLayoutCustomIcon,
   EuiFormControlLayoutCustomIconProps,
 } from './form_control_layout_custom_icon';
 
 describe('EuiFormControlLayoutCustomIcon', () => {
+  shouldRenderCustomStyles(<EuiFormControlLayoutCustomIcon type="faceHappy" />);
+
   test('is rendered as button', () => {
     const props: EuiFormControlLayoutCustomIconProps = {
       onClick: () => null,
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx
index 7440ccd14d5..effdc52fb2d 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout_custom_icon.tsx
@@ -11,10 +11,11 @@ import React, {
   FunctionComponent,
   HTMLAttributes,
 } from 'react';
+import { css } from '@emotion/react';
 import classNames from 'classnames';
 
-import { EuiIcon, EuiIconProps, IconType } from '../../icon';
 import { CommonProps, ExclusiveUnion } from '../../common';
+import { EuiIcon, EuiIconProps, IconType } from '../../icon';
 
 export type EuiFormControlLayoutCustomIconProps = CommonProps &
   ExclusiveUnion<
@@ -30,16 +31,20 @@ export type EuiFormControlLayoutCustomIconProps = CommonProps &
 
 export const EuiFormControlLayoutCustomIcon: FunctionComponent<
   EuiFormControlLayoutCustomIconProps
-> = ({ className, onClick, type, iconRef, size, color, ...rest }) => {
-  const classes = classNames('euiFormControlLayoutCustomIcon', className, {
-    'euiFormControlLayoutCustomIcon--clickable': onClick,
-  });
+> = ({ className, onClick, type, iconRef, size, color, disabled, ...rest }) => {
+  const classes = classNames('euiFormControlLayoutCustomIcon', className);
+  const cssStyles = [
+    styles.euiFormControlLayoutCustomIcon,
+    onClick ? styles.clickable : styles.unclickable,
+  ];
 
   if (onClick) {
     return (
       <button
         type="button"
         onClick={onClick}
+        disabled={disabled}
+        css={cssStyles}
         className={classes}
         ref={iconRef}
         {...rest}
@@ -56,7 +61,7 @@ export const EuiFormControlLayoutCustomIcon: FunctionComponent<
   }
 
   return (
-    <span className={classes} ref={iconRef} {...rest}>
+    <span css={cssStyles} className={classes} ref={iconRef} {...rest}>
       <EuiIcon
         className="euiFormControlLayoutCustomIcon__icon"
         aria-hidden="true"
@@ -67,3 +72,21 @@ export const EuiFormControlLayoutCustomIcon: FunctionComponent<
     </span>
   );
 };
+
+const styles = {
+  euiFormControlLayoutCustomIcon: css`
+    font-size: 0; /* Ensures the icon stays vertically centered */
+  `,
+  // Skip css`` here to avoid generating an Emotion className
+  unclickable: `
+    pointer-events: none;
+  `,
+  clickable: css`
+    pointer-events: all;
+
+    &:disabled {
+      cursor: not-allowed;
+      color: currentColor; /* Should inherit disabled form color from euiFormControlLayoutIcons */
+    }
+  `,
+};
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_icons.styles.ts b/packages/eui/src/components/form/form_control_layout/form_control_layout_icons.styles.ts
new file mode 100644
index 00000000000..be6853f1ec3
--- /dev/null
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout_icons.styles.ts
@@ -0,0 +1,77 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../../services';
+import { logicalCSS, mathWithUnits } from '../../../global_styling';
+import { euiFormVariables } from '../form.styles';
+
+export const euiFormControlLayoutIconsStyles = (
+  euiThemeContext: UseEuiTheme
+) => {
+  const { controlPadding, controlCompressedPadding, controlDisabledColor } =
+    euiFormVariables(euiThemeContext);
+
+  return {
+    euiFormControlLayoutIcons: css`
+      pointer-events: none;
+      display: flex;
+      align-items: center;
+    `,
+    uncompressed: `
+      gap: ${mathWithUnits(controlPadding, (x) => x / 2)};
+    `,
+    compressed: css`
+      gap: ${mathWithUnits(controlCompressedPadding, (x) => x / 2)};
+    `,
+    disabled: css`
+      cursor: not-allowed;
+      /* If the control is disabled, change the color of the icons */
+      color: ${controlDisabledColor};
+    `,
+
+    position: {
+      absolute: {
+        absolute: css`
+          position: absolute;
+          ${logicalCSS('vertical', 0)}
+        `,
+        uncompressed: {
+          left: css`
+            z-index: 1; /* Ensure the icon is visible above sibling inputs */
+            ${logicalCSS('left', controlPadding)}
+          `,
+          right: css`
+            ${logicalCSS('right', controlPadding)}
+          `,
+        },
+        compressed: {
+          left: css`
+            z-index: 1; /* Ensure the icon is visible above sibling inputs */
+            ${logicalCSS('left', controlCompressedPadding)}
+          `,
+          right: css`
+            ${logicalCSS('right', controlCompressedPadding)}
+          `,
+        },
+      },
+      static: {
+        static: css`
+          position: static;
+          ${logicalCSS('height', '100%')}
+          align-self: stretch;
+          flex-grow: 0;
+          ${logicalCSS('padding-horizontal', '100%')}
+        `,
+        uncompressed: logicalCSS('padding-horizontal', controlPadding),
+        compressed: logicalCSS('padding-horizontal', controlCompressedPadding),
+      },
+    },
+  };
+};
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_icons.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout_icons.tsx
index 5cfd7ce1ac3..2ecd10e0110 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout_icons.tsx
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout_icons.tsx
@@ -7,9 +7,12 @@
  */
 
 import React, { Component } from 'react';
-import classNames from 'classnames';
 
+import { RenderWithEuiStylesMemoizer } from '../../../services';
+import { DistributiveOmit } from '../../common';
+import { EuiIcon, IconColor, IconType } from '../../icon';
 import { EuiLoadingSpinner } from '../../loading';
+
 import {
   EuiFormControlLayoutClearButton,
   EuiFormControlLayoutClearButtonProps,
@@ -18,8 +21,7 @@ import {
   EuiFormControlLayoutCustomIcon,
   EuiFormControlLayoutCustomIconProps,
 } from './form_control_layout_custom_icon';
-import { EuiIcon, IconColor, IconType } from '../../icon';
-import { DistributiveOmit } from '../../common';
+import { euiFormControlLayoutIconsStyles } from './form_control_layout_icons.styles';
 
 export const ICON_SIDES = ['left', 'right'] as const;
 
@@ -48,11 +50,17 @@ export interface EuiFormControlLayoutIconsProps {
   isInvalid?: boolean;
   isDropdown?: boolean;
   compressed?: boolean;
+  isDisabled?: boolean;
 }
 
 export class EuiFormControlLayoutIcons extends Component<EuiFormControlLayoutIconsProps> {
   render() {
-    const { side = 'left', iconsPosition = 'absolute' } = this.props;
+    const {
+      side = 'left',
+      iconsPosition = 'absolute',
+      compressed,
+      isDisabled,
+    } = this.props;
 
     const customIcon = this.renderCustomIcon();
     const loadingSpinner = this.renderLoadingSpinner();
@@ -60,25 +68,44 @@ export class EuiFormControlLayoutIcons extends Component<EuiFormControlLayoutIco
     const invalidIcon = this.renderInvalidIcon();
     const dropdownIcon = this.renderDropdownIcon();
 
-    const classes = classNames(
-      'euiFormControlLayoutIcons',
-      `euiFormControlLayoutIcons--${side}`,
-      `euiFormControlLayoutIcons--${iconsPosition}`
-    );
-
     return (
-      <div className={classes}>
-        {clearButton}
-        {loadingSpinner}
-        {invalidIcon}
-        {customIcon}
-        {dropdownIcon}
-      </div>
+      <RenderWithEuiStylesMemoizer>
+        {(stylesMemoizer) => {
+          const styles = stylesMemoizer(euiFormControlLayoutIconsStyles);
+          const cssStyles = [
+            styles.euiFormControlLayoutIcons,
+            compressed ? styles.compressed : styles.uncompressed,
+            ...(iconsPosition === 'absolute'
+              ? [
+                  styles.position.absolute.absolute,
+                  compressed
+                    ? styles.position.absolute.compressed[side]
+                    : styles.position.absolute.uncompressed[side],
+                ]
+              : [
+                  styles.position.static.static,
+                  compressed
+                    ? styles.position.static.compressed
+                    : styles.position.static.uncompressed,
+                ]),
+            isDisabled && styles.disabled,
+          ];
+          return (
+            <div css={cssStyles} className="euiFormControlLayoutIcons">
+              {clearButton}
+              {loadingSpinner}
+              {invalidIcon}
+              {customIcon}
+              {dropdownIcon}
+            </div>
+          );
+        }}
+      </RenderWithEuiStylesMemoizer>
     );
   }
 
   renderCustomIcon() {
-    const { icon, compressed } = this.props;
+    const { icon, compressed, isDisabled } = this.props;
 
     if (!icon) {
       return null;
@@ -95,6 +122,7 @@ export class EuiFormControlLayoutIcons extends Component<EuiFormControlLayoutIco
     return (
       <EuiFormControlLayoutCustomIcon
         size={compressed ? 's' : 'm'}
+        disabled={isDisabled}
         iconRef={iconRef}
         {...iconRest}
       />
@@ -102,7 +130,7 @@ export class EuiFormControlLayoutIcons extends Component<EuiFormControlLayoutIco
   }
 
   renderDropdownIcon() {
-    const { isDropdown, compressed } = this.props;
+    const { isDropdown, compressed, isDisabled } = this.props;
 
     if (!isDropdown) {
       return null;
@@ -111,6 +139,7 @@ export class EuiFormControlLayoutIcons extends Component<EuiFormControlLayoutIco
     return (
       <EuiFormControlLayoutCustomIcon
         size={compressed ? 's' : 'm'}
+        disabled={isDisabled}
         type="arrowDown"
       />
     );
@@ -127,7 +156,7 @@ export class EuiFormControlLayoutIcons extends Component<EuiFormControlLayoutIco
   }
 
   renderClearButton() {
-    const { clear, compressed } = this.props;
+    const { clear, compressed, isDisabled } = this.props;
     if (!clear) {
       return null;
     }
@@ -135,6 +164,7 @@ export class EuiFormControlLayoutIcons extends Component<EuiFormControlLayoutIco
     return (
       <EuiFormControlLayoutClearButton
         size={compressed ? 's' : 'm'}
+        disabled={isDisabled}
         {...clear}
       />
     );
diff --git a/packages/eui/src/components/form/range/__snapshots__/dual_range.test.tsx.snap b/packages/eui/src/components/form/range/__snapshots__/dual_range.test.tsx.snap
index e5c8677c753..9813c324b0d 100644
--- a/packages/eui/src/components/form/range/__snapshots__/dual_range.test.tsx.snap
+++ b/packages/eui/src/components/form/range/__snapshots__/dual_range.test.tsx.snap
@@ -236,7 +236,7 @@ exports[`EuiDualRange props maxInputProps allows overriding default props 1`] =
         value="123"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
           color="danger"
@@ -366,7 +366,7 @@ exports[`EuiDualRange props minInputProps allows overriding default props 1`] =
         value="123"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
           color="danger"
diff --git a/packages/eui/src/components/form/range/__snapshots__/range.test.tsx.snap b/packages/eui/src/components/form/range/__snapshots__/range.test.tsx.snap
index d8bc1d67234..6d56644398d 100644
--- a/packages/eui/src/components/form/range/__snapshots__/range.test.tsx.snap
+++ b/packages/eui/src/components/form/range/__snapshots__/range.test.tsx.snap
@@ -363,7 +363,7 @@ exports[`EuiRange props loading should display when showInput="inputWithPopover"
         value="8"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
           aria-label="Loading"
diff --git a/packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
index 120536aee36..ea1da48dd23 100644
--- a/packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
+++ b/packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
@@ -21,10 +21,10 @@ exports[`EuiSuperSelect props compressed 1`] = `
         type="button"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-compressed-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -59,10 +59,10 @@ exports[`EuiSuperSelect props fullWidth 1`] = `
         type="button"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -106,10 +106,10 @@ exports[`EuiSuperSelect props prepend and append 1`] = `
         type="button"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -157,10 +157,10 @@ exports[`EuiSuperSelect renders 1`] = `
             type="button"
           />
           <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+            class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
           >
             <span
-              class="euiFormControlLayoutCustomIcon"
+              class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
             >
               <span
                 aria-hidden="true"
diff --git a/packages/eui/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap b/packages/eui/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap
index 02678c4b3aa..cca17b897fc 100644
--- a/packages/eui/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap
+++ b/packages/eui/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap
@@ -21,10 +21,10 @@ exports[`EuiSuperSelectControl is rendered 1`] = `
         type="button"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -57,10 +57,10 @@ exports[`EuiSuperSelectControl props compressed is rendered 1`] = `
         type="button"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-compressed-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -93,10 +93,10 @@ exports[`EuiSuperSelectControl props disabled options are rendered 1`] = `
         type="button"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -129,10 +129,10 @@ exports[`EuiSuperSelectControl props empty value option is rendered 1`] = `
         type="button"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -165,10 +165,10 @@ exports[`EuiSuperSelectControl props fullWidth is rendered 1`] = `
         type="button"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -201,14 +201,14 @@ exports[`EuiSuperSelectControl props isInvalid is rendered 1`] = `
         type="button"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
           color="danger"
           data-euiicon-type="warning"
         />
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -241,7 +241,7 @@ exports[`EuiSuperSelectControl props isLoading is rendered 1`] = `
         type="button"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
           aria-label="Loading"
@@ -249,7 +249,7 @@ exports[`EuiSuperSelectControl props isLoading is rendered 1`] = `
           role="progressbar"
         />
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -288,10 +288,10 @@ exports[`EuiSuperSelectControl props placeholder is rendered 1`] = `
         </span>
       </button>
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -326,10 +326,10 @@ exports[`EuiSuperSelectControl props value option is rendered 1`] = `
         Option #1
       </button>
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
diff --git a/packages/eui/src/components/form/text_area/text_area.tsx b/packages/eui/src/components/form/text_area/text_area.tsx
index 42bed911394..4a7ed5fd59d 100644
--- a/packages/eui/src/components/form/text_area/text_area.tsx
+++ b/packages/eui/src/components/form/text_area/text_area.tsx
@@ -119,6 +119,7 @@ export const EuiTextArea: FunctionComponent<EuiTextAreaProps> = (props) => {
       fullWidth={fullWidth}
       isLoading={isLoading}
       isInvalid={isInvalid}
+      isDisabled={rest.disabled}
       clear={clear}
       icon={icon}
       className="euiFormControlLayout--euiTextArea"
diff --git a/packages/eui/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap b/packages/eui/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
index c9e44267101..30e83d49749 100644
--- a/packages/eui/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
+++ b/packages/eui/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
@@ -401,7 +401,7 @@ exports[`EuiInlineEditForm edit mode isInvalid 1`] = `
                 value="Hello World!"
               />
               <div
-                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+                class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
               >
                 <span
                   color="danger"
@@ -498,7 +498,7 @@ exports[`EuiInlineEditForm edit mode isLoading 1`] = `
                 value="Hello World!"
               />
               <div
-                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+                class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
               >
                 <span
                   aria-label="Loading"
diff --git a/packages/eui/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap b/packages/eui/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap
index 7852cdc8dbf..2799498afc5 100644
--- a/packages/eui/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap
+++ b/packages/eui/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap
@@ -15,10 +15,10 @@ exports[`SearchBar render - box 1`] = `
         style="--euiFormControlLeftIconsCount: 1;"
       >
         <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+          class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
         >
           <span
-            class="euiFormControlLayoutCustomIcon"
+            class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
           >
             <span
               aria-hidden="true"
@@ -56,10 +56,10 @@ exports[`SearchBar render - no config, no query 1`] = `
         style="--euiFormControlLeftIconsCount: 1;"
       >
         <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+          class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
         >
           <span
-            class="euiFormControlLayoutCustomIcon"
+            class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
           >
             <span
               aria-hidden="true"
@@ -96,10 +96,10 @@ exports[`SearchBar render - provided query, filters 1`] = `
         style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
       >
         <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+          class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
         >
           <span
-            class="euiFormControlLayoutCustomIcon"
+            class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
           >
             <span
               aria-hidden="true"
@@ -116,16 +116,16 @@ exports[`SearchBar render - provided query, filters 1`] = `
           value="this is a query"
         />
         <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+          class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
         >
           <button
             aria-label="Clear input"
-            class="euiFormControlLayoutClearButton"
+            class="euiFormControlLayoutClearButton emotion-euiFormControlLayoutClearButton"
             data-test-subj="clearSearchButton"
             type="button"
           >
             <span
-              class="euiFormControlLayoutClearButton__icon"
+              class="euiFormControlLayoutClearButton__icon emotion-euiFormControlLayoutClearButton__icon-m"
               data-euiicon-type="cross"
             />
           </button>
@@ -207,10 +207,10 @@ exports[`SearchBar render - tools 1`] = `
         style="--euiFormControlLeftIconsCount: 1;"
       >
         <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+          class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
         >
           <span
-            class="euiFormControlLayoutCustomIcon"
+            class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
           >
             <span
               aria-hidden="true"
diff --git a/packages/eui/src/components/search_bar/__snapshots__/search_box.test.tsx.snap b/packages/eui/src/components/search_bar/__snapshots__/search_box.test.tsx.snap
index e6eba163ded..df3a812ae2d 100644
--- a/packages/eui/src/components/search_bar/__snapshots__/search_box.test.tsx.snap
+++ b/packages/eui/src/components/search_bar/__snapshots__/search_box.test.tsx.snap
@@ -9,10 +9,10 @@ exports[`EuiSearchBox render - custom placeholder and incremental 1`] = `
     style="--euiFormControlLeftIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
@@ -42,10 +42,10 @@ exports[`EuiSearchBox render - no config 1`] = `
     style="--euiFormControlLeftIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
diff --git a/packages/eui/src/components/selectable/__snapshots__/selectable.test.tsx.snap b/packages/eui/src/components/selectable/__snapshots__/selectable.test.tsx.snap
index 1accec54650..8c6494496e6 100644
--- a/packages/eui/src/components/selectable/__snapshots__/selectable.test.tsx.snap
+++ b/packages/eui/src/components/selectable/__snapshots__/selectable.test.tsx.snap
@@ -357,10 +357,10 @@ exports[`EuiSelectable search value supports inheriting initialSearchValue from
       style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
     >
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
       >
         <span
-          class="euiFormControlLayoutCustomIcon"
+          class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
         >
           <span
             aria-hidden="true"
@@ -382,16 +382,16 @@ exports[`EuiSelectable search value supports inheriting initialSearchValue from
         value="default value"
       />
       <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+        class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
       >
         <button
           aria-label="Clear input"
-          class="euiFormControlLayoutClearButton"
+          class="euiFormControlLayoutClearButton emotion-euiFormControlLayoutClearButton"
           data-test-subj="clearSearchButton"
           type="button"
         >
           <span
-            class="euiFormControlLayoutClearButton__icon"
+            class="euiFormControlLayoutClearButton__icon emotion-euiFormControlLayoutClearButton__icon-m"
             data-euiicon-type="cross"
           />
         </button>
diff --git a/packages/eui/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap b/packages/eui/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap
index 2660bcecec5..d93c0477ede 100644
--- a/packages/eui/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap
+++ b/packages/eui/src/components/selectable/selectable_search/__snapshots__/selectable_search.test.tsx.snap
@@ -9,10 +9,10 @@ exports[`EuiSelectableSearch is rendered 1`] = `
     style="--euiFormControlLeftIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
@@ -43,10 +43,10 @@ exports[`EuiSelectableSearch renders aria props if a listId is present 1`] = `
     style="--euiFormControlLeftIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
@@ -82,10 +82,10 @@ exports[`EuiSelectableSearch renders placeholder, value, name, and other remaini
     style="--euiFormControlLeftIconsCount: 1; --euiFormControlRightIconsCount: 1;"
   >
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
     >
       <span
-        class="euiFormControlLayoutCustomIcon"
+        class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
       >
         <span
           aria-hidden="true"
@@ -107,16 +107,16 @@ exports[`EuiSelectableSearch renders placeholder, value, name, and other remaini
       value="typed"
     />
     <div
-      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+      class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-right"
     >
       <button
         aria-label="Clear input"
-        class="euiFormControlLayoutClearButton"
+        class="euiFormControlLayoutClearButton emotion-euiFormControlLayoutClearButton"
         data-test-subj="clearSearchButton"
         type="button"
       >
         <span
-          class="euiFormControlLayoutClearButton__icon"
+          class="euiFormControlLayoutClearButton__icon emotion-euiFormControlLayoutClearButton__icon-m"
           data-euiicon-type="cross"
         />
       </button>
diff --git a/packages/eui/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap b/packages/eui/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap
index cad97a4651a..a3c006ecd83 100644
--- a/packages/eui/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap
+++ b/packages/eui/src/components/selectable/selectable_templates/__snapshots__/selectable_template_sitewide.test.tsx.snap
@@ -16,10 +16,10 @@ exports[`EuiSelectableTemplateSitewide is rendered 1`] = `
         style="--euiFormControlLeftIconsCount: 1;"
       >
         <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+          class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
         >
           <span
-            class="euiFormControlLayoutCustomIcon"
+            class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
           >
             <span
               aria-hidden="true"
@@ -87,10 +87,10 @@ exports[`EuiSelectableTemplateSitewide props popoverFooter is rendered 1`] = `
         style="--euiFormControlLeftIconsCount: 1;"
       >
         <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+          class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
         >
           <span
-            class="euiFormControlLayoutCustomIcon"
+            class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
           >
             <span
               aria-hidden="true"
@@ -138,10 +138,10 @@ exports[`EuiSelectableTemplateSitewide props popoverProps is rendered 1`] = `
         style="--euiFormControlLeftIconsCount: 1;"
       >
         <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+          class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
         >
           <span
-            class="euiFormControlLayoutCustomIcon"
+            class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
           >
             <span
               aria-hidden="true"
@@ -189,10 +189,10 @@ exports[`EuiSelectableTemplateSitewide props popoverTitle is rendered 1`] = `
         style="--euiFormControlLeftIconsCount: 1;"
       >
         <div
-          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
+          class="euiFormControlLayoutIcons emotion-euiFormControlLayoutIcons-absolute-left"
         >
           <span
-            class="euiFormControlLayoutCustomIcon"
+            class="euiFormControlLayoutCustomIcon emotion-euiFormControlLayoutCustomIcon"
           >
             <span
               aria-hidden="true"
diff --git a/packages/eui/src/global_styling/mixins/_form.scss b/packages/eui/src/global_styling/mixins/_form.scss
index 2b2dbda6679..76c320947dd 100644
--- a/packages/eui/src/global_styling/mixins/_form.scss
+++ b/packages/eui/src/global_styling/mixins/_form.scss
@@ -26,34 +26,6 @@
   }
 }
 
-@mixin euiFormControlLayoutClearIcon($iconClass, $size: 'm') {
-  $clearSize: $euiSize;
-  $clearIconStroke: 2px;
-
-  @if ($size == 's') {
-    $clearSize: $euiSizeM;
-    $clearIconStroke: $euiSizeXS;
-  }
-
-  @include size($clearSize);
-  pointer-events: all;
-  background-color: lightOrDarkTheme($euiColorMediumShade, $euiColorDarkShade);
-  border-radius: $clearSize;
-  line-height: 0; // ensures the icon stays vertically centered
-
-  &:focus {
-    @include euiFocusRing;
-  }
-
-  #{$iconClass} {
-    @include size($clearSize / 2);
-    fill: $euiColorEmptyShade;
-    // increase thickness of icon at such a small size
-    stroke: $euiColorEmptyShade;
-    stroke-width: $clearIconStroke;
-  }
-}
-
 @mixin euiPlaceholderPerBrowser {
   // stylelint-disable selector-no-vendor-prefix
   // Each prefix must be its own content block