MetaMask · cursor · Mar 25, 2026 · Mar 25, 2026
@@ -1,4 +1,6 @@
-import { AvatarIconSize, AvatarIconSeverity } from '../../types';
+import { AvatarIconSeverity } from '@metamask/design-system-shared';
+
+import { AvatarIconSize } from '../../types';
 import { IconSize, IconColor } from '../Icon';
 
 // Mappings

@@ -1,7 +1,8 @@
+import { AvatarIconSeverity } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import { View } from 'react-native';
 
-import { AvatarIconSize, AvatarIconSeverity } from '../../types';
+import { AvatarIconSize } from '../../types';
 import { IconName } from '../Icon';
 
 import { AvatarIcon } from './AvatarIcon';

@@ -1,9 +1,10 @@
+import { AvatarIconSeverity } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { renderHook } from '@testing-library/react-hooks';
 import { render } from '@testing-library/react-native';
 import React from 'react';
 
-import { AvatarIconSeverity, AvatarIconSize } from '../../types';
+import { AvatarIconSize } from '../../types';
 import { IconName } from '../Icon';
 
 import { AvatarIcon } from './AvatarIcon';

@@ -1,11 +1,8 @@
+import { AvatarIconSeverity } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import React from 'react';
 
-import {
-  AvatarIconSize,
-  AvatarBaseShape,
-  AvatarIconSeverity,
-} from '../../types';
+import { AvatarIconSize, AvatarBaseShape } from '../../types';
 import { AvatarBase } from '../AvatarBase';
 import { Icon } from '../Icon';
 

@@ -1,17 +1,12 @@
-import type { AvatarIconSeverity } from '../../types';
+import type { AvatarIconPropsShared } from '@metamask/design-system-shared';
+
 import type { AvatarBaseProps } from '../AvatarBase';
 import type { IconName, IconProps } from '../Icon';
 
 /**
  * AvatarIcon component props.
  */
-export type AvatarIconProps = {
-  /**
-   * Optional prop to control the severity of the avatar
-   *
-   * @default AvatarIconSeverity.Neutral
-   */
-  severity?: AvatarIconSeverity;
+export type AvatarIconProps = AvatarIconPropsShared & {
   /**
    * Optional prop to specify an icon to show
    */

@@ -1,3 +1,4 @@
-export { AvatarIconSize, AvatarIconSeverity } from '../../types';
+export { AvatarIconSeverity } from '@metamask/design-system-shared';
+export { AvatarIconSize } from '../../types';
 export { AvatarIcon } from './AvatarIcon';
 export type { AvatarIconProps } from './AvatarIcon.types';
@@ -1,9 +1,9 @@
 // Third party dependencies.
+import type { AvatarIconSeverity } from '@metamask/design-system-shared';
 import type { ReactElement } from 'react';
 import type { ViewProps } from 'react-native';
 
 // External Dependencies.
-import type { AvatarIconSeverity } from '../../types';
 import type { AvatarAccountVariant } from '../AvatarAccount';
 import type { ButtonProps } from '../Button';
 import type { ButtonIconProps } from '../ButtonIcon';

@@ -65,18 +65,6 @@ export enum AvatarGroupVariant {
   Token = 'token',
 }
 
-/**
- * AvatarIcon - severity
- */
-export enum AvatarIconSeverity {
-  Neutral = 'neutral',
-  Info = 'info',
-  Success = 'success',
-  // eslint-disable-next-line @typescript-eslint/no-shadow
-  Error = 'error',
-  Warning = 'warning',
-}
-
 /**
  * BadgeWrapper - positionAnchorShape
  */

@@ -1,4 +1,6 @@
-import { AvatarIconSize, AvatarIconSeverity } from '../../types';
+import { AvatarIconSeverity } from '@metamask/design-system-shared';
+
+import { AvatarIconSize } from '../../types';
 import { IconSize, IconColor } from '../Icon';
 
 export const MAP_AVATARICON_SIZE_ICONSIZE: Record<AvatarIconSize, IconSize> = {

@@ -1,7 +1,8 @@
+import { AvatarIconSeverity } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { AvatarIconSize, AvatarIconSeverity } from '../../types';
+import { AvatarIconSize } from '../../types';
 import { IconName } from '../Icon';
 
 import { AvatarIcon } from './AvatarIcon';

@@ -1,7 +1,8 @@
+import { AvatarIconSeverity } from '@metamask/design-system-shared';
 import { render, screen } from '@testing-library/react';
 import React, { createRef } from 'react';
 
-import { AvatarIconSize, AvatarIconSeverity } from '../../types';
+import { AvatarIconSize } from '../../types';
 import { IconName } from '../Icon';
 import { TWCLASSMAP_ICON_SIZE_DIMENSION } from '../Icon/Icon.constants';
 

@@ -1,6 +1,7 @@
+import { AvatarIconSeverity } from '@metamask/design-system-shared';
 import React, { forwardRef } from 'react';
 
-import { AvatarIconSize, AvatarIconSeverity } from '../../types';
+import { AvatarIconSize } from '../../types';
 import { twMerge } from '../../utils/tw-merge';
 import { AvatarBase, AvatarBaseShape } from '../AvatarBase';
 import { Icon } from '../Icon';

@@ -1,26 +1,22 @@
-import type { AvatarIconSize, AvatarIconSeverity } from '../../types';
+import type { AvatarIconPropsShared } from '@metamask/design-system-shared';
+
 import type { AvatarBaseProps } from '../AvatarBase';
 import type { IconName, IconProps } from '../Icon';
 
-export type AvatarIconProps = Omit<AvatarBaseProps, 'children' | 'size'> & {
-  /**
-   * Required icon name from the icon set
-   */
-  iconName: IconName;
-  /**
-   * Optional props to be passed to the Icon component
-   */
-  iconProps?: Omit<IconProps, 'name'>;
-  /**
-   * Optional prop to control the size of the avatar
-   *
-   * @default AvatarIconSize.Md
-   */
-  size?: AvatarIconSize;
-  /**
-   * Optional prop to control the severity of the avatar
-   *
-   * @default AvatarIconSeverity.Neutral
-   */
-  severity?: AvatarIconSeverity;
-};
+export type AvatarIconProps = Omit<AvatarBaseProps, 'children' | 'size'> &
+  AvatarIconPropsShared & {
+    /**
+     * Required icon name from the icon set
+     */
+    iconName: IconName;
+    /**
+     * Optional props to be passed to the Icon component
+     */
+    iconProps?: Omit<IconProps, 'name'>;
+    /**
+     * Optional prop to control the size of the avatar
+     *
+     * @default AvatarIconSize.Md
+     */
+    size?: AvatarBaseProps['size'];
+  };
@@ -1,3 +1,4 @@
-export { AvatarIconSize, AvatarIconSeverity } from '../../types';
+export { AvatarIconSeverity } from '@metamask/design-system-shared';
+export { AvatarIconSize } from '../../types';
 export { AvatarIcon } from './AvatarIcon';
 export type { AvatarIconProps } from './AvatarIcon.types';
@@ -55,18 +55,6 @@ export enum AvatarAccountVariant {
   Maskicon = 'maskicon',
 }
 
-/**
- * AvatarIcon - severity
- */
-export enum AvatarIconSeverity {
-  Neutral = 'neutral',
-  Info = 'info',
-  Success = 'success',
-  // eslint-disable-next-line @typescript-eslint/no-shadow
-  Error = 'error',
-  Warning = 'warning',
-}
-
 /**
  * AvatarGroup - variant
  */

@@ -6,6 +6,12 @@ export {
   generateIconSeed,
 } from './utils/caip-address';
 
+// AvatarIcon types (ADR-0003 + ADR-0004)
+export {
+  AvatarIconSeverity,
+  type AvatarIconPropsShared,
+} from './types/AvatarIcon';
+
 // BadgeCount types (ADR-0003 + ADR-0004)
 export { BadgeCountSize, type BadgeCountPropsShared } from './types/BadgeCount';
 

@@ -0,0 +1,47 @@
+/**
+ * AvatarIcon - severity
+ * Convert from enum to const object (ADR-0003)
+ */
+export const AvatarIconSeverity = {
+  /**
+   * Represents a neutral severity
+   */
+  Neutral: 'neutral',
+  /**
+   * Represents an info severity
+   */
+  Info: 'info',
+  /**
+   * Represents a success severity
+   */
+  Success: 'success',
+  /**
+   * Represents an error severity
+   */
+  Error: 'error',
+  /**
+   * Represents a warning severity
+   */
+  Warning: 'warning',
+} as const;
+export type AvatarIconSeverity =
+  (typeof AvatarIconSeverity)[keyof typeof AvatarIconSeverity];
+
+/**
+ * AvatarIcon component shared props (ADR-0004)
+ * Platform-independent properties shared across React and React Native
+ */
+export type AvatarIconPropsShared = {
+  /**
+   * Optional prop to control the severity of the avatar
+   * Possible values:
+   * - AvatarIconSeverity.Neutral
+   * - AvatarIconSeverity.Info
+   * - AvatarIconSeverity.Success
+   * - AvatarIconSeverity.Error
+   * - AvatarIconSeverity.Warning
+   *
+   * @default AvatarIconSeverity.Neutral
+   */
+  severity?: AvatarIconSeverity;
+};
@@ -0,0 +1,4 @@
+export {
+  AvatarIconSeverity,
+  type AvatarIconPropsShared,
+} from './AvatarIcon.types';