diff --git a/ui/components/component-library/avatar-base/avatar-base.stories.js b/ui/components/component-library/avatar-base/avatar-base.stories.js
index e30109eae..49cc6b8d3 100644
--- a/ui/components/component-library/avatar-base/avatar-base.stories.js
+++ b/ui/components/component-library/avatar-base/avatar-base.stories.js
@@ -10,7 +10,7 @@ import {
 
 import Box from '../../ui/box/box';
 
-import { Icon, ICON_NAMES } from '../icon/deprecated';
+import { Icon, IconName } from '..';
 import README from './README.mdx';
 import { AvatarBase } from './avatar-base';
 import { AVATAR_BASE_SIZES } from './avatar-base.constants';
@@ -124,7 +124,7 @@ export const Children = (args) => (
       backgroundColor={BackgroundColor.infoMuted}
       borderColor={BorderColor.infoMuted}
     >
-      <Icon name={ICON_NAMES.USER} color={Color.infoDefault} />
+      <Icon name={IconName.User} color={Color.infoDefault} />
     </AvatarBase>
   </Box>
 );
diff --git a/ui/components/component-library/avatar-favicon/avatar-favicon.js b/ui/components/component-library/avatar-favicon/avatar-favicon.js
index d7833298f..ab8607fa0 100644
--- a/ui/components/component-library/avatar-favicon/avatar-favicon.js
+++ b/ui/components/component-library/avatar-favicon/avatar-favicon.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { AvatarBase } from '../avatar-base';
 import Box from '../../ui/box/box';
-import { ICON_NAMES, Icon } from '../icon/deprecated';
+import { IconName, Icon } from '../icon';
 import {
   BorderColor,
   Size,
@@ -43,7 +43,7 @@ export const AvatarFavicon = ({
         />
       ) : (
         <Icon
-          name={ICON_NAMES.GLOBAL}
+          name={IconName.Global}
           color={IconColor.iconDefault}
           size={size}
           {...fallbackIconProps}
@@ -65,7 +65,7 @@ AvatarFavicon.propTypes = {
   /**
    * Props for the fallback icon. All Icon props can be used
    */
-  fallbackIconProps: PropTypes.shape(Icon.PropTypes),
+  fallbackIconProps: PropTypes.object,
   /**
    * The size of the AvatarFavicon
    * Possible values could be 'Size.XS' 16px, 'Size.SM' 24px, 'Size.MD' 32px, 'Size.LG' 40px, 'Size.XL' 48px
diff --git a/ui/components/component-library/avatar-icon/README.mdx b/ui/components/component-library/avatar-icon/README.mdx
index 0e7b61e29..92e713184 100644
--- a/ui/components/component-library/avatar-icon/README.mdx
+++ b/ui/components/component-library/avatar-icon/README.mdx
@@ -44,7 +44,7 @@ Defaults to `Size.MD`
 
 ```jsx
 import { Size } from '../../../helpers/constants/design-system';
-import { AvatarIcon, ICON_NAMES } from '../ui/component-library';
+import { AvatarIcon, IconName } from '../ui/component-library';
 
     <AvatarIcon {...args} size={Size.XS} />
     <AvatarIcon {...args} size={Size.SM} />
@@ -55,22 +55,22 @@ import { AvatarIcon, ICON_NAMES } from '../ui/component-library';
 
 ### Icon Name<span style={{ color: 'red' }}>\*</span>
 
-Use the required `iconName` prop with `ICON_NAMES` object from `./ui/components/component-library` to select icon
+Use the required `iconName` prop with `IconName` enum from `./ui/components/component-library` to select icon
 
 Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use.
 
 <Canvas>
-  <Story id="components-componentlibrary-avataricon--icon-name" />
+  <Story id="components-componentlibrary-avataricon--icon-name-story" />
 </Canvas>
 
 ```jsx
-import { AvatarIcon, ICON_NAMES } from '../ui/component-library';
+import { AvatarIcon, IconName } from '../ui/component-library';
 
-<AvatarIcon iconName={ICON_NAMES.SWAP_HORIZONTAL} />
-<AvatarIcon iconName={ICON_NAMES.CONFIRMATION} />
-<AvatarIcon iconName={ICON_NAMES.INFO} />
-<AvatarIcon iconName={ICON_NAMES.WARNING} />
-<AvatarIcon iconName={ICON_NAMES.DANGER} />
+<AvatarIcon iconName={IconName.SwapHorizontal} />
+<AvatarIcon iconName={IconName.Confirmation} />
+<AvatarIcon iconName={IconName.Info} />
+<AvatarIcon iconName={IconName.Warning} />
+<AvatarIcon iconName={IconName.Danger} />
 ```
 
 ### Color and Background Color
diff --git a/ui/components/component-library/avatar-icon/avatar-icon.js b/ui/components/component-library/avatar-icon/avatar-icon.js
index 1c63eb48b..a8f36e063 100644
--- a/ui/components/component-library/avatar-icon/avatar-icon.js
+++ b/ui/components/component-library/avatar-icon/avatar-icon.js
@@ -14,7 +14,7 @@ import {
 
 import Box from '../../ui/box/box';
 
-import { Icon, ICON_NAMES } from '../icon/deprecated';
+import { IconName, Icon } from '../icon';
 import { AvatarBase } from '../avatar-base';
 
 import { AVATAR_ICON_SIZES } from './avatar-icon.constants';
@@ -27,39 +27,37 @@ export const AvatarIcon = ({
   iconProps,
   iconName,
   ...props
-}) => {
-  return (
-    <AvatarBase
+}) => (
+  <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}
       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}
-        size={size}
-        {...iconProps}
-      />
-    </AvatarBase>
-  );
-};
+      {...iconProps}
+    />
+  </AvatarBase>
+);
 
 AvatarIcon.propTypes = {
   /**
    *
-   * The name of the icon to display. Should be one of ICON_NAMES
+   * The name of the icon to display. Should be one of IconName
    */
-  iconName: PropTypes.oneOf(Object.values(ICON_NAMES)).isRequired,
+  iconName: PropTypes.oneOf(Object.values(IconName)).isRequired,
   /**
    * Props for the icon inside AvatarIcon. All Icon props can be used
    */
-  iconProps: PropTypes.shape(Icon.PropTypes),
+  iconProps: PropTypes.object,
   /**
    * The size of the AvatarIcon
    * Possible values could be 'SIZES.XS' 16px, 'SIZES.SM' 24px, 'SIZES.MD' 32px, 'SIZES.LG' 40px, 'SIZES.XL' 48px
diff --git a/ui/components/component-library/avatar-icon/avatar-icon.stories.js b/ui/components/component-library/avatar-icon/avatar-icon.stories.js
index d7fa0194f..a32e8f284 100644
--- a/ui/components/component-library/avatar-icon/avatar-icon.stories.js
+++ b/ui/components/component-library/avatar-icon/avatar-icon.stories.js
@@ -10,7 +10,7 @@ import {
 
 import Box from '../../ui/box/box';
 
-import { ICON_NAMES } from '../icon/deprecated';
+import { IconName } from '..';
 
 import README from './README.mdx';
 import { AvatarIcon, AVATAR_ICON_SIZES } from '.';
@@ -35,7 +35,6 @@ const marginSizeControlOptions = [
 
 export default {
   title: 'Components/ComponentLibrary/AvatarIcon',
-
   component: AvatarIcon,
   parameters: {
     docs: {
@@ -44,7 +43,7 @@ export default {
   },
   argTypes: {
     iconName: {
-      options: Object.values(ICON_NAMES),
+      options: Object.values(IconName),
       control: 'select',
     },
     size: {
@@ -89,7 +88,7 @@ export default {
 };
 
 const Template = (args) => {
-  return <AvatarIcon iconName={ICON_NAMES.SWAP_HORIZONTAL} {...args} />;
+  return <AvatarIcon iconName={IconName.SwapHorizontal} {...args} />;
 };
 
 export const DefaultStory = Template.bind({});
@@ -107,80 +106,82 @@ export const SizeStory = (args) => (
 SizeStory.storyName = 'Size';
 
 SizeStory.args = {
-  iconName: ICON_NAMES.CONFIRMATION,
+  iconName: IconName.Confirmation,
 };
 
-export const IconName = (args) => (
+export const IconNameStory = (args) => (
   <Box display={DISPLAY.FLEX} gap={1}>
     <AvatarIcon
       color={IconColor.primaryDefault}
       backgroundColor={BackgroundColor.primaryMuted}
-      iconName={ICON_NAMES.SWAP_HORIZONTAL}
+      iconName={IconName.SwapHorizontal}
       {...args}
     />
     <AvatarIcon
       color={IconColor.successDefault}
       backgroundColor={BackgroundColor.successMuted}
-      iconName={ICON_NAMES.CONFIRMATION}
+      iconName={IconName.Confirmation}
       {...args}
     />
     <AvatarIcon
       color={IconColor.infoDefault}
       backgroundColor={BackgroundColor.infoMuted}
-      iconName={ICON_NAMES.INFO}
+      iconName={IconName.Info}
       {...args}
     />
     <AvatarIcon
       color={IconColor.warningDefault}
       backgroundColor={BackgroundColor.warningMuted}
-      iconName={ICON_NAMES.WARNING}
+      iconName={IconName.Warning}
       {...args}
     />
     <AvatarIcon
       color={IconColor.errorDefault}
       backgroundColor={BackgroundColor.errorMuted}
-      iconName={ICON_NAMES.DANGER}
+      iconName={IconName.Danger}
       {...args}
     />
   </Box>
 );
 
+IconNameStory.storyName = 'Icon Name';
+
 export const ColorAndBackgroundColor = (args) => (
   <Box display={DISPLAY.FLEX} gap={1}>
     <AvatarIcon
       color={IconColor.primaryDefault}
       backgroundColor={BackgroundColor.primaryMuted}
-      iconName={ICON_NAMES.SWAP_HORIZONTAL}
+      iconName={IconName.SwapHorizontal}
       {...args}
     />
     <AvatarIcon
       color={IconColor.primaryInverse}
       backgroundColor={BackgroundColor.primaryDefault}
-      iconName={ICON_NAMES.SWAP_HORIZONTAL}
+      iconName={IconName.SwapHorizontal}
       {...args}
     />
     <AvatarIcon
       color={IconColor.successDefault}
       backgroundColor={BackgroundColor.successMuted}
-      iconName={ICON_NAMES.CONFIRMATION}
+      iconName={IconName.Confirmation}
       {...args}
     />
     <AvatarIcon
       color={IconColor.infoDefault}
       backgroundColor={BackgroundColor.infoMuted}
-      iconName={ICON_NAMES.INFO}
+      iconName={IconName.Info}
       {...args}
     />
     <AvatarIcon
       color={IconColor.warningDefault}
       backgroundColor={BackgroundColor.warningMuted}
-      iconName={ICON_NAMES.WARNING}
+      iconName={IconName.Warning}
       {...args}
     />
     <AvatarIcon
       color={IconColor.errorDefault}
       backgroundColor={BackgroundColor.errorMuted}
-      iconName={ICON_NAMES.DANGER}
+      iconName={IconName.Danger}
       {...args}
     />
   </Box>
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 8c81baa3f..9b065d19b 100644
--- a/ui/components/component-library/avatar-icon/avatar-icon.test.js
+++ b/ui/components/component-library/avatar-icon/avatar-icon.test.js
@@ -2,7 +2,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { ICON_NAMES } from '../icon/deprecated';
+import { IconName } from '..';
 import {
   BackgroundColor,
   IconColor,
@@ -13,7 +13,7 @@ describe('AvatarIcon', () => {
   it('should render correctly', () => {
     const { getByTestId, container } = render(
       <AvatarIcon
-        iconName={ICON_NAMES.SWAP_HORIZONTAL}
+        iconName={IconName.SwapHorizontal}
         data-testid="avatar-icon"
       />,
     );
@@ -25,27 +25,27 @@ describe('AvatarIcon', () => {
     const { getByTestId } = render(
       <>
         <AvatarIcon
-          iconName={ICON_NAMES.SWAP_HORIZONTAL}
+          iconName={IconName.SwapHorizontal}
           size={AVATAR_ICON_SIZES.XS}
           data-testid={AVATAR_ICON_SIZES.XS}
         />
         <AvatarIcon
-          iconName={ICON_NAMES.SWAP_HORIZONTAL}
+          iconName={IconName.SwapHorizontal}
           size={AVATAR_ICON_SIZES.SM}
           data-testid={AVATAR_ICON_SIZES.SM}
         />
         <AvatarIcon
-          iconName={ICON_NAMES.SWAP_HORIZONTAL}
+          iconName={IconName.SwapHorizontal}
           size={AVATAR_ICON_SIZES.MD}
           data-testid={AVATAR_ICON_SIZES.MD}
         />
         <AvatarIcon
-          iconName={ICON_NAMES.SWAP_HORIZONTAL}
+          iconName={IconName.SwapHorizontal}
           size={AVATAR_ICON_SIZES.LG}
           data-testid={AVATAR_ICON_SIZES.LG}
         />
         <AvatarIcon
-          iconName={ICON_NAMES.SWAP_HORIZONTAL}
+          iconName={IconName.SwapHorizontal}
           size={AVATAR_ICON_SIZES.XL}
           data-testid={AVATAR_ICON_SIZES.XL}
         />
@@ -71,7 +71,7 @@ describe('AvatarIcon', () => {
   it('should render with added classname', () => {
     const { getByTestId } = render(
       <AvatarIcon
-        iconName={ICON_NAMES.SWAP_HORIZONTAL}
+        iconName={IconName.SwapHorizontal}
         className="mm-avatar-icon--test"
         data-testid="classname"
       />,
@@ -82,7 +82,7 @@ describe('AvatarIcon', () => {
   it('should render with icon', () => {
     const { getByTestId } = render(
       <AvatarIcon
-        iconName={ICON_NAMES.SWAP_HORIZONTAL}
+        iconName={IconName.SwapHorizontal}
         iconProps={{ 'data-testid': 'avatar-icon' }}
       />,
     );
@@ -93,7 +93,7 @@ describe('AvatarIcon', () => {
   it('should render with success color icon and background color', () => {
     const { getByTestId } = render(
       <AvatarIcon
-        iconName={ICON_NAMES.SWAP_HORIZONTAL}
+        iconName={IconName.SwapHorizontal}
         color={IconColor.successDefault}
         backgroundColor={BackgroundColor.successMuted}
         data-testid="success"
diff --git a/ui/components/component-library/banner-alert/README.mdx b/ui/components/component-library/banner-alert/README.mdx
index 11da3e360..b0c248c27 100644
--- a/ui/components/component-library/banner-alert/README.mdx
+++ b/ui/components/component-library/banner-alert/README.mdx
@@ -118,13 +118,13 @@ Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pas
 </Canvas>
 
 ```jsx
-import { BannerAlert, ICON_NAMES } from '../../component-library';
+import { BannerAlert, IconName } from '../../component-library';
 
 <BannerAlert
   title="Action prop demo"
   actionButtonLabel="Action"
   actionButtonProps={{
-    endIconName: ICON_NAMES.ARROW_2_RIGHT,
+    endIconName: IconName.Arrow2Right,
   }}
   actionButtonOnClick={() => console.log('ButtonLink actionButtonOnClick demo')}
 >
diff --git a/ui/components/component-library/banner-alert/banner-alert.js b/ui/components/component-library/banner-alert/banner-alert.js
index 31a248c59..60e114f8f 100644
--- a/ui/components/component-library/banner-alert/banner-alert.js
+++ b/ui/components/component-library/banner-alert/banner-alert.js
@@ -2,14 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { Icon, ICON_NAMES } from '../icon/deprecated';
-import { BannerBase } from '..';
+import { BannerBase, Icon, IconName, IconSize } from '..';
 
 import {
   BackgroundColor,
   IconColor,
   SEVERITIES,
-  Size,
 } from '../../../helpers/constants/design-system';
 import { BANNER_ALERT_SEVERITIES } from './banner-alert.constants';
 
@@ -23,23 +21,23 @@ export const BannerAlert = ({
     switch (severity) {
       case SEVERITIES.DANGER:
         return {
-          name: ICON_NAMES.DANGER,
+          name: IconName.Danger,
           color: IconColor.errorDefault,
         };
       case SEVERITIES.WARNING:
         return {
-          name: ICON_NAMES.WARNING,
+          name: IconName.Warning,
           color: IconColor.warningDefault,
         };
       case SEVERITIES.SUCCESS:
         return {
-          name: ICON_NAMES.CONFIRMATION,
+          name: IconName.Confirmation,
           color: IconColor.successDefault,
         };
       // Defaults to SEVERITIES.INFO
       default:
         return {
-          name: ICON_NAMES.INFO,
+          name: IconName.Info,
           color: IconColor.primaryDefault,
         };
     }
@@ -61,7 +59,7 @@ export const BannerAlert = ({
 
   return (
     <BannerBase
-      startAccessory={<Icon size={Size.LG} {...severityIcon()} />}
+      startAccessory={<Icon size={IconSize.Lg} {...severityIcon()} />}
       backgroundColor={severityBackground()}
       paddingLeft={2}
       className={classnames(
diff --git a/ui/components/component-library/banner-alert/banner-alert.stories.js b/ui/components/component-library/banner-alert/banner-alert.stories.js
index 757a2792a..beda29eb6 100644
--- a/ui/components/component-library/banner-alert/banner-alert.stories.js
+++ b/ui/components/component-library/banner-alert/banner-alert.stories.js
@@ -7,8 +7,7 @@ import {
   Size,
 } from '../../../helpers/constants/design-system';
 import Box from '../../ui/box/box';
-import { ButtonLink, ButtonPrimary } from '..';
-import { ICON_NAMES } from '../icon/deprecated';
+import { ButtonLink, ButtonPrimary, IconName } from '..';
 import README from './README.mdx';
 import { BannerAlert, BANNER_ALERT_SEVERITIES } from '.';
 
@@ -165,7 +164,7 @@ ActionButton.args = {
   actionButtonLabel: 'Action',
   actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'),
   actionButtonProps: {
-    endIconName: ICON_NAMES.ARROW_2_RIGHT,
+    endIconName: IconName.Arrow2Right,
   },
   children:
     'Use actionButtonLabel for action text, actionButtonOnClick for the onClick handler, and actionButtonProps to pass any ButtonLink prop types such as iconName',
diff --git a/ui/components/component-library/banner-base/README.mdx b/ui/components/component-library/banner-base/README.mdx
index 3fce695a7..a6711ee97 100644
--- a/ui/components/component-library/banner-base/README.mdx
+++ b/ui/components/component-library/banner-base/README.mdx
@@ -81,13 +81,13 @@ Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pas
 </Canvas>
 
 ```jsx
-import { BannerBase, ICON_NAMES } from '../../component-library';
+import { BannerBase, IconName } from '../../component-library';
 
 <BannerBase
   title="Action prop demo"
   actionButtonLabel="Action"
   actionButtonProps={{
-    endIconName: ICON_NAMES.ARROW_2_RIGHT,
+    endIconName: IconName.Arrow2Right,
   }}
   actionButtonOnClick={() => console.log('ButtonLink actionButtonOnClick demo')}
 >
@@ -129,11 +129,11 @@ Use the `startAccessory` prop to add components such as icons or fox image to th
 ```jsx
 import { Size } from '../../../helpers/constants/design-system';
 import { BannerBase } from '../../component-library';
-import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
+import { Icon, IconName } from '../../component-library';
 
 <BannerBase
   title="Start accessory demo"
-  startAccessory={<Icon name={ICON_NAMES.INFO} size={Size.LG} />}
+  startAccessory={<Icon name={IconName.Info} size={IconSize.Lg} />}
 >
   The info icon on the left is passed through the startAccessory prop
 </BannerBase>;
diff --git a/ui/components/component-library/banner-base/banner-base.js b/ui/components/component-library/banner-base/banner-base.js
index 62a5e2445..5f9dcc28e 100644
--- a/ui/components/component-library/banner-base/banner-base.js
+++ b/ui/components/component-library/banner-base/banner-base.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { ButtonIcon, ButtonLink, Text } from '..';
-import { ICON_NAMES } from '../icon/deprecated';
+import { IconName } from '../icon';
 
 import Box from '../../ui/box';
 
@@ -72,7 +72,7 @@ export const BannerBase = ({
         <ButtonIcon
           className="mm-banner-base__close-button"
           marginLeft="auto"
-          iconName={ICON_NAMES.CLOSE}
+          iconName={IconName.Close}
           size={Size.SM}
           ariaLabel="Close" // TODO: i18n
           onClick={onClose}
diff --git a/ui/components/component-library/banner-base/banner-base.stories.js b/ui/components/component-library/banner-base/banner-base.stories.js
index 539079bef..a964c80e8 100644
--- a/ui/components/component-library/banner-base/banner-base.stories.js
+++ b/ui/components/component-library/banner-base/banner-base.stories.js
@@ -1,8 +1,7 @@
 import React from 'react';
 import { useState } from '@storybook/addons';
 import { Size } from '../../../helpers/constants/design-system';
-import { ButtonLink, ButtonPrimary } from '..';
-import { Icon, ICON_NAMES } from '../icon/deprecated';
+import { ButtonLink, ButtonPrimary, Icon, IconName, IconSize } from '..';
 import { BannerBase } from './banner-base';
 import README from './README.mdx';
 
@@ -96,7 +95,7 @@ DefaultStory.args = {
   title: 'Title is sentence case no period',
   children: "Description shouldn't repeat title. 1-3 lines.",
   actionButtonLabel: 'Action',
-  startAccessory: <Icon name={ICON_NAMES.INFO} size={Size.LG} />,
+  startAccessory: <Icon name={IconName.Info} size={IconSize.Lg} />,
 };
 
 DefaultStory.storyName = 'Default';
@@ -144,7 +143,7 @@ ActionButton.args = {
   actionButtonLabel: 'Action',
   actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'),
   actionButtonProps: {
-    endIconName: ICON_NAMES.ARROW_2_RIGHT,
+    endIconName: IconName.Arrow2Right,
   },
   children:
     'Use actionButtonLabel for action text, actionButtonOnClick for the onClick handler, and actionButtonProps to pass any ButtonLink prop types such as iconName',
@@ -182,5 +181,5 @@ StartAccessory.args = {
   title: 'Start accessory demo',
   children:
     'The info icon on the left is passed through the startAccessory prop',
-  startAccessory: <Icon name={ICON_NAMES.INFO} size={Size.LG} />,
+  startAccessory: <Icon name={IconName.Info} size={IconSize.Lg} />,
 };
diff --git a/ui/components/component-library/banner-base/banner-base.test.js b/ui/components/component-library/banner-base/banner-base.test.js
index 7ea2705cb..17f4643b3 100644
--- a/ui/components/component-library/banner-base/banner-base.test.js
+++ b/ui/components/component-library/banner-base/banner-base.test.js
@@ -4,7 +4,7 @@ import React from 'react';
 
 import { renderWithUserEvent } from '../../../../test/lib/render-helpers';
 
-import { Icon, ICON_NAMES } from '../icon/deprecated';
+import { Icon, IconName } from '..';
 import { BannerBase } from './banner-base';
 
 describe('BannerBase', () => {
@@ -58,7 +58,7 @@ describe('BannerBase', () => {
         title="Action prop demo"
         actionButtonLabel="Action"
         actionButtonProps={{
-          endIconName: ICON_NAMES.ARROW_2_RIGHT,
+          endIconName: IconName.Arrow2Right,
           'data-testid': 'action',
           className: 'mm-banner-base__action',
         }}
@@ -78,7 +78,7 @@ describe('BannerBase', () => {
     const { getByTestId } = render(
       <BannerBase
         startAccessory={
-          <Icon data-testid="start-accessory" name={ICON_NAMES.ADD_SQUARE} />
+          <Icon data-testid="start-accessory" name={IconName.AddSquare} />
         }
       />,
     );
diff --git a/ui/components/component-library/banner-tip/README.mdx b/ui/components/component-library/banner-tip/README.mdx
index e92bc9519..051cd6f4d 100644
--- a/ui/components/component-library/banner-tip/README.mdx
+++ b/ui/components/component-library/banner-tip/README.mdx
@@ -107,13 +107,13 @@ Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pas
 </Canvas>
 
 ```jsx
-import { BannerTip, ICON_NAMES } from '../../component-library';
+import { BannerTip, IconName } from '../../component-library';
 
 <BannerTip
   title="Action prop demo"
   actionButtonLabel="Action"
   actionButtonProps={{
-    icon: ICON_NAMES.ARROW_2_RIGHT, // TODO: change to iconName
+    icon: IconName.Arrow2Right, // TODO: change to iconName
     iconPositionRight: true,
   }}
   actionButtonOnClick={() => console.log('ButtonLink actionButtonOnClick demo')}
@@ -157,7 +157,7 @@ Use the `startAccessory` prop to pass a ReactNode to the start of the `BannerTip
 import { BannerTip } from '../../component-library';
 
 <BannerTip
-  startAccessory={<Icon name={ICON_NAMES.MESSAGES} />}
+  startAccessory={<Icon name={IconName.Messages} />}
   title="StartAccessory"
 >
   This is a demo of startAccessory override.
diff --git a/ui/components/component-library/banner-tip/banner-tip.stories.js b/ui/components/component-library/banner-tip/banner-tip.stories.js
index 30180e0cc..117a9e1b0 100644
--- a/ui/components/component-library/banner-tip/banner-tip.stories.js
+++ b/ui/components/component-library/banner-tip/banner-tip.stories.js
@@ -5,8 +5,7 @@ import {
   Size,
 } from '../../../helpers/constants/design-system';
 import Box from '../../ui/box/box';
-import { Icon, ICON_NAMES } from '../icon/deprecated';
-import { ButtonLink, ButtonPrimary } from '..';
+import { ButtonLink, ButtonPrimary, Icon, IconName } from '..';
 import README from './README.mdx';
 import { BannerTip, BannerTipLogoType } from '.';
 
@@ -141,7 +140,7 @@ ActionButton.args = {
   actionButtonLabel: 'Action',
   actionButtonOnClick: () => console.log('ButtonLink actionButtonOnClick demo'),
   actionButtonProps: {
-    iconName: ICON_NAMES.ARROW_2_RIGHT,
+    iconName: IconName.Arrow2Right,
     iconPositionRight: true,
   },
   children:
@@ -176,7 +175,7 @@ export const StartAccessory = (args) => {
   return (
     <BannerTip
       {...args}
-      startAccessory={<Icon name={ICON_NAMES.MESSAGES} />}
+      startAccessory={<Icon name={IconName.Messages} />}
       title="StartAccessory"
       onClose={() => console.log('close button clicked')}
     >
diff --git a/ui/components/component-library/button-base/README.mdx b/ui/components/component-library/button-base/README.mdx
index 00098b473..2aeca22fc 100644
--- a/ui/components/component-library/button-base/README.mdx
+++ b/ui/components/component-library/button-base/README.mdx
@@ -144,7 +144,7 @@ import { ButtonBase } from '../../component-library';
 
 ### Icon Name
 
-Use the `startIconName` and/or `endIconName` prop with the `ICON_NAMES` object from `./ui/components/component-library` to select icon.
+Use the `startIconName` and/or `endIconName` prop with the `IconName` enum from `./ui/components/component-library` to select icon.
 
 <Canvas>
   <Story id="components-componentlibrary-buttonbase--start-icon-name" />
@@ -152,9 +152,9 @@ Use the `startIconName` and/or `endIconName` prop with the `ICON_NAMES` object f
 
 ```jsx
 import { ButtonBase } from '../../component-library';
-import { ICON_NAMES } from '../icon';
+import { IconName } from '../icon';
 
-<ButtonBase startIconName={ICON_NAMES.ADD_SQUARE}>Button</ButtonBase>;
+<ButtonBase startIconName={IconName.AddSquare}>Button</ButtonBase>;
 ```
 
 <Canvas>
@@ -163,9 +163,9 @@ import { ICON_NAMES } from '../icon';
 
 ```jsx
 import { ButtonBase } from '../../component-library';
-import { ICON_NAMES } from '../icon';
+import { IconName } from '../icon';
 
-<ButtonBase endIconName={ICON_NAMES.ARROW_2_RIGHT}>Button</ButtonBase>;
+<ButtonBase endIconName={IconName.Arrow2Right}>Button</ButtonBase>;
 ```
 
 ### RTL
@@ -177,18 +177,18 @@ For RTL language support use the `textDirection` prop.
 </Canvas>
 
 ```jsx
-import { ButtonBase, ICON_NAMES, TextDirection } from '../../component-library';
+import { ButtonBase, IconName, TextDirection } from '../../component-library';
 
 <>
   <ButtonBase
-    startIconName={ICON_NAMES.ADD_SQUARE}
-    endIconName={ICON_NAMES.ARROW_2_RIGHT}
+    startIconName={IconName.AddSquare}
+    endIconName={IconName.Arrow2Right}
   >
     Button Demo
   </ButtonBase>
   <ButtonBase
-    startIconName={ICON_NAMES.ADD_SQUARE}
-    endIconName={ICON_NAMES.ARROW_2_RIGHT}
+    startIconName={IconName.AddSquare}
+    endIconName={IconName.Arrow2Right}
     textDirection={TextDirection.RightToLeft}
   >
     Button Demo
diff --git a/ui/components/component-library/button-base/button-base.js b/ui/components/component-library/button-base/button-base.js
index a9b60a265..21a9e681d 100644
--- a/ui/components/component-library/button-base/button-base.js
+++ b/ui/components/component-library/button-base/button-base.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 import Box from '../../ui/box';
-import { Icon, ICON_NAMES } from '../icon/deprecated';
+import { IconName, Icon, IconSize } from '../icon';
 import { Text } from '../text';
 
 import {
@@ -12,7 +12,6 @@ import {
   JustifyContent,
   TextColor,
   TextVariant,
-  Size,
   BorderRadius,
   BackgroundColor,
   IconColor,
@@ -75,7 +74,7 @@ export const ButtonBase = ({
       {startIconName && (
         <Icon
           name={startIconName}
-          size={Size.SM}
+          size={IconSize.Sm}
           marginInlineEnd={1}
           {...startIconProps}
           color={loading ? IconColor.transparent : startIconProps?.color}
@@ -102,7 +101,7 @@ export const ButtonBase = ({
       {endIconName && (
         <Icon
           name={endIconName}
-          size={Size.SM}
+          size={IconSize.Sm}
           marginInlineStart={1}
           {...endIconProps}
           color={loading ? IconColor.transparent : endIconProps?.color}
@@ -111,9 +110,9 @@ export const ButtonBase = ({
       {loading && (
         <Icon
           className="mm-button-base__icon-loading"
-          name={ICON_NAMES.LOADING}
+          name={IconName.Loading}
           color={color}
-          size={Size.MD}
+          size={IconSize.Md}
           {...iconLoadingProps}
         />
       )}
@@ -160,26 +159,26 @@ ButtonBase.propTypes = {
   externalLink: PropTypes.bool,
   /**
    * Add icon to start (left side) of button text passing icon name
-   * The name of the icon to display. Should be one of ICON_NAMES
+   * The name of the icon to display. Should be one of IconName
    */
-  startIconName: PropTypes.oneOf(Object.values(ICON_NAMES)),
+  startIconName: PropTypes.oneOf(Object.values(IconName)),
   /**
    * iconProps accepts all the props from Icon
    */
-  startIconProps: PropTypes.shape(Icon.PropTypes),
+  startIconProps: PropTypes.object,
   /**
    * Add icon to end (right side) of button text passing icon name
-   * The name of the icon to display. Should be one of ICON_NAMES
+   * The name of the icon to display. Should be one of IconName
    */
-  endIconName: PropTypes.oneOf(Object.values(ICON_NAMES)),
+  endIconName: PropTypes.oneOf(Object.values(IconName)),
   /**
    * iconProps accepts all the props from Icon
    */
-  endIconProps: PropTypes.shape(Icon.PropTypes),
+  endIconProps: PropTypes.object,
   /**
    * iconLoadingProps accepts all the props from Icon
    */
-  iconLoadingProps: PropTypes.shape(Icon.PropTypes),
+  iconLoadingProps: PropTypes.object,
   /**
    * Boolean to show loading spinner in button
    */
diff --git a/ui/components/component-library/button-base/button-base.stories.js b/ui/components/component-library/button-base/button-base.stories.js
index 302aed58e..6be335435 100644
--- a/ui/components/component-library/button-base/button-base.stories.js
+++ b/ui/components/component-library/button-base/button-base.stories.js
@@ -7,8 +7,8 @@ import {
   Size,
 } from '../../../helpers/constants/design-system';
 import Box from '../../ui/box/box';
-import { TextDirection } from '..';
-import { ICON_NAMES } from '../icon/deprecated';
+import { TextDirection, IconName } from '..';
+
 import { BUTTON_BASE_SIZES } from './button-base.constants';
 import { ButtonBase } from './button-base';
 import README from './README.mdx';
@@ -59,11 +59,11 @@ export default {
     },
     startIconName: {
       control: 'select',
-      options: Object.values(ICON_NAMES),
+      options: Object.values(IconName),
     },
     endIconName: {
       control: 'select',
-      options: Object.values(ICON_NAMES),
+      options: Object.values(IconName),
     },
     loading: {
       control: 'boolean',
@@ -177,13 +177,13 @@ Loading.args = {
 };
 
 export const StartIconName = (args) => (
-  <ButtonBase {...args} startIconName={ICON_NAMES.ADD_SQUARE}>
+  <ButtonBase {...args} startIconName={IconName.AddSquare}>
     Button
   </ButtonBase>
 );
 
 export const EndIconName = (args) => (
-  <ButtonBase {...args} endIconName={ICON_NAMES.ARROW_2_RIGHT}>
+  <ButtonBase {...args} endIconName={IconName.Arrow2Right}>
     Button
   </ButtonBase>
 );
@@ -192,15 +192,15 @@ export const Rtl = (args) => (
   <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={2}>
     <ButtonBase
       {...args}
-      startIconName={ICON_NAMES.ADD_SQUARE}
-      endIconName={ICON_NAMES.ARROW_2_RIGHT}
+      startIconName={IconName.AddSquare}
+      endIconName={IconName.Arrow2Right}
     >
       Button Demo
     </ButtonBase>
     <ButtonBase
       {...args}
-      startIconName={ICON_NAMES.ADD_SQUARE}
-      endIconName={ICON_NAMES.ARROW_2_RIGHT}
+      startIconName={IconName.AddSquare}
+      endIconName={IconName.Arrow2Right}
       textDirection={TextDirection.RightToLeft}
     >
       Button Demo
diff --git a/ui/components/component-library/button-base/button-base.test.js b/ui/components/component-library/button-base/button-base.test.js
index 6008ed167..6e3a3bf43 100644
--- a/ui/components/component-library/button-base/button-base.test.js
+++ b/ui/components/component-library/button-base/button-base.test.js
@@ -1,7 +1,7 @@
 /* eslint-disable jest/require-top-level-describe */
 import { render } from '@testing-library/react';
 import React from 'react';
-import { ICON_NAMES } from '../icon/deprecated';
+import { IconName } from '..';
 import { BUTTON_BASE_SIZES } from './button-base.constants';
 import { ButtonBase } from './button-base';
 
@@ -125,9 +125,9 @@ describe('ButtonBase', () => {
     const { getByTestId } = render(
       <ButtonBase
         data-testid="icon"
-        startIconName={ICON_NAMES.ADD_SQUARE}
+        startIconName={IconName.AddSquare}
         startIconProps={{ 'data-testid': 'start-button-icon' }}
-        endIconName={ICON_NAMES.ADD_SQUARE}
+        endIconName={IconName.AddSquare}
         endIconProps={{ 'data-testid': 'end-button-icon' }}
       />,
     );
diff --git a/ui/components/component-library/button-icon/README.mdx b/ui/components/component-library/button-icon/README.mdx
index c41f088ae..33a712d7c 100644
--- a/ui/components/component-library/button-icon/README.mdx
+++ b/ui/components/component-library/button-icon/README.mdx
@@ -17,19 +17,19 @@ The `ButtonIcon` accepts all props below as well as all [Box](/docs/components-u
 
 ### Icon Name<span style={{ color: 'red' }}>\*</span>
 
-Use the required `iconName` prop with `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon.
+Use the required `iconName` prop with `IconName` enum from `./ui/components/component-library` to select icon.
 
 Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use.
 
 <Canvas>
-  <Story id="components-componentlibrary-buttonicon--icon-name" />
+  <Story id="components-componentlibrary-buttonicon--icon-name-story" />
 </Canvas>
 
 ```jsx
 import { ButtonIcon } from '../ui/component-library';
-import { ICON_NAMES } from '../icon';
+import { IconName } from '../icon';
 
-<ButtonIcon iconName={ICON_NAMES.CLOSE} ariaLabel="Close" />;
+<ButtonIcon iconName={IconName.Close} ariaLabel="Close" />;
 ```
 
 ### Size
@@ -52,8 +52,8 @@ Possible sizes include:
 import { Size } from '../../../helpers/constants/design-system';
 import { ButtonIcon } from '../ui/component-library';
 
-<ButtonIcon size={Size.SM} iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/>
-<ButtonIcon size={Size.LG} iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/>
+<ButtonIcon size={Size.SM} iconName={IconName.Close} ariaLabel="Close"/>
+<ButtonIcon size={Size.LG} iconName={IconName.Close} ariaLabel="Close"/>
 ```
 
 ### Aria Label
@@ -65,12 +65,12 @@ Use the `ariaLabel` prop to set the name of the ButtonIcon for proper accessibil
 </Canvas>
 
 ```jsx
-import { ButtonIcon, ICON_NAMES } from '../ui/component-library';
+import { ButtonIcon, IconName } from '../ui/component-library';
 import { Color } from '../../../helpers/constants/design-system';
 
 
-<ButtonIcon as="button" iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/>
-<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={ICON_NAMES.EXPORT} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
+<ButtonIcon as="button" iconName={IconName.Close} ariaLabel="Close"/>
+<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={IconName.Export} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
 ```
 
 ### As
@@ -87,12 +87,12 @@ Button `as` options:
 </Canvas>
 
 ```jsx
-import { ButtonIcon, ICON_NAMES } from '../ui/component-library';
+import { ButtonIcon, IconName } from '../ui/component-library';
 import { Color } from '../../../helpers/constants/design-system';
 
 
-<ButtonIcon as="button" iconName={ICON_NAMES.CLOSE} ariaLabel="Close"/>
-<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={ICON_NAMES.EXPORT} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
+<ButtonIcon as="button" iconName={IconName.Close} ariaLabel="Close"/>
+<ButtonIcon as="a" href="https://metamask.io/" target="_blank" iconName={IconName.Export} color={Color.primaryDefault} ariaLabel="Visit MetaMask.io"/>
 ```
 
 ### Href
@@ -104,13 +104,13 @@ When an `href` prop is passed it will change the element to an anchor(`a`) tag.
 </Canvas>
 
 ```jsx
-import { ButtonIcon, ICON_NAMES } from '../ui/component-library';
+import { ButtonIcon, IconName } from '../ui/component-library';
 import { Color } from '../../../helpers/constants/design-system';
 
 <ButtonIcon
   href="https://metamask.io/"
   target="_blank"
-  iconName={ICON_NAMES.EXPORT}
+  iconName={IconName.Export}
   color={Color.primaryDefault}
   ariaLabel="Visit MetaMask.io"
 />;
@@ -125,11 +125,11 @@ Use the `color` prop and the `Color` object to change the color of the `ButtonIc
 </Canvas>
 
 ```jsx
-import { ButtonIcon, ICON_NAMES } from '../ui/component-library';
+import { ButtonIcon, IconName } from '../ui/component-library';
 import { Color } from '../../../helpers/constants/design-system';
 
 <ButtonIcon
-  iconName={ICON_NAMES.EXPORT}
+  iconName={IconName.Export}
   color={Color.primaryDefault}
   ariaLabel="Visit MetaMask.io"
 />;
@@ -146,5 +146,5 @@ Use the boolean `disabled` prop to disable button
 ```jsx
 import { ButtonIcon } from '../ui/component-library';
 
-<ButtonIcon iconName={ICON_NAMES.CLOSE} disabled ariaLabel="Close" />;
+<ButtonIcon iconName={IconName.Close} disabled ariaLabel="Close" />;
 ```
diff --git a/ui/components/component-library/button-icon/button-icon.js b/ui/components/component-library/button-icon/button-icon.js
index 043d59655..2428aedf6 100644
--- a/ui/components/component-library/button-icon/button-icon.js
+++ b/ui/components/component-library/button-icon/button-icon.js
@@ -13,7 +13,7 @@ import {
 } from '../../../helpers/constants/design-system';
 
 import Box from '../../ui/box';
-import { Icon, ICON_NAMES } from '../icon/deprecated';
+import { Icon, IconName } from '../icon';
 
 import { BUTTON_ICON_SIZES } from './button-icon.constants';
 
@@ -84,9 +84,9 @@ ButtonIcon.propTypes = {
    */
   href: PropTypes.string,
   /**
-   * The name of the icon to display. Should be one of ICON_NAMES
+   * The name of the icon to display. Should be one of IconName
    */
-  iconName: PropTypes.oneOf(Object.values(ICON_NAMES)).isRequired,
+  iconName: PropTypes.oneOf(Object.values(IconName)).isRequired,
   /**
    * iconProps accepts all the props from Icon
    */
diff --git a/ui/components/component-library/button-icon/button-icon.stories.js b/ui/components/component-library/button-icon/button-icon.stories.js
index 4c07aac7e..a86ad8312 100644
--- a/ui/components/component-library/button-icon/button-icon.stories.js
+++ b/ui/components/component-library/button-icon/button-icon.stories.js
@@ -7,7 +7,7 @@ import {
   Size,
 } from '../../../helpers/constants/design-system';
 import Box from '../../ui/box/box';
-import { ICON_NAMES } from '../icon/deprecated';
+import { IconName } from '..';
 import { BUTTON_ICON_SIZES } from './button-icon.constants';
 import { ButtonIcon } from './button-icon';
 import README from './README.mdx';
@@ -62,7 +62,7 @@ export default {
     },
     iconName: {
       control: 'select',
-      options: Object.values(ICON_NAMES),
+      options: Object.values(IconName),
     },
     size: {
       control: 'select',
@@ -94,19 +94,21 @@ export default {
 export const DefaultStory = (args) => <ButtonIcon {...args} />;
 
 DefaultStory.args = {
-  iconName: ICON_NAMES.CLOSE,
+  iconName: IconName.Close,
   ariaLabel: 'Close',
 };
 
 DefaultStory.storyName = 'Default';
 
-export const IconName = (args) => <ButtonIcon {...args} />;
+export const IconNameStory = (args) => <ButtonIcon {...args} />;
 
-IconName.args = {
-  iconName: ICON_NAMES.CLOSE,
+IconNameStory.args = {
+  iconName: IconName.Close,
   ariaLabel: 'Close',
 };
 
+IconNameStory.storyName = 'IconName';
+
 export const SizeStory = (args) => (
   <Box
     display={DISPLAY.FLEX}
@@ -117,14 +119,14 @@ export const SizeStory = (args) => (
     <ButtonIcon
       {...args}
       size={Size.SM}
-      iconName={ICON_NAMES.CLOSE}
+      iconName={IconName.Close}
       ariaLabel="Close"
     />
     <ButtonIcon
       {...args}
       size={Size.LG}
       color={Color.primaryDefault}
-      iconName={ICON_NAMES.CLOSE}
+      iconName={IconName.Close}
       ariaLabel="Close"
     />
   </Box>
@@ -136,7 +138,7 @@ export const AriaLabel = (args) => (
   <>
     <ButtonIcon
       as="button"
-      iconName={ICON_NAMES.CLOSE}
+      iconName={IconName.Close}
       ariaLabel="Close"
       {...args}
     />
@@ -145,7 +147,7 @@ export const AriaLabel = (args) => (
       href="https://metamask.io/"
       target="_blank"
       color={Color.primaryDefault}
-      iconName={ICON_NAMES.EXPORT}
+      iconName={IconName.Export}
       ariaLabel="Visit MetaMask.io"
       {...args}
     />
@@ -154,20 +156,20 @@ export const AriaLabel = (args) => (
 
 export const As = (args) => (
   <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW} gap={2}>
-    <ButtonIcon {...args} iconName={ICON_NAMES.CLOSE} ariaLabel="close" />
+    <ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
     <ButtonIcon
       as="a"
       href="#"
       {...args}
       color={Color.primaryDefault}
-      iconName={ICON_NAMES.EXPORT}
+      iconName={IconName.Export}
       ariaLabel="demo"
     />
   </Box>
 );
 
 export const Href = (args) => (
-  <ButtonIcon iconName={ICON_NAMES.EXPORT} {...args} target="_blank" />
+  <ButtonIcon iconName={IconName.Export} {...args} target="_blank" />
 );
 
 Href.args = {
@@ -177,7 +179,7 @@ Href.args = {
 };
 
 export const ColorStory = (args) => (
-  <ButtonIcon {...args} iconName={ICON_NAMES.CLOSE} ariaLabel="close" />
+  <ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
 );
 ColorStory.storyName = 'Color';
 
@@ -186,7 +188,7 @@ ColorStory.args = {
 };
 
 export const Disabled = (args) => (
-  <ButtonIcon {...args} iconName={ICON_NAMES.CLOSE} ariaLabel="close" />
+  <ButtonIcon {...args} iconName={IconName.Close} ariaLabel="close" />
 );
 
 Disabled.args = {
diff --git a/ui/components/component-library/button-icon/button-icon.test.js b/ui/components/component-library/button-icon/button-icon.test.js
index a9e4fd6d9..236c258a8 100644
--- a/ui/components/component-library/button-icon/button-icon.test.js
+++ b/ui/components/component-library/button-icon/button-icon.test.js
@@ -2,7 +2,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 import { IconColor } from '../../../helpers/constants/design-system';
-import { ICON_NAMES } from '../icon/deprecated';
+import { IconName } from '..';
 import { BUTTON_ICON_SIZES } from './button-icon.constants';
 import { ButtonIcon } from './button-icon';
 
@@ -11,7 +11,7 @@ describe('ButtonIcon', () => {
     const { getByTestId, container } = render(
       <ButtonIcon
         data-testid="button-icon"
-        iconName={ICON_NAMES.ADD_SQUARE}
+        iconName={IconName.AddSquare}
         ariaLabel="add"
       />,
     );
@@ -25,7 +25,7 @@ describe('ButtonIcon', () => {
       <ButtonIcon
         as="a"
         data-testid="button-icon"
-        iconName={ICON_NAMES.ADD_SQUARE}
+        iconName={IconName.AddSquare}
         ariaLabel="add"
       />,
     );
@@ -39,7 +39,7 @@ describe('ButtonIcon', () => {
       <ButtonIcon
         href="/metamask"
         data-testid="button-icon"
-        iconName={ICON_NAMES.ADD_SQUARE}
+        iconName={IconName.AddSquare}
         ariaLabel="add"
       />,
     );
@@ -51,13 +51,13 @@ describe('ButtonIcon', () => {
     const { getByTestId } = render(
       <>
         <ButtonIcon
-          iconName={ICON_NAMES.ADD_SQUARE}
+          iconName={IconName.AddSquare}
           ariaLabel="add"
           size={BUTTON_ICON_SIZES.SM}
           data-testid={BUTTON_ICON_SIZES.SM}
         />
         <ButtonIcon
-          iconName={ICON_NAMES.ADD_SQUARE}
+          iconName={IconName.AddSquare}
           ariaLabel="add"
           size={BUTTON_ICON_SIZES.LG}
           data-testid={BUTTON_ICON_SIZES.LG}
@@ -76,13 +76,13 @@ describe('ButtonIcon', () => {
     const { getByTestId } = render(
       <>
         <ButtonIcon
-          iconName={ICON_NAMES.ADD_SQUARE}
+          iconName={IconName.AddSquare}
           ariaLabel="add"
           color={IconColor.iconDefault}
           data-testid={IconColor.iconDefault}
         />
         <ButtonIcon
-          iconName={ICON_NAMES.ADD_SQUARE}
+          iconName={IconName.AddSquare}
           ariaLabel="add"
           color={IconColor.errorDefault}
           data-testid={IconColor.errorDefault}
@@ -102,7 +102,7 @@ describe('ButtonIcon', () => {
       <ButtonIcon
         data-testid="classname"
         className="mm-button-icon--test"
-        iconName={ICON_NAMES.ADD_SQUARE}
+        iconName={IconName.AddSquare}
         ariaLabel="add"
       />,
     );
@@ -115,7 +115,7 @@ describe('ButtonIcon', () => {
         <ButtonIcon
           disabled
           data-testid="disabled"
-          iconName={ICON_NAMES.ADD_SQUARE}
+          iconName={IconName.AddSquare}
           ariaLabel="add"
         />
       </>,
@@ -128,7 +128,7 @@ describe('ButtonIcon', () => {
     const { getByTestId } = render(
       <ButtonIcon
         data-testid="icon"
-        iconName={ICON_NAMES.ADD_SQUARE}
+        iconName={IconName.AddSquare}
         ariaLabel="add"
         iconProps={{ 'data-testid': 'button-icon' }}
       />,
@@ -139,7 +139,7 @@ describe('ButtonIcon', () => {
 
   it('should render with aria-label', () => {
     const { getByLabelText } = render(
-      <ButtonIcon iconName={ICON_NAMES.ADD_SQUARE} ariaLabel="add" />,
+      <ButtonIcon iconName={IconName.AddSquare} ariaLabel="add" />,
     );
 
     expect(getByLabelText('add')).toBeDefined();
diff --git a/ui/components/component-library/button-link/button-link.stories.js b/ui/components/component-library/button-link/button-link.stories.js
index b9eacd3ed..2ceaf4851 100644
--- a/ui/components/component-library/button-link/button-link.stories.js
+++ b/ui/components/component-library/button-link/button-link.stories.js
@@ -9,7 +9,7 @@ import {
   TextColor,
 } from '../../../helpers/constants/design-system';
 import Box from '../../ui/box/box';
-import { ICON_NAMES } from '../icon/deprecated';
+import { IconName } from '..';
 import { Text } from '../text';
 import { ButtonLink } from './button-link';
 import { BUTTON_LINK_SIZES } from './button-link.constants';
@@ -73,12 +73,12 @@ export default {
     },
     startIconName: {
       control: 'select',
-      options: Object.values(ICON_NAMES),
+      options: Object.values(IconName),
       table: { category: 'button base props' },
     },
     endIconName: {
       control: 'select',
-      options: Object.values(ICON_NAMES),
+      options: Object.values(IconName),
       table: { category: 'button base props' },
     },
     startIconProps: {
diff --git a/ui/components/component-library/button-link/button-link.test.js b/ui/components/component-library/button-link/button-link.test.js
index 5c1b68579..0f82c7652 100644
--- a/ui/components/component-library/button-link/button-link.test.js
+++ b/ui/components/component-library/button-link/button-link.test.js
@@ -2,7 +2,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 import { Size } from '../../../helpers/constants/design-system';
-import { ICON_NAMES } from '../icon/deprecated';
+import { IconName } from '..';
 import { ButtonLink } from './button-link';
 import { BUTTON_LINK_SIZES } from './button-link.constants';
 
@@ -82,7 +82,7 @@ describe('ButtonLink', () => {
   });
   it('should render with icon', () => {
     const { container } = render(
-      <ButtonLink data-testid="icon" startIconName={ICON_NAMES.ADD_SQUARE} />,
+      <ButtonLink data-testid="icon" startIconName={IconName.AddSquare} />,
     );
 
     const icons = container.getElementsByClassName('mm-icon').length;
diff --git a/ui/components/component-library/button-primary/button-primary.stories.js b/ui/components/component-library/button-primary/button-primary.stories.js
index d3a0bb3ff..c668153ee 100644
--- a/ui/components/component-library/button-primary/button-primary.stories.js
+++ b/ui/components/component-library/button-primary/button-primary.stories.js
@@ -5,7 +5,7 @@ import {
   Size,
 } from '../../../helpers/constants/design-system';
 import Box from '../../ui/box/box';
-import { ICON_NAMES } from '../icon/deprecated';
+import { IconName } from '..';
 import { ButtonPrimary } from './button-primary';
 
 import README from './README.mdx';
@@ -63,12 +63,12 @@ export default {
     },
     startIconName: {
       control: 'select',
-      options: Object.values(ICON_NAMES),
+      options: Object.values(IconName),
       table: { category: 'button base props' },
     },
     endIconName: {
       control: 'select',
-      options: Object.values(ICON_NAMES),
+      options: Object.values(IconName),
       table: { category: 'button base props' },
     },
     startIconProps: {
diff --git a/ui/components/component-library/button-primary/button-primary.test.js b/ui/components/component-library/button-primary/button-primary.test.js
index b16c7c36f..192e872dd 100644
--- a/ui/components/component-library/button-primary/button-primary.test.js
+++ b/ui/components/component-library/button-primary/button-primary.test.js
@@ -1,7 +1,7 @@
 /* eslint-disable jest/require-top-level-describe */
 import { render } from '@testing-library/react';
 import React from 'react';
-import { ICON_NAMES } from '../icon/deprecated';
+import { IconName } from '..';
 import { ButtonPrimary } from './button-primary';
 import { BUTTON_PRIMARY_SIZES } from './button-primary.constants';
 
@@ -90,10 +90,7 @@ describe('ButtonPrimary', () => {
   });
   it('should render with icon', () => {
     const { container } = render(
-      <ButtonPrimary
-        data-testid="icon"
-        startIconName={ICON_NAMES.ADD_SQUARE}
-      />,
+      <ButtonPrimary data-testid="icon" startIconName={IconName.AddSquare} />,
     );
 
     const icons = container.getElementsByClassName('mm-icon').length;
diff --git a/ui/components/component-library/button-secondary/button-secondary.stories.js b/ui/components/component-library/button-secondary/button-secondary.stories.js
index 6e4a0c445..94166d359 100644
--- a/ui/components/component-library/button-secondary/button-secondary.stories.js
+++ b/ui/components/component-library/button-secondary/button-secondary.stories.js
@@ -5,7 +5,7 @@ import {
   Size,
 } from '../../../helpers/constants/design-system';
 import Box from '../../ui/box/box';
-import { ICON_NAMES } from '../icon/deprecated';
+import { IconName } from '..';
 import { ButtonSecondary } from './button-secondary';
 import { BUTTON_SECONDARY_SIZES } from './button-secondary.constants';
 import README from './README.mdx';
@@ -62,12 +62,12 @@ export default {
     },
     startIconName: {
       control: 'select',
-      options: Object.values(ICON_NAMES),
+      options: Object.values(IconName),
       table: { category: 'button base props' },
     },
     endIconName: {
       control: 'select',
-      options: Object.values(ICON_NAMES),
+      options: Object.values(IconName),
       table: { category: 'button base props' },
     },
     startIconProps: {
diff --git a/ui/components/component-library/button-secondary/button-secondary.test.js b/ui/components/component-library/button-secondary/button-secondary.test.js
index 06a331a59..0529664cd 100644
--- a/ui/components/component-library/button-secondary/button-secondary.test.js
+++ b/ui/components/component-library/button-secondary/button-secondary.test.js
@@ -1,7 +1,7 @@
 /* eslint-disable jest/require-top-level-describe */
 import { render } from '@testing-library/react';
 import React from 'react';
-import { ICON_NAMES } from '../icon/deprecated';
+import { IconName } from '..';
 import { ButtonSecondary } from './button-secondary';
 import { BUTTON_SECONDARY_SIZES } from './button-secondary.constants';
 
@@ -94,10 +94,7 @@ describe('ButtonSecondary', () => {
   });
   it('should render with icon', () => {
     const { container } = render(
-      <ButtonSecondary
-        data-testid="icon"
-        startIconName={ICON_NAMES.ADD_SQUARE}
-      />,
+      <ButtonSecondary data-testid="icon" startIconName={IconName.AddSquare} />,
     );
 
     const icons = container.getElementsByClassName('mm-icon').length;
diff --git a/ui/components/component-library/button/README.mdx b/ui/components/component-library/button/README.mdx
index 59d869f5d..0e1527ff7 100644
--- a/ui/components/component-library/button/README.mdx
+++ b/ui/components/component-library/button/README.mdx
@@ -175,7 +175,7 @@ import { Button } from '../ui/component-library';
 
 ### Icon Name
 
-Use the `startIconName` and/or `endIconName` prop and the `ICON_NAMES` object from `./ui/components/component-library/icon` to select icon.
+Use the `startIconName` and/or `endIconName` prop and the `IconName` enum from `./ui/components/component-library/icon` to select icon.
 
 Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use.
 
@@ -185,9 +185,9 @@ Use the [IconSearch](/story/components-componentlibrary-icon--default-story) sto
 
 ```jsx
 import { Button } from '../ui/component-library';
-import { ICON_NAMES } from '../icon';
+import { IconName } from '../icon';
 
-<Button startIconName={ICON_NAMES.ADD_SQUARE}>Button</Button>;
+<Button startIconName={IconName.AddSquare}>Button</Button>;
 ```
 
 <Canvas>
@@ -196,7 +196,7 @@ import { ICON_NAMES } from '../icon';
 
 ```jsx
 import { Button } from '../ui/component-library';
-import { ICON_NAMES } from '../icon';
+import { IconName } from '../icon';
 
-<Button endIconName={ICON_NAMES.ARROW_2_RIGHT}>Button</Button>;
+<Button endIconName={IconName.Arrow2Right}>Button</Button>;
 ```
diff --git a/ui/components/component-library/button/button.stories.js b/ui/components/component-library/button/button.stories.js
index 0e80573ce..e85d37fa6 100644
--- a/ui/components/component-library/button/button.stories.js
+++ b/ui/components/component-library/button/button.stories.js
@@ -6,7 +6,7 @@ import {
   Size,
   TextVariant,
 } from '../../../helpers/constants/design-system';
-import { ICON_NAMES } from '../icon/deprecated';
+import { IconName } from '..';
 import { BUTTON_LINK_SIZES } from '../button-link/button-link.constants';
 import Box from '../../ui/box/box';
 import { Text } from '../text';
@@ -66,11 +66,11 @@ export default {
     },
     startIconName: {
       control: 'select',
-      options: Object.values(ICON_NAMES),
+      options: Object.values(IconName),
     },
     endIconName: {
       control: 'select',
-      options: Object.values(ICON_NAMES),
+      options: Object.values(IconName),
     },
     startIconProps: {
       control: 'object',
@@ -214,13 +214,13 @@ Loading.args = {
 };
 
 export const StartIconName = (args) => (
-  <Button {...args} startIconName={ICON_NAMES.ADD_SQUARE}>
+  <Button {...args} startIconName={IconName.AddSquare}>
     Button
   </Button>
 );
 
 export const EndIconName = (args) => (
-  <Button {...args} endIconName={ICON_NAMES.ARROW_2_RIGHT}>
+  <Button {...args} endIconName={IconName.Arrow2Right}>
     Button
   </Button>
 );
diff --git a/ui/components/component-library/button/button.test.js b/ui/components/component-library/button/button.test.js
index af974d796..1fd245238 100644
--- a/ui/components/component-library/button/button.test.js
+++ b/ui/components/component-library/button/button.test.js
@@ -1,7 +1,7 @@
 /* eslint-disable jest/require-top-level-describe */
 import { render } from '@testing-library/react';
 import React from 'react';
-import { ICON_NAMES } from '../icon/deprecated';
+import { IconName } from '..';
 import { BUTTON_SIZES, BUTTON_TYPES } from './button.constants';
 import { Button } from './button';
 
@@ -134,7 +134,7 @@ describe('Button', () => {
     const { getByTestId } = render(
       <Button
         data-testid="icon"
-        startIconName={ICON_NAMES.ADD_SQUARE}
+        startIconName={IconName.AddSquare}
         startIconProps={{ 'data-testid': 'start-button-icon' }}
       >
         Button
diff --git a/ui/components/component-library/form-text-field/README.mdx b/ui/components/component-library/form-text-field/README.mdx
index ddc30a7de..ff487e334 100644
--- a/ui/components/component-library/form-text-field/README.mdx
+++ b/ui/components/component-library/form-text-field/README.mdx
@@ -99,7 +99,7 @@ import {
   ButtonPrimary,
   ButtonSecondary,
   FormTextField,
-  ICON_NAMES,
+  IconName,
   Text,
 } from '../../component-library';
 
@@ -229,7 +229,7 @@ return (
         <ButtonPrimary type="submit">Submit</ButtonPrimary>
       </Box>
     </Box>
-    <ButtonSecondary icon={ICON_NAMES.CLOSE} onClick={handleClearForm} danger>
+    <ButtonSecondary icon={IconName.Close} onClick={handleClearForm} danger>
       Clear form
     </ButtonSecondary>
     {submitted === FORM_STATE.SUCCESS && (
@@ -264,7 +264,7 @@ import {
 
 import Box from '../../ui/box/box';
 
-import { Icon, ICON_NAMES } from '../icon/deprecated'
+import { Icon, IconName } from '..'
 import {
   ButtonLink,
   FormTextField,
@@ -293,8 +293,8 @@ import {
       Custom spending cap
     </Label>
     <Icon
-      name={ICON_NAMES.INFO}
-      size={Size.SM}
+      name={IconName.Info}
+      size={IconSize.Sm}
       marginLeft={1}
       color={IconColor.iconAlternative}
     />
diff --git a/ui/components/component-library/form-text-field/form-text-field.stories.js b/ui/components/component-library/form-text-field/form-text-field.stories.js
index e09965177..88a2a1e9b 100644
--- a/ui/components/component-library/form-text-field/form-text-field.stories.js
+++ b/ui/components/component-library/form-text-field/form-text-field.stories.js
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import { useArgs } from '@storybook/client-api';
 
 import {
-  Size,
   DISPLAY,
   AlignItems,
   TextVariant,
@@ -12,7 +11,6 @@ import {
 } from '../../../helpers/constants/design-system';
 
 import Box from '../../ui/box/box';
-import { Icon, ICON_NAMES } from '../icon/deprecated';
 import {
   ButtonLink,
   ButtonPrimary,
@@ -22,6 +20,9 @@ import {
   Text,
   TEXT_FIELD_SIZES,
   TEXT_FIELD_TYPES,
+  Icon,
+  IconName,
+  IconSize,
 } from '..';
 
 import { FormTextField } from './form-text-field';
@@ -372,7 +373,7 @@ export const FormExample = () => {
           <ButtonPrimary type="submit">Submit</ButtonPrimary>
         </Box>
       </Box>
-      <ButtonSecondary icon={ICON_NAMES.CLOSE} onClick={handleClearForm} danger>
+      <ButtonSecondary icon={IconName.Close} onClick={handleClearForm} danger>
         Clear form
       </ButtonSecondary>
       {submitted === FORM_STATE.SUCCESS && (
@@ -405,8 +406,8 @@ export const CustomLabelOrHelpText = () => (
         import the Label component separately */}
         <Label htmlFor="custom-spending-cap">Custom spending cap</Label>
         <Icon
-          name={ICON_NAMES.INFO}
-          size={Size.SM}
+          name={IconName.Info}
+          size={IconSize.Sm}
           marginLeft={1}
           color={IconColor.iconAlternative}
         />
diff --git a/ui/components/component-library/help-text/README.mdx b/ui/components/component-library/help-text/README.mdx
index 5dd6b31a3..6707eb6e4 100644
--- a/ui/components/component-library/help-text/README.mdx
+++ b/ui/components/component-library/help-text/README.mdx
@@ -28,8 +28,7 @@ The `HelpText` accepts all props below as well as all [Box](/docs/components-ui-
 
 ```jsx
 import { Size, IconColor } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../icon/deprecated';
-import { HelpText } from '../../component-library';
+import { HelpText, Icon, IconName, IconSize } from '../../component-library';
 
 <HelpText>Plain text</HelpText> // renders as <p>Plain text</p>
 <HelpText>
@@ -37,8 +36,8 @@ import { HelpText } from '../../component-library';
   <Icon
     marginLeft={1}
     color={IconColor.iconAlternative}
-    name={ICON_NAMES.WARNING}
-    size={Size.inherit}
+    name={IconName.Warning}
+    size={IconSize.Inherit}
   />
 </HelpText> // renders as <div><span>Text and icon</span> <div style={{background: icon/warning.svg}} /></div>
 ```
diff --git a/ui/components/component-library/help-text/help-text.stories.js b/ui/components/component-library/help-text/help-text.stories.js
index 86792b73a..e457bf6c6 100644
--- a/ui/components/component-library/help-text/help-text.stories.js
+++ b/ui/components/component-library/help-text/help-text.stories.js
@@ -4,13 +4,12 @@ import {
   FLEX_DIRECTION,
   IconColor,
   TextColor,
-  Size,
   SEVERITIES,
 } from '../../../helpers/constants/design-system';
 
 import Box from '../../ui/box';
 
-import { Icon, ICON_NAMES } from '../icon/deprecated';
+import { Icon, IconName, IconSize } from '..';
 
 import { HelpText } from './help-text';
 
@@ -59,8 +58,8 @@ export const Children = (args) => (
       <Icon
         marginLeft={1}
         color={IconColor.iconAlternative}
-        name={ICON_NAMES.WARNING}
-        size={Size.inherit}
+        name={IconName.Warning}
+        size={IconSize.Inherit}
         as="span"
       />
     </HelpText>
diff --git a/ui/components/component-library/help-text/help-text.test.js b/ui/components/component-library/help-text/help-text.test.js
index c76dec6f5..685d32b31 100644
--- a/ui/components/component-library/help-text/help-text.test.js
+++ b/ui/components/component-library/help-text/help-text.test.js
@@ -2,7 +2,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 import { Color, SEVERITIES } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../icon/deprecated';
+import { Icon, IconName } from '..';
 
 import { HelpText } from './help-text';
 
@@ -25,8 +25,7 @@ describe('HelpText', () => {
   it('should render with react nodes inside the HelpText', () => {
     const { getByText, getByTestId } = render(
       <HelpText>
-        help text{' '}
-        <Icon name={ICON_NAMES.WARNING} data-testid="icon" as="span" />
+        help text <Icon name={IconName.Warning} data-testid="icon" as="span" />
       </HelpText>,
     );
     expect(getByText('help text')).toBeDefined();
@@ -67,7 +66,7 @@ describe('HelpText', () => {
       <>
         <HelpText>help text as p</HelpText>
         <HelpText data-testid="help-text-div">
-          <span>help text as div</span> <Icon name={ICON_NAMES.WARNING} />
+          <span>help text as div</span> <Icon name={IconName.Warning} />
         </HelpText>
       </>,
     );
diff --git a/ui/components/component-library/label/README.mdx b/ui/components/component-library/label/README.mdx
index 8e518775b..d5036cb20 100644
--- a/ui/components/component-library/label/README.mdx
+++ b/ui/components/component-library/label/README.mdx
@@ -32,16 +32,15 @@ The `children` of the label can be text or a react node
 
 ```jsx
 import { DISPLAY, AlignItems, FLEX_DIRECTION, Size, IconColor } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
-import { Label, TextField } from '../../component-library';
+import { Label, TextField, Icon, IconName, IconSize } from '../../component-library';
 
 <Label>Plain text</Label>
 <Label display={DISPLAY.FLEX} alignItems={AlignItems.flexStart}>
   Text and icon
       <Icon
         color={IconColor.iconAlternative}
-        name={ICON_NAMES.INFO}
-        size={Size.inherit}
+        name={IconName.Info}
+        size={IconSize.Inherit}
       />
 </Label>
 <Label
diff --git a/ui/components/component-library/label/label.stories.js b/ui/components/component-library/label/label.stories.js
index a1cf244fe..9b6554737 100644
--- a/ui/components/component-library/label/label.stories.js
+++ b/ui/components/component-library/label/label.stories.js
@@ -2,15 +2,13 @@ import React, { useState } from 'react';
 import {
   DISPLAY,
   FLEX_DIRECTION,
-  Size,
   AlignItems,
   IconColor,
 } from '../../../helpers/constants/design-system';
 
 import Box from '../../ui/box';
 
-import { Icon, ICON_NAMES } from '../icon/deprecated';
-import { TextField } from '..';
+import { TextField, Icon, IconName, IconSize } from '..';
 
 import { Label } from './label';
 
@@ -57,8 +55,8 @@ export const Children = (args) => (
       Text and icon
       <Icon
         color={IconColor.iconAlternative}
-        name={ICON_NAMES.INFO}
-        size={Size.inherit}
+        name={IconName.Info}
+        size={IconSize.Inherit}
       />
     </Label>
     <Label
diff --git a/ui/components/component-library/label/label.test.js b/ui/components/component-library/label/label.test.js
index 75ce96a88..7bc74b47a 100644
--- a/ui/components/component-library/label/label.test.js
+++ b/ui/components/component-library/label/label.test.js
@@ -1,7 +1,7 @@
 /* eslint-disable jest/require-top-level-describe */
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import { Icon, ICON_NAMES } from '../icon/deprecated';
+import { Icon, IconName } from '..';
 import { TextField } from '../text-field';
 
 import { Label } from './label';
@@ -21,7 +21,7 @@ describe('label', () => {
     const { getByText, getByTestId } = render(
       <Label>
         label
-        <Icon name={ICON_NAMES.INFO} data-testid="icon" />
+        <Icon name={IconName.Info} data-testid="icon" />
       </Label>,
     );
     expect(getByText('label')).toBeDefined();
diff --git a/ui/components/component-library/picker-network/picker-network.js b/ui/components/component-library/picker-network/picker-network.js
index b9eee7b06..2c3adaea9 100644
--- a/ui/components/component-library/picker-network/picker-network.js
+++ b/ui/components/component-library/picker-network/picker-network.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { AvatarNetwork } from '../avatar-network';
-import { Icon, ICON_NAMES } from '../icon/deprecated';
+import { IconName, Icon, IconSize } from '../icon';
 import { Text } from '../text';
 import Box from '../../ui/box';
 import {
@@ -48,9 +48,9 @@ export const PickerNetwork = ({
       </Text>
       <Icon
         className="mm-picker-network__arrow-down-icon"
-        name={ICON_NAMES.ARROW_DOWN}
+        name={IconName.ArrowDown}
         color={IconColor.iconDefault}
-        size={Size.XS}
+        size={IconSize.Xs}
         {...iconProps}
       />
     </Box>
@@ -73,7 +73,7 @@ PickerNetwork.propTypes = {
   /**
    * It accepts all the props from Icon
    */
-  iconProps: PropTypes.shape(Icon.PropTypes),
+  iconProps: PropTypes.object,
   /**
    * The text content of the PickerNetwork component
    */
diff --git a/ui/components/component-library/tag-url/tag-url.js b/ui/components/component-library/tag-url/tag-url.js
index 0350038b7..02690db75 100644
--- a/ui/components/component-library/tag-url/tag-url.js
+++ b/ui/components/component-library/tag-url/tag-url.js
@@ -13,9 +13,7 @@ import {
   Size,
   TextVariant,
 } from '../../../helpers/constants/design-system';
-import { AvatarFavicon } from '../avatar-favicon';
-import { ButtonLink } from '../button-link';
-import { Icon, ICON_NAMES } from '../icon/deprecated';
+import { AvatarFavicon, ButtonLink, IconName, Icon, IconSize } from '..';
 
 export const TagUrl = ({
   label,
@@ -47,9 +45,9 @@ export const TagUrl = ({
       {showLockIcon && (
         <Icon
           className="mm-tag-url__lock-icon"
-          name={ICON_NAMES.LOCK}
+          name={IconName.Lock}
           color={IconColor.iconAlternative}
-          size={Size.SM}
+          size={IconSize.Sm}
           aria-label="https://"
           role="img"
           {...lockIconProps}
@@ -91,7 +89,7 @@ TagUrl.propTypes = {
   /**
    * It accepts all the props from Icon
    */
-  lockIconProps: PropTypes.shape(Icon.PropTypes),
+  lockIconProps: PropTypes.object,
   /**
    * The text content of the TagUrl component
    */
diff --git a/ui/components/component-library/text-field-search/text-field-search.js b/ui/components/component-library/text-field-search/text-field-search.js
index 9dd2c180c..feb956ea9 100644
--- a/ui/components/component-library/text-field-search/text-field-search.js
+++ b/ui/components/component-library/text-field-search/text-field-search.js
@@ -4,8 +4,7 @@ import classnames from 'classnames';
 
 import { Size } from '../../../helpers/constants/design-system';
 
-import { ButtonIcon } from '../button-icon';
-import { Icon, ICON_NAMES } from '../icon/deprecated';
+import { ButtonIcon, Icon, IconName, IconSize } from '..';
 import { TextField, TEXT_FIELD_TYPES } from '../text-field';
 
 export const TextFieldSearch = ({
@@ -30,7 +29,7 @@ export const TextFieldSearch = ({
           <ButtonIcon
             className="mm-text-field__button-clear"
             ariaLabel="Clear" // TODO: i18n
-            iconName={ICON_NAMES.CLOSE}
+            iconName={IconName.Close}
             size={Size.SM}
             onClick={clearButtonOnClick}
             {...clearButtonProps}
@@ -41,7 +40,7 @@ export const TextFieldSearch = ({
         endAccessory
       )
     }
-    startAccessory={<Icon name={ICON_NAMES.SEARCH} size={Size.SM} />}
+    startAccessory={<Icon name={IconName.Search} size={IconSize.Sm} />}
     inputProps={{
       marginRight: showClearButton ? 6 : 0,
       ...inputProps,
diff --git a/ui/components/component-library/text-field/README.mdx b/ui/components/component-library/text-field/README.mdx
index 50b5035da..81631aec5 100644
--- a/ui/components/component-library/text-field/README.mdx
+++ b/ui/components/component-library/text-field/README.mdx
@@ -90,7 +90,7 @@ Use the `startAccessory` and `endAccessory` props to add components such as icon
 
 ```jsx
 import { Color, IconColor, SIZES, DISPLAY } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../component-library/deprecated'
+import { Icon, IconName } from '../../component-library/deprecated'
 import { ButtonIcon, TextField } from '../../component-library';
 
 <TextField
@@ -98,7 +98,7 @@ import { ButtonIcon, TextField } from '../../component-library';
   startAccessory={
     <Icon
       color={IconColor.iconAlternative}
-      name={ICON_NAMES.SEARCH}
+      name={IconName.Search}
     />
   }
 />
@@ -107,7 +107,7 @@ import { ButtonIcon, TextField } from '../../component-library';
   placeholder="Public address (0x), or ENS"
   endAccessory={
     <ButtonIcon
-      iconName={ICON_NAMES.SCAN_BARCODE}
+      iconName={IconName.ScanBarcode}
       ariaLabel="Scan QR code"
       iconProps={{ color: IconColor.primaryDefault }}
     />
@@ -129,7 +129,7 @@ import { ButtonIcon, TextField } from '../../component-library';
   endAccessory={
     isAddressValid && (
       <Icon
-        name={ICON_NAMES.CHECK}
+        name={IconName.Check}
         color={IconColor.successDefault}
       />
     )
@@ -206,7 +206,7 @@ To function fully the custom component should accept the following props:
 </Canvas>
 
 ```jsx
-import { TextField, Icon, ICON_NAMES } from '../../component-library';
+import { TextField, Icon, IconName } from '../../component-library';
 
 // should map the props to the custom input component
 const CustomInputComponent = () => <div>{/* Custom input component */}</div>;
@@ -216,7 +216,7 @@ const TextFieldCustomInput = (args) => (
     size={SIZES.LG}
     InputComponent={CustomInputComponent}
     startAccessory={
-      <Icon color={IconColor.iconAlternative} name={ICON_NAMES.WALLET} />
+      <Icon color={IconColor.iconAlternative} name={IconName.Wallet} />
     }
   />
 );
diff --git a/ui/components/component-library/text-field/text-field.stories.js b/ui/components/component-library/text-field/text-field.stories.js
index 0ea5d6f06..b266ebb94 100644
--- a/ui/components/component-library/text-field/text-field.stories.js
+++ b/ui/components/component-library/text-field/text-field.stories.js
@@ -21,10 +21,11 @@ import {
   Button,
   ButtonIcon,
   Text,
+  IconName,
+  Icon,
+  IconSize,
 } from '..';
 
-import { ICON_NAMES, Icon } from '../icon/deprecated';
-
 import { TEXT_FIELD_SIZES, TEXT_FIELD_TYPES } from './text-field.constants';
 import { TextField } from './text-field';
 
@@ -240,7 +241,7 @@ export const StartAccessoryEndAccessory = (args) => {
         name="search"
         onChange={handleOnChange}
         startAccessory={
-          <Icon color={IconColor.iconAlternative} name={ICON_NAMES.SEARCH} />
+          <Icon color={IconColor.iconAlternative} name={IconName.Search} />
         }
       />
       <TextField
@@ -251,7 +252,7 @@ export const StartAccessoryEndAccessory = (args) => {
         onChange={handleOnChange}
         endAccessory={
           <ButtonIcon
-            iconName={ICON_NAMES.SCAN_BARCODE}
+            iconName={IconName.ScanBarcode}
             ariaLabel="Scan QR code"
             iconProps={{ color: IconColor.primaryDefault }}
           />
@@ -281,9 +282,9 @@ export const StartAccessoryEndAccessory = (args) => {
             />
             <Text>ETH</Text>
             <Icon
-              name={ICON_NAMES.ARROW_DOWN}
+              name={IconName.ArrowDown}
               color={IconColor.iconDefault}
-              size={Size.SM}
+              size={IconSize.Sm}
             />
           </Box>
         }
@@ -314,7 +315,7 @@ export const StartAccessoryEndAccessory = (args) => {
         }
         endAccessory={
           value.accountAddress.length === 42 && (
-            <Icon name={ICON_NAMES.CHECK} color={IconColor.successDefault} />
+            <Icon name={IconName.Check} color={IconColor.successDefault} />
           )
         }
       />
@@ -464,7 +465,7 @@ export const InputComponent = (args) => (
     size={Size.LG}
     InputComponent={CustomInputComponent}
     startAccessory={
-      <Icon color={IconColor.iconAlternative} name={ICON_NAMES.WALLET} />
+      <Icon color={IconColor.iconAlternative} name={IconName.Wallet} />
     }
   />
 );