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 903163ebad12..04494977e347 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
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { Component } from 'react';
+import React from 'react';
 
 import { RenderWithEuiStylesMemoizer } from '../../../services';
 import { DistributiveOmit } from '../../common';
@@ -53,130 +53,135 @@ export interface EuiFormControlLayoutIconsProps {
   isDisabled?: boolean;
 }
 
-export class EuiFormControlLayoutIcons extends Component<EuiFormControlLayoutIconsProps> {
-  render() {
-    const {
-      side = 'left',
-      iconsPosition = 'absolute',
-      compressed,
-      isDisabled,
-    } = this.props;
-
-    const customIcon = this.renderCustomIcon();
-    const loadingSpinner = this.renderLoadingSpinner();
-    const clearButton = this.renderClearButton();
-    const invalidIcon = this.renderInvalidIcon();
-    const dropdownIcon = this.renderDropdownIcon();
-
-    return (
-      <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>
-    );
-  }
+export const EuiFormControlLayoutIcons = ({
+  side = 'left',
+  iconsPosition = 'absolute',
+  compressed,
+  isDisabled,
+  icon,
+  clear,
+  isLoading,
+  isInvalid,
+  isDropdown,
+}: EuiFormControlLayoutIconsProps) => {
+  const customIcon = renderCustomIcon(icon, isDisabled);
+  const loadingSpinner = renderLoadingSpinner(isLoading);
+  const clearButton = renderClearButton(clear, isDisabled);
+  const invalidIcon = renderInvalidIcon(isInvalid);
+  const dropdownIcon = renderDropdownIcon(isDropdown, isDisabled);
+
+  return (
+    <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, isDisabled } = this.props;
-
-    if (!icon) {
-      return null;
-    }
-
-    // Normalize the icon to an object if it's a string.
-    const iconProps: IconShape = isIconShape(icon)
-      ? icon
-      : {
-          type: icon,
-        };
-    const { ref: iconRef, side, ...iconRest } = iconProps;
-
-    return (
-      <EuiFormControlLayoutCustomIcon
-        size="m"
-        disabled={isDisabled}
-        iconRef={iconRef}
-        {...iconRest}
-      />
-    );
+const renderCustomIcon = (
+  icon: EuiFormControlLayoutIconsProps['icon'],
+  isDisabled: EuiFormControlLayoutIconsProps['isDisabled']
+) => {
+  if (!icon) {
+    return null;
   }
 
-  renderDropdownIcon() {
-    const { isDropdown, isDisabled } = this.props;
-
-    if (!isDropdown) {
-      return null;
-    }
+  // Normalize the icon to an object if it's a string.
+  const iconProps: IconShape = isIconShape(icon)
+    ? icon
+    : {
+        type: icon,
+      };
+  const { ref: iconRef, side, ...iconRest } = iconProps;
+
+  return (
+    <EuiFormControlLayoutCustomIcon
+      size="m"
+      disabled={isDisabled}
+      iconRef={iconRef}
+      {...iconRest}
+    />
+  );
+};
 
-    return (
-      <EuiFormControlLayoutCustomIcon
-        size="m"
-        disabled={isDisabled}
-        type="chevronSingleDown"
-      />
-    );
+const renderDropdownIcon = (
+  isDropdown: EuiFormControlLayoutIconsProps['isDropdown'],
+  isDisabled: EuiFormControlLayoutIconsProps['isDisabled']
+) => {
+  if (!isDropdown) {
+    return null;
   }
 
-  renderLoadingSpinner() {
-    const { isLoading } = this.props;
-
-    if (!isLoading) {
-      return null;
-    }
+  return (
+    <EuiFormControlLayoutCustomIcon
+      size="m"
+      disabled={isDisabled}
+      type="chevronSingleDown"
+    />
+  );
+};
 
-    return <EuiLoadingSpinner size="m" />;
+const renderLoadingSpinner = (
+  isLoading: EuiFormControlLayoutIconsProps['isLoading']
+) => {
+  if (!isLoading) {
+    return null;
   }
 
-  renderClearButton() {
-    const { clear, isDisabled } = this.props;
-    if (!clear) {
-      return null;
-    }
-
-    return (
-      <EuiFormControlLayoutClearButton
-        size="m"
-        disabled={isDisabled}
-        {...clear}
-      />
-    );
-  }
+  return <EuiLoadingSpinner size="m" />;
+};
 
-  renderInvalidIcon() {
-    const { isInvalid } = this.props;
+const renderClearButton = (
+  clear: EuiFormControlLayoutIconsProps['clear'],
+  isDisabled: EuiFormControlLayoutIconsProps['isDisabled']
+) => {
+  if (!clear) {
+    return null;
+  }
 
-    if (!isInvalid) {
-      return null;
-    }
+  return (
+    <EuiFormControlLayoutClearButton
+      size="m"
+      disabled={isDisabled}
+      {...clear}
+    />
+  );
+};
 
-    return <EuiIcon size="m" color="danger" type="warning" />;
+const renderInvalidIcon = (
+  isInvalid: EuiFormControlLayoutIconsProps['isInvalid']
+) => {
+  if (!isInvalid) {
+    return null;
   }
-}
+
+  return <EuiIcon size="m" color="danger" type="warning" />;
+};