Fix/18492/update icon ts app folder (#18645)

ui/components/app/account-menu/account-menu.component.js

@@ -37,11 +37,7 @@ import Button from '../../ui/button';
 import SearchIcon from '../../ui/icon/search-icon';
 import { SUPPORT_LINK } from '../../../../shared/lib/ui-utils';
 import { IconColor } from '../../../helpers/constants/design-system';
-import {
+import { Icon, IconName, IconSize } from '../../component-library';
-  Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
 import KeyRingLabel from './keyring-label';
 
 export function AccountMenuItem(props) {
@@ -229,8 +225,8 @@ export default class AccountMenu extends Component {
             {isSelected ? (
               <Icon
                 color={IconColor.successDefault}
-                name={ICON_NAMES.CHECK}
+                name={IconName.Check}
-                size={ICON_SIZES.LG}
+                size={IconSize.Lg}
               />
             ) : null}
           </div>
@@ -374,9 +370,7 @@ export default class AccountMenu extends Component {
             });
             history.push(NEW_ACCOUNT_ROUTE);
           }}
-          icon={
+          icon={<Icon name={IconName.Add} color={IconColor.iconAlternative} />}
-            <Icon name={ICON_NAMES.ADD} color={IconColor.iconAlternative} />
-          }
           text={t('createAccount')}
         />
         <AccountMenuItem
@@ -393,7 +387,7 @@ export default class AccountMenu extends Component {
             history.push(IMPORT_ACCOUNT_ROUTE);
           }}
           icon={
-            <Icon name={ICON_NAMES.IMPORT} color={IconColor.iconAlternative} />
+            <Icon name={IconName.Import} color={IconColor.iconAlternative} />
           }
           text={t('importAccount')}
         />
@@ -415,10 +409,7 @@ export default class AccountMenu extends Component {
             }
           }}
           icon={
-            <Icon
+            <Icon name={IconName.Hardware} color={IconColor.iconAlternative} />
-              name={ICON_NAMES.HARDWARE}
-              color={IconColor.iconAlternative}
-            />
           }
           text={t('connectHardwareWallet')}
         />
@@ -433,7 +424,7 @@ export default class AccountMenu extends Component {
               }}
               icon={
                 <div className="account-menu__notifications">
-                  <Icon name={ICON_NAMES.NOTIFICATION} size={ICON_SIZES.LG} />
+                  <Icon name={IconName.Notification} size={IconSize.Lg} />
                   {unreadNotificationsCount > 0 && (
                     <div className="account-menu__notifications__count">
                       {unreadNotificationsCount}
@@ -466,10 +457,7 @@ export default class AccountMenu extends Component {
             global.platform.openTab({ url: supportLink });
           }}
           icon={
-            <Icon
+            <Icon name={IconName.Messages} color={IconColor.iconAlternative} />
-              name={ICON_NAMES.MESSAGES}
-              color={IconColor.iconAlternative}
-            />
           }
           text={supportText}
         />
@@ -488,7 +476,7 @@ export default class AccountMenu extends Component {
           }}
           icon={
             <Icon
-              name={ICON_NAMES.SETTING}
+              name={IconName.Setting}
               color={IconColor.iconAlternative}
               ariaLabel={t('settings')}
             />

ui/components/app/add-network/add-network.js

@@ -36,12 +36,7 @@ import { FEATURED_RPCS } from '../../../../shared/constants/network';
 import { ADD_NETWORK_ROUTE } from '../../../helpers/constants/routes';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
-import { Text } from '../../component-library';
+import { Text, Icon, IconName, IconSize } from '../../component-library';
-import {
-  Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
 import { MetaMetricsNetworkEventSource } from '../../../../shared/constants/metametrics';
 
 const AddNetwork = () => {
@@ -249,9 +244,9 @@ const AddNetwork = () => {
                       >
                         <Icon
                           className="add-network__warning-icon"
-                          name={ICON_NAMES.DANGER}
+                          name={IconName.Danger}
                           color={IconColor.iconMuted}
-                          size={ICON_SIZES.SM}
+                          size={IconSize.Sm}
                         />
                       </Tooltip>
                     )

ui/components/app/approve-content-card/approve-content-card.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
+import { Icon, IconName } from '../../component-library';
 import ApproveContentCard from './approve-content-card';
 
 export default {
@@ -72,7 +72,7 @@ export default {
   },
   args: {
     showHeader: true,
-    symbol: <Icon name={ICON_NAMES.TAG} />,
+    symbol: <Icon name={IconName.Tag} />,
     title: 'Transaction fee',
     showEdit: true,
     showAdvanceGasFeeOptions: true,

ui/components/app/asset-list-item/asset-list-item.js

@@ -16,11 +16,7 @@ import { INVALID_ASSET_TYPE } from '../../../helpers/constants/error-keys';
 import { MetaMetricsEventCategory } from '../../../../shared/constants/metametrics';
 import { AssetType } from '../../../../shared/constants/transaction';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
-import {
+import { Icon, IconName, IconSize } from '../../component-library';
-  Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
 import Box from '../../ui/box/box';
 
 const AssetListItem = ({
@@ -143,9 +139,9 @@ const AssetListItem = ({
         !isERC721 && (
           <Box>
             <Icon
-              name={ICON_NAMES.ARROW_RIGHT}
+              name={IconName.ArrowRight}
               color={Color.iconDefault}
-              size={ICON_SIZES.SM}
+              size={IconSize.Sm}
               style={{ verticalAlign: 'middle' }}
             />
             {sendTokenButton}

ui/components/app/beta-header/index.js

@@ -14,11 +14,7 @@ import {
 import { BETA_BUGS_URL } from '../../../helpers/constants/beta';
 
 import { hideBetaHeader } from '../../../store/actions';
-import { ButtonIcon } from '../../component-library/button-icon/deprecated';
+import { ButtonIcon, ButtonIconSize, IconName } from '../../component-library';
-import {
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
 
 const BetaHeader = () => {
   const t = useI18nContext();
@@ -51,8 +47,8 @@ const BetaHeader = () => {
         ])}
       </Typography>
       <ButtonIcon
-        iconName={ICON_NAMES.CLOSE}
+        iconName={IconName.Close}
-        size={ICON_SIZES.SM}
+        size={ButtonIconSize.Sm}
         color={IconColor.warningInverse}
         className="beta-header__button"
         data-testid="beta-header-close"

ui/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js

@@ -10,7 +10,7 @@ import Identicon from '../../../ui/identicon';
 import { shortenAddress } from '../../../../helpers/utils/util';
 import AccountMismatchWarning from '../../../ui/account-mismatch-warning/account-mismatch-warning.component';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import { Icon, ICON_NAMES } from '../../../component-library/icon/deprecated';
+import { Icon, IconName } from '../../../component-library';
 
 export default function ConfirmPageContainerHeader({
   onEdit,
@@ -54,7 +54,7 @@ export default function ConfirmPageContainerHeader({
               visibility: showEdit ? 'initial' : 'hidden',
             }}
           >
-            <Icon name={ICON_NAMES.ARROW_LEFT} />
+            <Icon name={IconName.ArrowLeft} />
             <span
               data-testid="confirm-page-back-edit-button"
               className="confirm-page-container-header__back-button"

ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js

@@ -14,12 +14,7 @@ import {
   AlignItems,
   IconColor,
 } from '../../../helpers/constants/design-system';
-import {
+import { Icon, IconName, IconSize, Text } from '../../component-library';
-  Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
-import { Text } from '../../component-library';
 
 const ConfirmationWarningModal = ({ onSubmit, onCancel }) => {
   const t = useI18nContext();
@@ -60,10 +55,10 @@ const ConfirmationWarningModal = ({ onSubmit, onCancel }) => {
         className="confirmation-warning-modal__content__header"
       >
         <Icon
-          name={ICON_NAMES.DANGER}
+          name={IconName.Danger}
           color={IconColor.errorDefault}
           className="confirmation-warning-modal__content__header__warning-icon"
-          size={ICON_SIZES.XL}
+          size={IconSize.Xl}
         />
         <Text
           variant={TextVariant.headingSm}

ui/components/app/connected-accounts-list/connected-accounts-list-options/connected-accounts-list-options.component.js

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
 import { Menu } from '../../../ui/menu';
-import { ICON_NAMES } from '../../../component-library/icon/deprecated';
+import { IconName, ButtonIcon } from '../../../component-library';
-import { ButtonIcon } from '../../../component-library/button-icon/deprecated';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 
 const ConnectedAccountsListOptions = ({
@@ -17,7 +16,7 @@ const ConnectedAccountsListOptions = ({
   return (
     <div ref={ref}>
       <ButtonIcon
-        iconName={ICON_NAMES.MORE_VERTICAL}
+        iconName={IconName.MoreVertical}
         className="connected-accounts-options__button"
         onClick={onShowOptions}
         ariaLabel={t('options')}

ui/components/app/connected-accounts-list/connected-accounts-list.component.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
-import { ICON_NAMES } from '../../component-library/icon/deprecated';
+import { IconName } from '../../component-library';
 import { MenuItem } from '../../ui/menu';
 import ConnectedAccountsListItem from './connected-accounts-list-item';
 import ConnectedAccountsListOptions from './connected-accounts-list-options';
@@ -105,7 +105,7 @@ export default class ConnectedAccountsList extends PureComponent {
         onShowOptions={this.showAccountOptions.bind(null, address)}
         show={accountWithOptionsShown === address}
       >
-        <MenuItem iconName={ICON_NAMES.LOGOUT} onClick={this.disconnectAccount}>
+        <MenuItem iconName={IconName.Logout} onClick={this.disconnectAccount}>
           {t('disconnectThisAccount')}
         </MenuItem>
       </ConnectedAccountsListOptions>

ui/components/app/custom-spending-cap/__snapshots__/custom-spending-cap.test.js.snap

@@ -42,7 +42,7 @@ exports[`CustomSpendingCap should match snapshot 1`] = `
                       tabindex="0"
                     >
                       <span
-                        class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
+                        class="box mm-icon mm-icon--size-inherit box--display-inline-block box--flex-direction-row box--color-inherit"
                         style="mask-image: url('./images/icons/question.svg');"
                       />
                     </div>

ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js

@@ -8,11 +8,7 @@ import {
   DISPLAY,
   TypographyVariant,
 } from '../../../helpers/constants/design-system';
-import {
+import { Icon, IconName, IconSize } from '../../component-library';
-  Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
 
 export const CustomSpendingCapTooltip = ({
   tooltipContentText,
@@ -35,13 +31,15 @@ export const CustomSpendingCapTooltip = ({
     >
       {tooltipIcon ? (
         <Icon
-          name={ICON_NAMES.DANGER}
+          name={IconName.Danger}
           className="form-field__heading-title__tooltip__warning-icon"
-          size={ICON_SIZES.AUTO}
+          size={IconSize.Auto}
           style={{ 'vertical-align': 'bottom' }}
         />
       ) : (
-        tooltipIcon !== '' && <Icon name={ICON_NAMES.QUESTION} />
+        tooltipIcon !== '' && (
+          <Icon name={IconName.Question} size={IconSize.Inherit} />
+        )
       )}
     </Tooltip>
   </Box>

ui/components/app/custom-spending-cap/custom-spending-cap.js

@@ -8,8 +8,7 @@ import { addHexPrefix } from 'ethereumjs-util';
 import { I18nContext } from '../../../contexts/i18n';
 import Box from '../../ui/box';
 import FormField from '../../ui/form-field';
-import { Text, ButtonLink } from '../../component-library';
+import { Text, ButtonLink, Icon, IconName } from '../../component-library';
-import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
 import {
   AlignItems,
   DISPLAY,
@@ -196,7 +195,7 @@ export default function CustomSpendingCap({
           as="h6"
           color={TextColor.errorDefault}
         >
-          <Icon name={ICON_NAMES.WARNING} /> {t('beCareful')}
+          <Icon name={IconName.Warning} /> {t('beCareful')}
         </Text>,
       ])
     : t('inputLogicEmptyState');

ui/components/app/dropdowns/network-dropdown.js

@@ -33,11 +33,7 @@ import {
   ADVANCED_ROUTE,
 } from '../../../helpers/constants/routes';
 import { ButtonIcon } from '../../component-library/button-icon/deprecated';
-import {
+import { Icon, IconName, IconSize } from '../../component-library';
-  Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
 
 import { Dropdown, DropdownMenuItem } from './dropdown';
 
@@ -191,7 +187,7 @@ class NetworkDropdown extends Component {
             }}
           >
             {isCurrentRpcTarget ? (
-              <Icon name={ICON_NAMES.CHECK} color={IconColor.successDefault} />
+              <Icon name={IconName.Check} color={IconColor.successDefault} />
             ) : (
               <div className="network-check__transparent">✓</div>
             )}
@@ -214,8 +210,8 @@ class NetworkDropdown extends Component {
             {isCurrentRpcTarget ? null : (
               <ButtonIcon
                 className="delete"
-                iconName={ICON_NAMES.CLOSE}
+                iconName={IconName.Close}
-                size={ICON_SIZES.SM}
+                size={IconSize.Sm}
                 ariaLabel={this.context.t('delete')}
                 onClick={(e) => {
                   e.stopPropagation();
@@ -265,7 +261,7 @@ class NetworkDropdown extends Component {
         style={DROP_DOWN_MENU_ITEM_STYLE}
       >
         {providerType === network ? (
-          <Icon name={ICON_NAMES.CHECK} color={IconColor.successDefault} />
+          <Icon name={IconName.Check} color={IconColor.successDefault} />
         ) : (
           <div className="network-check__transparent">✓</div>
         )}
@@ -334,7 +330,7 @@ class NetworkDropdown extends Component {
         style={DROP_DOWN_MENU_ITEM_STYLE}
       >
         {isCurrentRpcTarget ? (
-          <Icon name={ICON_NAMES.CHECK} color={IconColor.successDefault} />
+          <Icon name={IconName.Check} color={IconColor.successDefault} />
         ) : (
           <div className="network-check__transparent">✓</div>
         )}

ui/components/app/edit-gas-fee-button/edit-gas-fee-button.js

@@ -14,11 +14,7 @@ import { useTransactionEventFragment } from '../../../hooks/useTransactionEventF
 import { useTransactionModalContext } from '../../../contexts/transaction-modal';
 import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
 import Typography from '../../ui/typography/typography';
-import {
+import { Icon, IconName, IconSize } from '../../component-library';
-  Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
 
 export default function EditGasFeeButton({ userAcknowledgedGasMissing }) {
   const t = useI18nContext();
@@ -78,9 +74,9 @@ export default function EditGasFeeButton({ userAcknowledgedGasMissing }) {
         )}
         <span className="edit-gas-fee-button__label">{t(title)}</span>
         <Icon
-          name={ICON_NAMES.ARROW_RIGHT}
+          name={IconName.ArrowRight}
           color={Color.primaryDefault}
-          size={ICON_SIZES.XS}
+          size={IconSize.Xs}
         />
       </button>
       {estimateUsed === 'custom' && (

ui/components/app/flask/copyable/copyable.js

@@ -14,11 +14,7 @@ import {
   Color,
 } from '../../../../helpers/constants/design-system';
 import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
-import {
+import { Icon, IconName, IconSize } from '../../../component-library';
-  Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../../component-library/icon/deprecated';
 
 export const Copyable = ({ text }) => {
   const [copied, handleCopy] = useCopyToClipboard();
@@ -51,14 +47,14 @@ export const Copyable = ({ text }) => {
       >
         {copied ? (
           <Icon
-            name={ICON_NAMES.COPY_SUCCESS}
+            name={IconName.CopySuccess}
-            size={ICON_SIZES.LG}
+            size={IconSize.Lg}
             color={Color.iconAlternative}
           />
         ) : (
           <Icon
-            name={ICON_NAMES.COPY}
+            name={IconName.Copy}
-            size={ICON_SIZES.LG}
+            size={IconSize.Lg}
             color={Color.iconAlternative}
             onClick={() => handleCopy(text)}
           />

ui/components/app/flask/snap-authorship/snap-authorship.js

@@ -20,12 +20,8 @@ import {
   getSnapName,
   removeSnapIdPrefix,
 } from '../../../../helpers/utils/util';
-import { ButtonIcon } from '../../../component-library/button-icon/deprecated';
+import { ButtonIcon, IconName, Text } from '../../../component-library';
-import { Text } from '../../../component-library';
+
-import {
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../../component-library/icon/deprecated';
 import { getTargetSubjectMetadata } from '../../../../selectors';
 import SnapAvatar from '../snap-avatar';
 
@@ -85,9 +81,8 @@ const SnapAuthorship = ({ snapId, className }) => {
         rel="noopener noreferrer"
         target="_blank"
         href={url}
-        iconName={ICON_NAMES.EXPORT}
+        iconName={IconName.Export}
         color={IconColor.infoDefault}
-        size={ICON_SIZES.MD}
         style={{ marginLeft: 'auto' }}
       />
     </Box>

ui/components/app/flask/snap-avatar/snap-avatar.js

@@ -17,11 +17,9 @@ import {
   BadgeWrapperPosition,
   AvatarIcon,
   AvatarBase,
+  IconName,
+  IconSize,
 } from '../../../component-library';
-import {
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../../component-library/icon/deprecated';
 import { getTargetSubjectMetadata } from '../../../../selectors';
 
 const SnapAvatar = ({ snapId, className }) => {
@@ -40,11 +38,11 @@ const SnapAvatar = ({ snapId, className }) => {
       className={classnames('snap-avatar', className)}
       badge={
         <AvatarIcon
-          iconName={ICON_NAMES.SNAPS}
+          iconName={IconName.Snaps}
-          size={ICON_SIZES.XS}
+          size={IconSize.Xs}
           backgroundColor={IconColor.infoDefault}
           iconProps={{
-            size: ICON_SIZES.XS,
+            size: IconSize.Xs,
             color: IconColor.infoInverse,
           }}
         />

ui/components/app/flask/snap-content-footer/snap-content-footer.js

@@ -16,7 +16,7 @@ import {
 } from '../../../../helpers/constants/design-system';
 import Button from '../../../ui/button';
 import Box from '../../../ui/box/box';
-import { Icon, ICON_NAMES } from '../../../component-library/icon/deprecated';
+import { Icon, IconName } from '../../../component-library';
 
 export default function SnapContentFooter({ snapName, snapId }) {
   const t = useI18nContext();
@@ -36,7 +36,7 @@ export default function SnapContentFooter({ snapName, snapId }) {
       className="snap-content-footer"
     >
       <Icon
-        name={ICON_NAMES.WARNING}
+        name={IconName.Warning}
         size={Size.SM}
         color={IconColor.iconMuted}
         paddingRight={1}

ui/components/app/flask/snap-delineator/snap-delineator.js

@@ -12,11 +12,12 @@ import {
   TextColor,
 } from '../../../../helpers/constants/design-system';
 import Box from '../../../ui/box';
-import { AvatarIcon, Text } from '../../../component-library';
 import {
-  ICON_NAMES,
+  AvatarIcon,
-  ICON_SIZES,
+  Text,
-} from '../../../component-library/icon/deprecated';
+  IconName,
+  IconSize,
+} from '../../../component-library';
 import {
   DelineatorType,
   getDelineatorTitle,
@@ -45,14 +46,14 @@ export const SnapDelineator = ({
         padding={1}
       >
         <AvatarIcon
-          iconName={ICON_NAMES.SNAPS}
+          iconName={IconName.Snaps}
-          size={ICON_SIZES.XS}
+          size={IconSize.Xs}
           backgroundColor={
             isError ? IconColor.errorDefault : IconColor.infoDefault
           }
           margin={1}
           iconProps={{
-            size: ICON_SIZES.XS,
+            size: IconSize.Xs,
             color: IconColor.infoInverse,
           }}
         />

ui/components/app/flask/snap-install-warning/snap-install-warning.js

@@ -15,8 +15,7 @@ import {
 } from '../../../../helpers/constants/design-system';
 import Popover from '../../../ui/popover';
 import Button from '../../../ui/button';
-import { AvatarIcon, Text } from '../../../component-library';
+import { AvatarIcon, Text, IconName } from '../../../component-library';
-import { ICON_NAMES } from '../../../component-library/icon/deprecated';
 import Box from '../../../ui/box/box';
 
 /**
@@ -79,7 +78,7 @@ export default function SnapInstallWarning({ onCancel, onSubmit, warnings }) {
     >
       <Box justifyContent={JustifyContent.center} marginBottom={6}>
         <AvatarIcon
-          iconName={ICON_NAMES.DANGER}
+          iconName={IconName.Danger}
           backgroundColor={BackgroundColor.warningMuted}
           color={IconColor.warningDefault}
           size={Size.LG}

ui/components/app/menu-bar/account-options-menu.js

@@ -28,7 +28,7 @@ import {
   MetaMetricsEventName,
 } from '../../../../shared/constants/metametrics';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
-import { ICON_NAMES } from '../../component-library/icon/deprecated';
+import { IconName } from '../../component-library';
 
 export default function AccountOptionsMenu({ anchorElement, onClose }) {
   const t = useI18nContext();
@@ -87,7 +87,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
             </span>
           ) : null
         }
-        iconName={ICON_NAMES.EXPORT}
+        iconName={IconName.Export}
       >
         {t(
           blockExplorerLinkText.firstPart,
@@ -109,7 +109,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
             global.platform.openExtensionInBrowser();
             onClose();
           }}
-          iconName={ICON_NAMES.EXPAND}
+          iconName={IconName.Expand}
         >
           {t('expandView')}
         </MenuItem>
@@ -127,7 +127,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
           });
           onClose();
         }}
-        iconName={ICON_NAMES.SCAN_BARCODE}
+        iconName={IconName.ScanBarcode}
       >
         {t('accountDetails')}
       </MenuItem>
@@ -144,7 +144,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
           history.push(CONNECTED_ROUTE);
           onClose();
         }}
-        iconName={ICON_NAMES.CONNECT}
+        iconName={IconName.Connect}
       >
         {t('connectedSites')}
       </MenuItem>
@@ -160,7 +160,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) {
             );
             onClose();
           }}
-          iconName={ICON_NAMES.TRASH}
+          iconName={IconName.Trash}
         >
           {t('removeAccount')}
         </MenuItem>

ui/components/app/menu-bar/menu-bar.js

@@ -14,8 +14,7 @@ import { CONNECTED_ACCOUNTS_ROUTE } from '../../../helpers/constants/routes';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { getOriginOfCurrentTab } from '../../../selectors';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
-import { ButtonIcon } from '../../component-library/button-icon/deprecated';
+import { ButtonIcon, IconName } from '../../component-library';
-import { ICON_NAMES } from '../../component-library/icon/deprecated';
 import AccountOptionsMenu from './account-options-menu';
 
 export default function MenuBar() {
@@ -41,7 +40,7 @@ export default function MenuBar() {
       <SelectedAccount />
       <span style={{ display: 'inherit' }} ref={ref}>
         <ButtonIcon
-          iconName={ICON_NAMES.MORE_VERTICAL}
+          iconName={IconName.MoreVertical}
           className="menu-bar__account-options"
           data-testid="account-options-menu-button"
           ariaLabel={t('accountOptions')}

ui/components/app/modals/contract-details-modal/contract-details-modal.js

@@ -25,8 +25,7 @@ import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
 import { getAddressBookEntry } from '../../../../selectors';
 import { TokenStandard } from '../../../../../shared/constants/transaction';
 import NftCollectionImage from '../../../ui/nft-collection-image/nft-collection-image';
-import { ButtonIcon } from '../../../component-library/button-icon/deprecated';
+import { ButtonIcon, IconName } from '../../../component-library';
-import { ICON_NAMES } from '../../../component-library/icon/deprecated';
 
 export default function ContractDetailsModal({
   onClose,
@@ -147,9 +146,7 @@ export default function ContractDetailsModal({
                   <ButtonIcon
                     display={DISPLAY.FLEX}
                     iconName={
-                      copiedTokenAddress
+                      copiedTokenAddress ? IconName.CopySuccess : IconName.Copy
-                        ? ICON_NAMES.COPY_SUCCESS
-                        : ICON_NAMES.COPY
                     }
                     onClick={() => handleCopyTokenAddress(tokenAddress)}
                     color={Color.iconMuted}
@@ -163,7 +160,7 @@ export default function ContractDetailsModal({
                 <Tooltip position="top" title={t('openInBlockExplorer')}>
                   <ButtonIcon
                     display={DISPLAY.FLEX}
-                    iconName={ICON_NAMES.EXPORT}
+                    iconName={IconName.Export}
                     color={Color.iconMuted}
                     onClick={() => {
                       const blockExplorerTokenLink = getAccountLink(
@@ -244,7 +241,7 @@ export default function ContractDetailsModal({
               <ButtonIcon
                 display={DISPLAY.FLEX}
                 iconName={
-                  copiedToAddress ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY
+                  copiedToAddress ? IconName.CopySuccess : IconName.Copy
                 }
                 onClick={() => handleCopyToAddress(toAddress)}
                 color={Color.iconMuted}
@@ -258,7 +255,7 @@ export default function ContractDetailsModal({
             <Tooltip position="top" title={t('openInBlockExplorer')}>
               <ButtonIcon
                 display={DISPLAY.FLEX}
-                iconName={ICON_NAMES.EXPORT}
+                iconName={IconName.Export}
                 color={Color.iconMuted}
                 onClick={() => {
                   const blockExplorerTokenLink = getAccountLink(

ui/components/app/modals/customize-nonce/customize-nonce.component.js

@@ -15,11 +15,11 @@ import Box from '../../../ui/box';
 import withModalProps from '../../../../helpers/higher-order-components/with-modal-props';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
-import { ButtonIcon } from '../../../component-library/button-icon/deprecated';
 import {
-  ICON_NAMES,
+  ButtonIcon,
-  ICON_SIZES,
+  ButtonIconSize,
-} from '../../../component-library/icon/deprecated';
+  IconName,
+} from '../../../component-library';
 
 const CustomizeNonce = ({
   hideModal,
@@ -58,9 +58,9 @@ const CustomizeNonce = ({
             {t('editNonceField')}
           </Typography>
           <ButtonIcon
-            iconName={ICON_NAMES.CLOSE}
+            iconName={IconName.Close}
             className="customize-nonce-modal__close"
-            size={ICON_SIZES.SM}
+            size={ButtonIconSize.Sm}
             ariaLabel={t('close')}
             onClick={hideModal}
           />

ui/components/app/modals/edit-approval-permission/edit-approval-permission.component.js

@@ -10,11 +10,11 @@ import {
   calcTokenAmount,
   toPrecisionWithoutTrailingZeros,
 } from '../../../../../shared/lib/transactions-controller-utils';
-import { ButtonIcon } from '../../../component-library/button-icon/deprecated';
 import {
-  ICON_SIZES,
+  ButtonIcon,
-  ICON_NAMES,
+  ButtonIconSize,
-} from '../../../component-library/icon/deprecated';
+  IconName,
+} from '../../../component-library';
 
 const MAX_UNSIGNED_256_INT = new BigNumber(2).pow(256).minus(1).toString(10);
 
@@ -63,8 +63,8 @@ export default class EditApprovalPermission extends PureComponent {
             {t('editPermission')}
           </div>
           <ButtonIcon
-            iconName={ICON_NAMES.CLOSE}
+            iconName={IconName.Close}
-            size={ICON_SIZES.LG}
+            size={ButtonIconSize.Lg}
             className="edit-approval-permission__header__close"
             onClick={hideModal}
           />

ui/components/app/modals/hold-to-reveal-modal/hold-to-reveal-modal.js

@@ -2,9 +2,13 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import withModalProps from '../../../../helpers/higher-order-components/with-modal-props';
 import Box from '../../../ui/box';
-import { Text, Button, BUTTON_TYPES } from '../../../component-library';
+import {
-import { ButtonIcon } from '../../../component-library/button-icon/deprecated';
+  Text,
-import { ICON_NAMES } from '../../../component-library/icon/deprecated';
+  Button,
+  BUTTON_TYPES,
+  ButtonIcon,
+  IconName,
+} from '../../../component-library';
 import {
   AlignItems,
   DISPLAY,
@@ -47,7 +51,7 @@ const HoldToRevealModal = ({ onLongPressed, hideModal }) => {
         <Text variant={TextVariant.headingSm}>{t('holdToRevealTitle')}</Text>
         <ButtonIcon
           className="hold-to-reveal-modal__close"
-          iconName={ICON_NAMES.CLOSE}
+          iconName={IconName.Close}
           size={Size.SM}
           onClick={handleCancel}
           ariaLabel={t('close')}

ui/components/app/modals/new-account-modal/new-account-modal.component.js

@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Button from '../../../ui/button/button.component';
-import { ButtonIcon } from '../../../component-library/button-icon/deprecated';
+import { ButtonIcon, IconName } from '../../../component-library';
-import { ICON_NAMES } from '../../../component-library/icon/deprecated';
 
 export default class NewAccountModal extends Component {
   static contextTypes = {
@@ -49,7 +48,7 @@ export default class NewAccountModal extends Component {
               className="new-account-modal__content__header-close"
               ariaLabel={t('close')}
               onClick={this.props.hideModal}
-              iconName={ICON_NAMES.CLOSE}
+              iconName={IconName.Close}
             />
           </div>
           <div className="new-account-modal__input-label">

ui/components/app/modals/transaction-confirmed/transaction-confirmed.component.js

@@ -1,11 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Modal from '../../modal';
-import {
+import { Icon, IconName, IconSize } from '../../../component-library';
-  Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../../component-library/icon/deprecated';
 import { IconColor } from '../../../../helpers/constants/design-system';
 
 export default class TransactionConfirmed extends PureComponent {
@@ -35,9 +31,9 @@ export default class TransactionConfirmed extends PureComponent {
       <Modal onSubmit={this.handleSubmit} submitText={t('ok')}>
         <div className="transaction-confirmed__content">
           <Icon
-            name={ICON_NAMES.CHECK}
+            name={IconName.Check}
             color={IconColor.successDefault}
-            size={ICON_SIZES.XL}
+            size={IconSize.Xl}
           />
           <div className="transaction-confirmed__title">
             {`${t('confirmed')}!`}

ui/components/app/network-display/network-display.js

@@ -18,11 +18,7 @@ import {
 import Chip from '../../ui/chip/chip';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { isNetworkLoading } from '../../../selectors';
-import {
+import { Icon, IconName, IconSize } from '../../component-library';
-  Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
 
 export default function NetworkDisplay({
   indicatorSize,
@@ -70,9 +66,7 @@ export default function NetworkDisplay({
         </LoadingIndicator>
       }
       rightIcon={
-        onClick ? (
+        onClick ? <Icon name={IconName.ArrowDown} size={IconSize.Xs} /> : null
-          <Icon name={ICON_NAMES.ARROW_DOWN} size={ICON_SIZES.XS} />
-        ) : null
       }
       label={
         networkType === NETWORK_TYPES.RPC

ui/components/app/nft-details/nft-details.js

@@ -53,8 +53,7 @@ import {
   TokenStandard,
 } from '../../../../shared/constants/transaction';
 import NftDefaultImage from '../nft-default-image';
-import { ButtonIcon } from '../../component-library/button-icon/deprecated';
+import { ButtonIcon, IconName } from '../../component-library';
-import { ICON_NAMES } from '../../component-library/icon/deprecated';
 import Tooltip from '../../ui/tooltip';
 import { decWEIToDecETH } from '../../../../shared/modules/conversion.utils';
 
@@ -427,7 +426,7 @@ export default function NftDetails({ nft }) {
                     handleAddressCopy(address);
                   }}
                   iconName={
-                    addressCopied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY
+                    addressCopied ? IconName.CopySuccess : IconName.Copy
                   }
                 />
               </Tooltip>

ui/components/app/nft-options/nft-options.js

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 
 import { I18nContext } from '../../../contexts/i18n';
 import { Menu, MenuItem } from '../../ui/menu';
-import { ButtonIcon } from '../../component-library/button-icon/deprecated';
+import { ButtonIcon, IconName } from '../../component-library';
-import { ICON_NAMES } from '../../component-library/icon/deprecated';
 import { Color } from '../../../helpers/constants/design-system';
 
 const NftOptions = ({ onRemove, onViewOnOpensea }) => {
@@ -15,7 +14,7 @@ const NftOptions = ({ onRemove, onViewOnOpensea }) => {
   return (
     <div ref={ref}>
       <ButtonIcon
-        iconName={ICON_NAMES.MORE_VERTICAL}
+        iconName={IconName.MoreVertical}
         className="nft-options__button"
         data-testid="nft-options__button"
         onClick={() => setNftOptionsOpen(true)}
@@ -31,7 +30,7 @@ const NftOptions = ({ onRemove, onViewOnOpensea }) => {
         >
           {onViewOnOpensea ? (
             <MenuItem
-              iconName={ICON_NAMES.EXPORT}
+              iconName={IconName.Export}
               data-testid="nft-options__view-on-opensea"
               onClick={() => {
                 setNftOptionsOpen(false);
@@ -42,7 +41,7 @@ const NftOptions = ({ onRemove, onViewOnOpensea }) => {
             </MenuItem>
           ) : null}
           <MenuItem
-            iconName={ICON_NAMES.TRASH}
+            iconName={IconName.Trash}
             data-testid="nft-item-remove"
             onClick={() => {
               setNftOptionsOpen(false);

ui/components/app/nfts-items/nfts-items.js

@@ -30,7 +30,7 @@ import { updateNftDropDownState } from '../../../store/actions';
 import { usePrevious } from '../../../hooks/usePrevious';
 import { getNftsDropdownState } from '../../../ducks/metamask/metamask';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
+import { Icon, IconName } from '../../component-library';
 import NftDefaultImage from '../nft-default-image';
 
 const width =
@@ -158,9 +158,7 @@ export default function NftsItems({
             </Box>
             <Box alignItems={AlignItems.flexEnd}>
               <Icon
-                name={
+                name={isExpanded ? IconName.ArrowDown : IconName.ArrowRight}
-                  isExpanded ? ICON_NAMES.ARROW_DOWN : ICON_NAMES.ARROW_RIGHT
-                }
                 color={Color.iconDefault}
               />
             </Box>

ui/components/app/permission-cell/permission-cell.js

@@ -11,12 +11,13 @@ import {
   TextColor,
   TextVariant,
 } from '../../../helpers/constants/design-system';
-import { AvatarIcon, Text } from '../../component-library';
 import {
+  AvatarIcon,
+  Text,
   Icon,
-  ICON_NAMES,
+  IconName,
-  ICON_SIZES,
+  IconSize,
-} from '../../component-library/icon/deprecated';
+} from '../../component-library';
 import { formatDate } from '../../../helpers/utils/util';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import Tooltip from '../../ui/tooltip';
@@ -32,24 +33,24 @@ const PermissionCell = ({
   const t = useI18nContext();
 
   let infoIconColor = IconColor.iconMuted;
-  let infoIcon = ICON_NAMES.INFO;
+  let infoIcon = IconName.Info;
-  let iconColor = Color.primaryDefault;
+  let iconColor = IconColor.primaryDefault;
   let iconBackgroundColor = Color.primaryMuted;
 
   if (!revoked && weight === 1) {
-    iconColor = Color.warningDefault;
+    iconColor = IconColor.warningDefault;
     iconBackgroundColor = Color.warningMuted;
     infoIconColor = IconColor.warningDefault;
-    infoIcon = ICON_NAMES.DANGER;
+    infoIcon = IconName.Danger;
   }
 
   if (dateApproved) {
-    iconColor = Color.iconMuted;
+    iconColor = IconColor.iconMuted;
     iconBackgroundColor = Color.backgroundAlternative;
   }
 
   if (revoked) {
-    iconColor = Color.iconMuted;
+    iconColor = IconColor.iconMuted;
     iconBackgroundColor = Color.backgroundAlternative;
   }
 
@@ -72,9 +73,9 @@ const PermissionCell = ({
         {typeof permissionIcon === 'string' ? (
           <AvatarIcon
             iconName={permissionIcon}
-            size={ICON_SIZES.MD}
+            size={IconSize.Md}
             iconProps={{
-              size: ICON_SIZES.SM,
+              size: IconSize.Sm,
             }}
             color={iconColor}
             backgroundColor={iconBackgroundColor}
@@ -108,7 +109,7 @@ const PermissionCell = ({
       </Box>
       <Box>
         <Tooltip html={<div>{description}</div>} position="bottom">
-          <Icon color={infoIconColor} name={infoIcon} size={ICON_SIZES.SM} />
+          <Icon color={infoIconColor} name={infoIcon} size={IconSize.Sm} />
         </Tooltip>
       </Box>
     </Box>

ui/components/app/selected-account/selected-account.component.js

@@ -6,11 +6,7 @@ import { shortenAddress } from '../../../helpers/utils/util';
 import Tooltip from '../../ui/tooltip';
 import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
 import { SECOND } from '../../../../shared/constants/time';
-import {
+import { Icon, IconName, IconSize } from '../../component-library';
-  Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
 import { IconColor } from '../../../helpers/constants/design-system';
 
 class SelectedAccount extends Component {
@@ -71,11 +67,9 @@ class SelectedAccount extends Component {
               <div className="selected-account__copy">
                 <Icon
                   name={
-                    this.state.copied
+                    this.state.copied ? IconName.CopySuccess : IconName.Copy
-                      ? ICON_NAMES.COPY_SUCCESS
-                      : ICON_NAMES.COPY
                   }
-                  size={ICON_SIZES.SM}
+                  size={IconSize.Sm}
                   color={IconColor.iconAlternative}
                 />
               </div>

ui/components/app/set-approval-for-all-warning/set-approval-for-all-warning.js

@@ -16,7 +16,7 @@ import {
 } from '../../../helpers/constants/design-system';
 import Identicon from '../../ui/identicon';
 import { shortenAddress } from '../../../helpers/utils/util';
-import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
+import { Icon, IconName } from '../../component-library';
 
 const SetApproveForAllWarning = ({
   collectionName,
@@ -62,7 +62,7 @@ const SetApproveForAllWarning = ({
         className="set-approval-for-all-warning__content__header"
       >
         <Icon
-          name={ICON_NAMES.DANGER}
+          name={IconName.Danger}
           className="set-approval-for-all-warning__content__header__warning-icon"
         />
         <Typography

ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js

@@ -17,7 +17,7 @@ import {
 } from '../../../../helpers/constants/design-system';
 import Identicon from '../../../ui/identicon';
 import { shortenAddress } from '../../../../helpers/utils/util';
-import { Icon, ICON_NAMES } from '../../../component-library/icon/deprecated';
+import { Icon, IconName } from '../../../component-library';
 
 const SignatureRequestOriginalWarning = ({
   senderAddress,
@@ -36,7 +36,7 @@ const SignatureRequestOriginalWarning = ({
         className="signature-request-warning__content__header"
       >
         <Icon
-          name={ICON_NAMES.DANGER}
+          name={IconName.Danger}
           color={IconColor.errorDefault}
           className="signature-request-warning__content__header__warning-icon"
         />

ui/components/app/signature-request-siwe/signature-request-siwe-icon/index.js

@@ -6,7 +6,7 @@ import {
   JustifyContent,
 } from '../../../../helpers/constants/design-system';
 import Box from '../../../ui/box';
-import { Icon, ICON_NAMES } from '../../../component-library/icon/deprecated';
+import { Icon, IconName } from '../../../component-library';
 
 const SignatureRequestSIWEIcon = () => {
   return (
@@ -17,7 +17,7 @@ const SignatureRequestSIWEIcon = () => {
       backgroundColor={Color.errorDefault}
       justifyContent={JustifyContent.center}
     >
-      <Icon name={ICON_NAMES.DANGER} color={Color.errorInverse} />
+      <Icon name={IconName.Danger} color={Color.errorInverse} />
     </Box>
   );
 };

ui/components/app/tab-bar/tab-bar.js

@@ -2,11 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import {
+import { Icon, IconName, IconSize } from '../../component-library';
-  Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../component-library/icon/deprecated';
 
 const TabBar = (props) => {
   const { tabs = [], onSelect, isActive } = props;
@@ -26,8 +22,8 @@ const TabBar = (props) => {
             <div className="tab-bar__tab__content__title">{content}</div>
           </div>
           <Icon
-            name={ICON_NAMES.ARROW_RIGHT}
+            name={IconName.ArrowRight}
-            size={ICON_SIZES.SM}
+            size={IconSize.Sm}
             className="tab-bar__tab__caret"
           />
         </button>

ui/components/app/tab-bar/tab-bar.stories.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
+import { Icon, IconName } from '../../component-library';
 import TabBar from '.';
 
 export default {
@@ -19,12 +19,12 @@ export default {
   args: {
     tabs: [
       {
-        icon: <Icon name={ICON_NAMES.SETTING} />,
+        icon: <Icon name={IconName.Setting} />,
         content: 'General',
         key: 'general',
       },
       {
-        icon: <Icon name={ICON_NAMES.BOOK} />,
+        icon: <Icon name={IconName.Book} />,
         content: 'Contacts',
         key: 'contacts',
       },
@@ -39,7 +39,7 @@ export default {
         key: 'securityAndPrivacy',
       },
       {
-        icon: <Icon name={ICON_NAMES.NOTIFICATION} />,
+        icon: <Icon name={IconName.Notification} />,
         content: 'Alerts',
         key: 'alerts',
       },

ui/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js

@@ -12,22 +12,18 @@ import {
   TRANSACTION_CANCEL_ATTEMPTED_EVENT,
   TRANSACTION_CANCEL_SUCCESS_EVENT,
 } from '../transaction-activity-log.constants';
-import {
+import { Icon, IconName, IconSize } from '../../../component-library';
-  Icon,
-  ICON_NAMES,
-  ICON_SIZES,
-} from '../../../component-library/icon/deprecated';
 import { Color } from '../../../../helpers/constants/design-system';
 
 export const ACTIVITY_ICONS = {
-  [TRANSACTION_CREATED_EVENT]: ICON_NAMES.ADD,
+  [TRANSACTION_CREATED_EVENT]: IconName.Add,
-  [TRANSACTION_SUBMITTED_EVENT]: ICON_NAMES.ARROW_UP,
+  [TRANSACTION_SUBMITTED_EVENT]: IconName.ArrowUp,
-  [TRANSACTION_RESUBMITTED_EVENT]: ICON_NAMES.PROGRAMMING_ARROWS,
+  [TRANSACTION_RESUBMITTED_EVENT]: IconName.ProgrammingArrows,
-  [TRANSACTION_CONFIRMED_EVENT]: ICON_NAMES.CHECK,
+  [TRANSACTION_CONFIRMED_EVENT]: IconName.Check,
-  [TRANSACTION_DROPPED_EVENT]: ICON_NAMES.CLOSE,
+  [TRANSACTION_DROPPED_EVENT]: IconName.Close,
-  [TRANSACTION_ERRORED_EVENT]: ICON_NAMES.DANGER,
+  [TRANSACTION_ERRORED_EVENT]: IconName.Danger,
-  [TRANSACTION_CANCEL_ATTEMPTED_EVENT]: ICON_NAMES.CLOSE,
+  [TRANSACTION_CANCEL_ATTEMPTED_EVENT]: IconName.Close,
-  [TRANSACTION_CANCEL_SUCCESS_EVENT]: ICON_NAMES.CLOSE,
+  [TRANSACTION_CANCEL_SUCCESS_EVENT]: IconName.Close,
 };
 
 export default class TransactionActivityLogIcon extends PureComponent {
@@ -47,7 +43,7 @@ export default class TransactionActivityLogIcon extends PureComponent {
     return (
       <div className={classnames('transaction-activity-log-icon', className)}>
         {icon ? (
-          <Icon name={icon} color={Color.iconDefault} size={ICON_SIZES.SM} />
+          <Icon name={icon} color={Color.iconDefault} size={IconSize.Sm} />
         ) : null}
       </div>
     );

ui/components/app/transaction-decoding/components/ui/copy-raw-data/copy-raw-data.component.js

@@ -4,10 +4,7 @@ import Tooltip from '../../../../../ui/tooltip/tooltip';
 import { I18nContext } from '../../../../../../contexts/i18n';
 
 import { useCopyToClipboard } from '../../../../../../hooks/useCopyToClipboard';
-import {
+import { Icon, IconName } from '../../../../../component-library';
-  Icon,
-  ICON_NAMES,
-} from '../../../../../component-library/icon/deprecated';
 import { IconColor } from '../../../../../../helpers/constants/design-system';
 
 const CopyRawData = ({ data }) => {
@@ -25,7 +22,7 @@ const CopyRawData = ({ data }) => {
         >
           <div className="copy-raw-data__icon">
             <Icon
-              name={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
+              name={copied ? IconName.CopySuccess : IconName.Copy}
               color={IconColor.iconDefault}
             />
           </div>

ui/components/app/wallet-overview/eth-overview.js

@@ -39,9 +39,10 @@ import { startNewDraftTransaction } from '../../../ducks/send';
 import { AssetType } from '../../../../shared/constants/transaction';
 import {
   ButtonIcon,
-  BUTTON_ICON_SIZES,
+  ButtonIconSize,
-} from '../../component-library/button-icon/deprecated';
+  Icon,
-import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
+  IconName,
+} from '../../component-library';
 import { IconColor } from '../../../helpers/constants/design-system';
 import useRamps from '../../../hooks/experiences/useRamps';
 import WalletOverview from './wallet-overview';
@@ -101,9 +102,9 @@ const EthOverview = ({ className }) => {
                   className="eth-overview__portfolio-button"
                   data-testid="home__portfolio-site"
                   color={IconColor.primaryDefault}
-                  iconName={ICON_NAMES.DIAGRAM}
+                  iconName={IconName.Diagram}
                   ariaLabel={t('portfolio')}
-                  size={BUTTON_ICON_SIZES.LG}
+                  size={ButtonIconSize.Lg}
                   onClick={() => {
                     const portfolioUrl = process.env.PORTFOLIO_URL;
                     global.platform.openTab({
@@ -147,9 +148,7 @@ const EthOverview = ({ className }) => {
         <>
           <IconButton
             className="eth-overview__button"
-            Icon={
+            Icon={<Icon name={IconName.Add} color={IconColor.primaryInverse} />}
-              <Icon name={ICON_NAMES.ADD} color={IconColor.primaryInverse} />
-            }
             disabled={!isBuyableChain}
             data-testid="eth-overview-buy"
             label={t('buy')}
@@ -170,7 +169,7 @@ const EthOverview = ({ className }) => {
             data-testid="eth-overview-send"
             Icon={
               <Icon
-                name={ICON_NAMES.ARROW_2_UP_RIGHT}
+                name={IconName.Arrow2UpRight}
                 color={IconColor.primaryInverse}
               />
             }
@@ -197,7 +196,7 @@ const EthOverview = ({ className }) => {
             disabled={!isSwapsChain}
             Icon={
               <Icon
-                name={ICON_NAMES.SWAP_HORIZONTAL}
+                name={IconName.SwapHorizontal}
                 color={IconColor.primaryInverse}
               />
             }
@@ -239,7 +238,7 @@ const EthOverview = ({ className }) => {
             disabled={!isBridgeChain}
             data-testid="eth-overview-bridge"
             Icon={
-              <Icon name={ICON_NAMES.BRIDGE} color={IconColor.primaryInverse} />
+              <Icon name={IconName.Bridge} color={IconColor.primaryInverse} />
             }
             label={t('bridge')}
             onClick={() => {

ui/components/app/wallet-overview/token-overview.js

@@ -35,7 +35,7 @@ import {
 import { AssetType } from '../../../../shared/constants/transaction';
 import useRamps from '../../../hooks/experiences/useRamps';
 
-import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
+import { Icon, IconName } from '../../component-library';
 import { IconColor } from '../../../helpers/constants/design-system';
 import WalletOverview from './wallet-overview';
 
@@ -93,9 +93,7 @@ const TokenOverview = ({ className, token }) => {
         <>
           <IconButton
             className="token-overview__button"
-            Icon={
+            Icon={<Icon name={IconName.Add} color={IconColor.primaryInverse} />}
-              <Icon name={ICON_NAMES.ADD} color={IconColor.primaryInverse} />
-            }
             label={t('buy')}
             data-testid="token-overview-buy"
             onClick={() => {
@@ -139,7 +137,7 @@ const TokenOverview = ({ className, token }) => {
             }}
             Icon={
               <Icon
-                name={ICON_NAMES.ARROW_2_UP_RIGHT}
+                name={IconName.Arrow2UpRight}
                 color={IconColor.primaryInverse}
               />
             }
@@ -152,7 +150,7 @@ const TokenOverview = ({ className, token }) => {
             disabled={!isSwapsChain}
             Icon={
               <Icon
-                name={ICON_NAMES.SWAP_HORIZONTAL}
+                name={IconName.SwapHorizontal}
                 color={IconColor.primaryInverse}
               />
             }
@@ -201,10 +199,7 @@ const TokenOverview = ({ className, token }) => {
           <IconButton
             className="eth-overview__button"
             Icon={
-              <Icon
+              <Icon name={IconName.Diagram} color={IconColor.primaryInverse} />
-                name={ICON_NAMES.DIAGRAM}
-                color={IconColor.primaryInverse}
-              />
             }
             label={t('portfolio')}
             data-testid="home__portfolio-site"

ui/components/component-library/avatar-base/avatar-base.js

@@ -6,6 +6,7 @@ import {
   BackgroundColor,
   BorderColor,
   TextColor,
+  IconColor,
   DISPLAY,
   JustifyContent,
   AlignItems,
@@ -81,7 +82,10 @@ AvatarBase.propTypes = {
    * The color of the text inside the AvatarBase
    * Defaults to TextColor.textDefault
    */
-  color: PropTypes.oneOf(Object.values(TextColor)),
+  color: PropTypes.oneOf([
+    ...Object.values(TextColor),
+    ...Object.values(IconColor),
+  ]),
   /**
    * Additional classNames to be added to the AvatarToken
    */

ui/components/component-library/avatar-icon/avatar-icon.js

@@ -73,7 +73,10 @@ AvatarIcon.propTypes = {
    * The color of the text inside the AvatarIcon
    * Defaults to TextColor.primaryDefault
    */
-  color: PropTypes.oneOf(Object.values(TextColor)),
+  color: PropTypes.oneOf([
+    ...Object.values(TextColor),
+    ...Object.values(IconColor),
+  ]),
   /**
    * Additional classNames to be added to the AvatarIcon
    */