diff --git a/ui/components/component-library/avatar-account/avatar-account.js b/ui/components/component-library/avatar-account/avatar-account.js
index fd1fee73a28b..286024253294 100644
--- a/ui/components/component-library/avatar-account/avatar-account.js
+++ b/ui/components/component-library/avatar-account/avatar-account.js
@@ -13,32 +13,38 @@ import {
   AvatarAccountSize,
 } from './avatar-account.types';
 
-export const AvatarAccount = ({
-  size = AvatarAccountSize.Md,
-  address,
-  className,
-  variant = AvatarAccountVariant.Jazzicon,
-  ...props
-}) => (
-  <AvatarBase
-    size={size}
-    className={classnames('mm-avatar-account', className)}
-    {...props}
-  >
-    {variant === AvatarAccountVariant.Jazzicon ? (
-      <Jazzicon
-        className={classnames('mm-avatar-account__jazzicon')}
-        address={address}
-        diameter={AvatarAccountDiameter[size]}
-      />
-    ) : (
-      <BlockieIdenticon
-        address={address}
-        diameter={AvatarAccountDiameter[size]}
-        borderRadius="50%"
-      />
-    )}
-  </AvatarBase>
+export const AvatarAccount = React.forwardRef(
+  (
+    {
+      size = AvatarAccountSize.Md,
+      address,
+      className,
+      variant = AvatarAccountVariant.Jazzicon,
+      ...props
+    },
+    ref,
+  ) => (
+    <AvatarBase
+      ref={ref}
+      size={size}
+      className={classnames('mm-avatar-account', className)}
+      {...props}
+    >
+      {variant === AvatarAccountVariant.Jazzicon ? (
+        <Jazzicon
+          className={classnames('mm-avatar-account__jazzicon')}
+          address={address}
+          diameter={AvatarAccountDiameter[size]}
+        />
+      ) : (
+        <BlockieIdenticon
+          address={address}
+          diameter={AvatarAccountDiameter[size]}
+          borderRadius="50%"
+        />
+      )}
+    </AvatarBase>
+  ),
 );
 
 AvatarAccount.propTypes = {
@@ -66,3 +72,5 @@ AvatarAccount.propTypes = {
    */
   ...Box.propTypes,
 };
+
+AvatarAccount.displayName = 'AvatarAccount';
diff --git a/ui/components/component-library/avatar-account/avatar-account.test.js b/ui/components/component-library/avatar-account/avatar-account.test.js
index 1350daa01c9d..7d7837bdc073 100644
--- a/ui/components/component-library/avatar-account/avatar-account.test.js
+++ b/ui/components/component-library/avatar-account/avatar-account.test.js
@@ -112,4 +112,15 @@ describe('AvatarAccount', () => {
       'mm-avatar-base--size-xl',
     );
   });
+  it('should forward a ref to the root html element', () => {
+    const ref = React.createRef();
+    render(
+      <AvatarAccount
+        address="0x5CfE73b6021E818B776b421B1c4Db2474086a7e1"
+        ref={ref}
+      />,
+    );
+    expect(ref.current).not.toBeNull();
+    expect(ref.current.nodeName).toBe('DIV');
+  });
 });
diff --git a/ui/components/component-library/avatar-base/avatar-base.test.js b/ui/components/component-library/avatar-base/avatar-base.test.js
index 4d5505282616..8d67d67f90a9 100644
--- a/ui/components/component-library/avatar-base/avatar-base.test.js
+++ b/ui/components/component-library/avatar-base/avatar-base.test.js
@@ -121,4 +121,10 @@ describe('AvatarBase', () => {
       `box--border-color-${Color.errorDefault}`,
     );
   });
+  it('should forward a ref to the root html element', () => {
+    const ref = React.createRef();
+    render(<AvatarBase ref={ref}>A</AvatarBase>);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current.nodeName).toBe('DIV');
+  });
 });
diff --git a/ui/components/component-library/avatar-favicon/avatar-favicon.js b/ui/components/component-library/avatar-favicon/avatar-favicon.js
index ab8607fa0967..6f83d85874b4 100644
--- a/ui/components/component-library/avatar-favicon/avatar-favicon.js
+++ b/ui/components/component-library/avatar-favicon/avatar-favicon.js
@@ -15,43 +15,48 @@ import {
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { AVATAR_FAVICON_SIZES } from './avatar-favicon.constants';
 
-export const AvatarFavicon = ({
-  size = Size.MD,
-  src,
-  name = 'avatar-favicon',
-  className,
-  fallbackIconProps,
-  borderColor = BorderColor.transparent,
-  ...props
-}) => {
-  const t = useI18nContext();
-
-  return (
-    <AvatarBase
-      size={size}
-      display={DISPLAY.FLEX}
-      alignItems={AlignItems.center}
-      justifyContent={JustifyContent.center}
-      className={classnames('mm-avatar-favicon', className)}
-      {...{ borderColor, ...props }}
-    >
-      {src ? (
-        <img
-          className="mm-avatar-favicon__image"
-          src={src}
-          alt={t('logo', [name])}
-        />
-      ) : (
-        <Icon
-          name={IconName.Global}
-          color={IconColor.iconDefault}
-          size={size}
-          {...fallbackIconProps}
-        />
-      )}
-    </AvatarBase>
-  );
-};
+export const AvatarFavicon = React.forwardRef(
+  (
+    {
+      size = Size.MD,
+      src,
+      name = 'avatar-favicon',
+      className,
+      fallbackIconProps,
+      borderColor = BorderColor.transparent,
+      ...props
+    },
+    ref,
+  ) => {
+    const t = useI18nContext();
+    return (
+      <AvatarBase
+        ref={ref}
+        size={size}
+        display={DISPLAY.FLEX}
+        alignItems={AlignItems.center}
+        justifyContent={JustifyContent.center}
+        className={classnames('mm-avatar-favicon', className)}
+        {...{ borderColor, ...props }}
+      >
+        {src ? (
+          <img
+            className="mm-avatar-favicon__image"
+            src={src}
+            alt={t('logo', [name])}
+          />
+        ) : (
+          <Icon
+            name={IconName.Global}
+            color={IconColor.iconDefault}
+            size={size}
+            {...fallbackIconProps}
+          />
+        )}
+      </AvatarBase>
+    );
+  },
+);
 
 AvatarFavicon.propTypes = {
   /**
@@ -87,3 +92,5 @@ AvatarFavicon.propTypes = {
    */
   ...Box.propTypes,
 };
+
+AvatarFavicon.displayName = 'AvatarFavicon';
diff --git a/ui/components/component-library/avatar-favicon/avatar-favicon.test.js b/ui/components/component-library/avatar-favicon/avatar-favicon.test.js
index 4c882f0c1032..dd71aae8f150 100644
--- a/ui/components/component-library/avatar-favicon/avatar-favicon.test.js
+++ b/ui/components/component-library/avatar-favicon/avatar-favicon.test.js
@@ -105,4 +105,10 @@ describe('AvatarFavicon', () => {
     );
     expect(getByTestId('classname')).toHaveClass('mm-avatar-favicon--test');
   });
+  it('should forward a ref to the root html element', () => {
+    const ref = React.createRef();
+    render(<AvatarFavicon name="test" ref={ref} />);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current.nodeName).toBe('DIV');
+  });
 });
diff --git a/ui/components/component-library/avatar-icon/avatar-icon.js b/ui/components/component-library/avatar-icon/avatar-icon.js
index 53271ef5b131..d3ce05f165d3 100644
--- a/ui/components/component-library/avatar-icon/avatar-icon.js
+++ b/ui/components/component-library/avatar-icon/avatar-icon.js
@@ -19,33 +19,39 @@ import { AvatarBase } from '../avatar-base';
 
 import { AVATAR_ICON_SIZES } from './avatar-icon.constants';
 
-export const AvatarIcon = ({
-  size = Size.MD,
-  color = TextColor.primaryDefault,
-  backgroundColor = BackgroundColor.primaryMuted,
-  className,
-  iconProps,
-  iconName,
-  ...props
-}) => (
-  <AvatarBase
-    size={size}
-    display={DISPLAY.FLEX}
-    alignItems={AlignItems.center}
-    justifyContent={JustifyContent.center}
-    color={color}
-    backgroundColor={backgroundColor}
-    borderColor={BorderColor.transparent}
-    className={classnames('mm-avatar-icon', className)}
-    {...props}
-  >
-    <Icon
-      color={IconColor.inherit}
-      name={iconName}
+export const AvatarIcon = React.forwardRef(
+  (
+    {
+      size = Size.MD,
+      color = TextColor.primaryDefault,
+      backgroundColor = BackgroundColor.primaryMuted,
+      className,
+      iconProps,
+      iconName,
+      ...props
+    },
+    ref,
+  ) => (
+    <AvatarBase
+      ref={ref}
       size={size}
-      {...iconProps}
-    />
-  </AvatarBase>
+      display={DISPLAY.FLEX}
+      alignItems={AlignItems.center}
+      justifyContent={JustifyContent.center}
+      color={color}
+      backgroundColor={backgroundColor}
+      borderColor={BorderColor.transparent}
+      className={classnames('mm-avatar-icon', className)}
+      {...props}
+    >
+      <Icon
+        color={IconColor.inherit}
+        name={iconName}
+        size={size}
+        {...iconProps}
+      />
+    </AvatarBase>
+  ),
 );
 
 AvatarIcon.propTypes = {
@@ -87,3 +93,5 @@ AvatarIcon.propTypes = {
    */
   ...Box.propTypes,
 };
+
+AvatarIcon.displayName = 'AvatarIcon';
diff --git a/ui/components/component-library/avatar-icon/avatar-icon.test.js b/ui/components/component-library/avatar-icon/avatar-icon.test.js
index 9b065d19b6ef..e334dd81bd5a 100644
--- a/ui/components/component-library/avatar-icon/avatar-icon.test.js
+++ b/ui/components/component-library/avatar-icon/avatar-icon.test.js
@@ -105,4 +105,10 @@ describe('AvatarIcon', () => {
       'box--background-color-success-muted',
     );
   });
+  it('should forward a ref to the root html element', () => {
+    const ref = React.createRef();
+    render(<AvatarIcon iconName={IconName.SwapHorizontal} ref={ref} />);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current.nodeName).toBe('DIV');
+  });
 });
diff --git a/ui/components/component-library/avatar-network/avatar-network.test.js b/ui/components/component-library/avatar-network/avatar-network.test.js
index 8817dc53ebf4..4693c4e59425 100644
--- a/ui/components/component-library/avatar-network/avatar-network.test.js
+++ b/ui/components/component-library/avatar-network/avatar-network.test.js
@@ -123,4 +123,10 @@ describe('AvatarNetwork', () => {
       `box--border-color-${BorderColor.errorDefault}`,
     );
   });
+  it('should forward a ref to the root html element', () => {
+    const ref = React.createRef();
+    render(<AvatarNetwork ref={ref} />);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current.nodeName).toBe('DIV');
+  });
 });
diff --git a/ui/components/component-library/avatar-token/avatar-token.js b/ui/components/component-library/avatar-token/avatar-token.js
index cd0f47ad42fc..9cc951011035 100644
--- a/ui/components/component-library/avatar-token/avatar-token.js
+++ b/ui/components/component-library/avatar-token/avatar-token.js
@@ -14,70 +14,76 @@ import {
 } from '../../../helpers/constants/design-system';
 import { AVATAR_TOKEN_SIZES } from './avatar-token.constants';
 
-export const AvatarToken = ({
-  size = Size.MD,
-  name,
-  src,
-  showHalo,
-  color = TextColor.textDefault,
-  backgroundColor = BackgroundColor.backgroundAlternative,
-  borderColor = BorderColor.transparent,
-  className,
-  ...props
-}) => {
-  const [showFallback, setShowFallback] = useState(false);
+export const AvatarToken = React.forwardRef(
+  (
+    {
+      size = Size.MD,
+      name,
+      src,
+      showHalo,
+      color = TextColor.textDefault,
+      backgroundColor = BackgroundColor.backgroundAlternative,
+      borderColor = BorderColor.transparent,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [showFallback, setShowFallback] = useState(false);
 
-  useEffect(() => {
-    setShowFallback(!src);
-  }, [src]);
+    useEffect(() => {
+      setShowFallback(!src);
+    }, [src]);
 
-  const handleOnError = () => {
-    setShowFallback(true);
-  };
+    const handleOnError = () => {
+      setShowFallback(true);
+    };
 
-  const fallbackString = name && name[0] ? name[0] : '?';
+    const fallbackString = name && name[0] ? name[0] : '?';
 
-  return (
-    <AvatarBase
-      size={size}
-      display={DISPLAY.FLEX}
-      alignItems={AlignItems.center}
-      justifyContent={JustifyContent.center}
-      className={classnames(
-        'mm-avatar-token',
-        showHalo && 'mm-avatar-token--with-halo',
-        className,
-      )}
-      {...{ backgroundColor, borderColor, color, ...props }}
-    >
-      {showFallback ? (
-        fallbackString
-      ) : (
-        <>
-          {showHalo && (
+    return (
+      <AvatarBase
+        ref={ref}
+        size={size}
+        display={DISPLAY.FLEX}
+        alignItems={AlignItems.center}
+        justifyContent={JustifyContent.center}
+        className={classnames(
+          'mm-avatar-token',
+          showHalo && 'mm-avatar-token--with-halo',
+          className,
+        )}
+        {...{ backgroundColor, borderColor, color, ...props }}
+      >
+        {showFallback ? (
+          fallbackString
+        ) : (
+          <>
+            {showHalo && (
+              <img
+                src={src}
+                className={
+                  showHalo ? 'mm-avatar-token__token-image--blurred' : ''
+                }
+                aria-hidden="true"
+              />
+            )}
             <img
-              src={src}
               className={
-                showHalo ? 'mm-avatar-token__token-image--blurred' : ''
+                showHalo
+                  ? 'mm-avatar-token__token-image--size-reduced'
+                  : 'mm-avatar-token__token-image'
               }
-              aria-hidden="true"
+              onError={handleOnError}
+              src={src}
+              alt={`${name} logo` || 'token logo'}
             />
-          )}
-          <img
-            className={
-              showHalo
-                ? 'mm-avatar-token__token-image--size-reduced'
-                : 'mm-avatar-token__token-image'
-            }
-            onError={handleOnError}
-            src={src}
-            alt={`${name} logo` || 'token logo'}
-          />
-        </>
-      )}
-    </AvatarBase>
-  );
-};
+          </>
+        )}
+      </AvatarBase>
+    );
+  },
+);
 
 AvatarToken.propTypes = {
   /**
@@ -123,3 +129,5 @@ AvatarToken.propTypes = {
    */
   ...Box.propTypes,
 };
+
+AvatarToken.displayName = 'AvatarToken';
diff --git a/ui/components/component-library/avatar-token/avatar-token.test.js b/ui/components/component-library/avatar-token/avatar-token.test.js
index 3a711782d08a..9fef751caefa 100644
--- a/ui/components/component-library/avatar-token/avatar-token.test.js
+++ b/ui/components/component-library/avatar-token/avatar-token.test.js
@@ -121,4 +121,10 @@ describe('AvatarToken', () => {
       `box--border-color-${BorderColor.errorDefault}`,
     );
   });
+  it('should forward a ref to the root html element', () => {
+    const ref = React.createRef();
+    render(<AvatarToken ref={ref} />);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current.nodeName).toBe('DIV');
+  });
 });