Migrating Icon to typescript and deprecating JS component (#18431)

* Migrating Icon to typescript and deprecating JS component

* gw suggestions (#18434)

---------

Co-authored-by: Garrett Bear <gwhisten@gmail.com>

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

@@ -37,7 +37,11 @@ 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 { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
+import {
+  Icon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../component-library/icon/deprecated';
 import KeyRingLabel from './keyring-label';
 
 export function AccountMenuItem(props) {

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

@@ -36,7 +36,12 @@ 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 { Icon, ICON_NAMES, ICON_SIZES, Text } from '../../component-library';
+import { Text } from '../../component-library';
+import {
+  Icon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../component-library/icon/deprecated';
 import { MetaMetricsNetworkEventSource } from '../../../../shared/constants/metametrics';
 
 const AddNetwork = () => {

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

@@ -10,7 +10,6 @@ const BSC_IMAGE_URL = './images/bsc-filled.svg';
 
 export default {
   title: 'Components/App/AddNetwork',
-
   argTypes: {
     onBackClick: {
       action: 'onBackClick',

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';
+import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
 import ApproveContentCard from './approve-content-card';
 
 export default {

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

@@ -16,7 +16,11 @@ 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 { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
+import {
+  Icon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../component-library/icon/deprecated';
 import Box from '../../ui/box/box';
 
 const AssetListItem = ({

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

@@ -14,7 +14,11 @@ import {
 import { BETA_BUGS_URL } from '../../../helpers/constants/beta';
 
 import { hideBetaHeader } from '../../../store/actions';
-import { ButtonIcon, ICON_NAMES, ICON_SIZES } from '../../component-library';
+import { ButtonIcon } from '../../component-library';
+import {
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../component-library/icon/deprecated';
 
 const BetaHeader = () => {
   const t = useI18nContext();

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';
+import { Icon, ICON_NAMES } from '../../../component-library/icon/deprecated';
 
 export default function ConfirmPageContainerHeader({
   onEdit,

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

@@ -14,7 +14,12 @@ import {
   AlignItems,
   IconColor,
 } from '../../../helpers/constants/design-system';
-import { Text, Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
+import {
+  Icon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../component-library/icon/deprecated';
+import { Text } from '../../component-library';
 
 const ConfirmationWarningModal = ({ onSubmit, onCancel }) => {
   const t = useI18nContext();

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

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
 import { Menu } from '../../../ui/menu';
-import { ButtonIcon, ICON_NAMES } from '../../../component-library';
+import { ICON_NAMES } from '../../../component-library/icon/deprecated';
+import { ButtonIcon } from '../../../component-library';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 
 const ConnectedAccountsListOptions = ({

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';
+import { ICON_NAMES } from '../../component-library/icon/deprecated';
 import { MenuItem } from '../../ui/menu';
 import ConnectedAccountsListItem from './connected-accounts-list-item';
 import ConnectedAccountsListOptions from './connected-accounts-list-options';

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

@@ -8,7 +8,11 @@ import {
   DISPLAY,
   TypographyVariant,
 } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
+import {
+  Icon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../component-library/icon/deprecated';
 
 export const CustomSpendingCapTooltip = ({
   tooltipContentText,

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

@@ -7,7 +7,8 @@ import { I18nContext } from '../../../contexts/i18n';
 import Box from '../../ui/box';
 import FormField from '../../ui/form-field';
 import Typography from '../../ui/typography';
-import { ButtonLink, Icon, ICON_NAMES } from '../../component-library';
+import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
+import { ButtonLink } from '../../component-library';
 import {
   AlignItems,
   DISPLAY,

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

@@ -32,12 +32,13 @@ import {
   ADD_POPULAR_CUSTOM_NETWORK,
   ADVANCED_ROUTE,
 } from '../../../helpers/constants/routes';
+import { ButtonIcon } from '../../component-library';
 import {
   Icon,
-  ButtonIcon,
   ICON_NAMES,
   ICON_SIZES,
-} from '../../component-library';
+} from '../../component-library/icon/deprecated';
+
 import { Dropdown, DropdownMenuItem } from './dropdown';
 
 // classes from nodes of the toggle element.

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

@@ -14,7 +14,11 @@ 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 { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
+import {
+  Icon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../component-library/icon/deprecated';
 
 export default function EditGasFeeButton({ userAcknowledgedGasMissing }) {
   const t = useI18nContext();

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

@@ -14,7 +14,11 @@ import {
   Color,
 } from '../../../../helpers/constants/design-system';
 import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
-import { Icon, ICON_NAMES, ICON_SIZES } from '../../../component-library';
+import {
+  Icon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../../component-library/icon/deprecated';
 
 export const Copyable = ({ text }) => {
   const [copied, handleCopy] = useCopyToClipboard();

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

@@ -20,12 +20,11 @@ import {
   getSnapName,
   removeSnapIdPrefix,
 } from '../../../../helpers/utils/util';
+import { Text, ButtonIcon } from '../../../component-library';
 import {
   ICON_NAMES,
   ICON_SIZES,
-  Text,
-  ButtonIcon,
-} from '../../../component-library';
+} from '../../../component-library/icon/deprecated';
 import { getTargetSubjectMetadata } from '../../../../selectors';
 import SnapAvatar from '../snap-avatar';
 

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

@@ -15,11 +15,13 @@ import {
   AvatarFavicon,
   BadgeWrapper,
   BadgeWrapperPosition,
-  ICON_NAMES,
-  ICON_SIZES,
   AvatarIcon,
   AvatarBase,
 } from '../../../component-library';
+import {
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../../component-library/icon/deprecated';
 import { getTargetSubjectMetadata } from '../../../../selectors';
 
 const SnapAvatar = ({ snapId, className }) => {

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';
+import { Icon, ICON_NAMES } from '../../../component-library/icon/deprecated';
 
 export default function SnapContentFooter({ snapName, snapId }) {
   const t = useI18nContext();

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

@@ -12,12 +12,11 @@ import {
   TextColor,
 } from '../../../../helpers/constants/design-system';
 import Box from '../../../ui/box';
+import { AvatarIcon, Text } from '../../../component-library';
 import {
-  AvatarIcon,
   ICON_NAMES,
   ICON_SIZES,
-  Text,
-} from '../../../component-library';
+} from '../../../component-library/icon/deprecated';
 import {
   DelineatorType,
   getDelineatorTitle,

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

@@ -15,7 +15,8 @@ import {
 } from '../../../../helpers/constants/design-system';
 import Popover from '../../../ui/popover';
 import Button from '../../../ui/button';
-import { AvatarIcon, ICON_NAMES, Text } from '../../../component-library';
+import { AvatarIcon, Text } from '../../../component-library';
+import { ICON_NAMES } from '../../../component-library/icon/deprecated';
 import Box from '../../../ui/box/box';
 
 /**

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';
+import { ICON_NAMES } from '../../component-library/icon/deprecated';
 
 export default function AccountOptionsMenu({ anchorElement, onClose }) {
   const t = useI18nContext();

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

@@ -14,7 +14,8 @@ import { CONNECTED_ACCOUNTS_ROUTE } from '../../../helpers/constants/routes';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { getOriginOfCurrentTab } from '../../../selectors';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
-import { ButtonIcon, ICON_NAMES } from '../../component-library';
+import { ButtonIcon } from '../../component-library';
+import { ICON_NAMES } from '../../component-library/icon/deprecated';
 import { GlobalMenu } from '../../multichain/global-menu';
 import AccountOptionsMenu from './account-options-menu';
 

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

@@ -25,7 +25,8 @@ 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, ICON_NAMES } from '../../../component-library';
+import { ButtonIcon } from '../../../component-library';
+import { ICON_NAMES } from '../../../component-library/icon/deprecated';
 
 export default function ContractDetailsModal({
   onClose,

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

@@ -15,7 +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, ICON_NAMES, ICON_SIZES } from '../../../component-library';
+import { ButtonIcon } from '../../../component-library';
+import {
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../../component-library/icon/deprecated';
 
 const CustomizeNonce = ({
   hideModal,

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

@@ -10,7 +10,11 @@ import {
   calcTokenAmount,
   toPrecisionWithoutTrailingZeros,
 } from '../../../../../shared/lib/transactions-controller-utils';
-import { ButtonIcon, ICON_SIZES, ICON_NAMES } from '../../../component-library';
+import { ButtonIcon } from '../../../component-library';
+import {
+  ICON_SIZES,
+  ICON_NAMES,
+} from '../../../component-library/icon/deprecated';
 
 const MAX_UNSIGNED_256_INT = new BigNumber(2).pow(256).minus(1).toString(10);
 

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

@@ -7,8 +7,8 @@ import {
   Button,
   BUTTON_TYPES,
   ButtonIcon,
-  ICON_NAMES,
 } from '../../../component-library';
+import { ICON_NAMES } from '../../../component-library/icon/deprecated';
 import {
   AlignItems,
   DISPLAY,

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

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Button from '../../../ui/button/button.component';
-import { ButtonIcon, ICON_NAMES } from '../../../component-library';
+import { ButtonIcon } from '../../../component-library';
+import { ICON_NAMES } from '../../../component-library/icon/deprecated';
 
 export default class NewAccountModal extends Component {
   static contextTypes = {

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

@@ -1,7 +1,11 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Modal from '../../modal';
-import { Icon, ICON_NAMES, ICON_SIZES } from '../../../component-library';
+import {
+  Icon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../../component-library/icon/deprecated';
 import { IconColor } from '../../../../helpers/constants/design-system';
 
 export default class TransactionConfirmed extends PureComponent {

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

@@ -18,7 +18,11 @@ import {
 import Chip from '../../ui/chip/chip';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { isNetworkLoading } from '../../../selectors';
-import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
+import {
+  Icon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../component-library/icon/deprecated';
 
 export default function NetworkDisplay({
   indicatorSize,

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

@@ -53,7 +53,8 @@ import {
   TokenStandard,
 } from '../../../../shared/constants/transaction';
 import NftDefaultImage from '../nft-default-image';
-import { ButtonIcon, ICON_NAMES } from '../../component-library';
+import { ButtonIcon } from '../../component-library';
+import { ICON_NAMES } from '../../component-library/icon/deprecated';
 import Tooltip from '../../ui/tooltip';
 import { decWEIToDecETH } from '../../../../shared/modules/conversion.utils';
 

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

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 
 import { I18nContext } from '../../../contexts/i18n';
 import { Menu, MenuItem } from '../../ui/menu';
-import { ButtonIcon, ICON_NAMES } from '../../component-library';
+import { ButtonIcon } from '../../component-library';
+import { ICON_NAMES } from '../../component-library/icon/deprecated';
 import { Color } from '../../../helpers/constants/design-system';
 
 const NftOptions = ({ onRemove, onViewOnOpensea }) => {

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';
+import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
 import NftDefaultImage from '../nft-default-image';
 
 const width =

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

@@ -11,13 +11,12 @@ import {
   TextColor,
   TextVariant,
 } from '../../../helpers/constants/design-system';
+import { AvatarIcon, Text } from '../../component-library';
 import {
-  AvatarIcon,
   Icon,
   ICON_NAMES,
   ICON_SIZES,
-  Text,
-} from '../../component-library';
+} from '../../component-library/icon/deprecated';
 import { formatDate } from '../../../helpers/utils/util';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import Tooltip from '../../ui/tooltip';

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

@@ -6,7 +6,11 @@ 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 { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
+import {
+  Icon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../component-library/icon/deprecated';
 import { IconColor } from '../../../helpers/constants/design-system';
 
 class SelectedAccount extends Component {

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';
+import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
 
 const SetApproveForAllWarning = ({
   collectionName,

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';
+import { Icon, ICON_NAMES } from '../../../component-library/icon/deprecated';
 
 const SignatureRequestOriginalWarning = ({
   senderAddress,

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';
+import { Icon, ICON_NAMES } from '../../../component-library/icon/deprecated';
 
 const SignatureRequestSIWEIcon = () => {
   return (

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

@@ -2,7 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
+import {
+  Icon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../component-library/icon/deprecated';
 
 const TabBar = (props) => {
   const { tabs = [], onSelect, isActive } = props;

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';
+import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
 import TabBar from '.';
 
 export default {

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

@@ -12,7 +12,11 @@ import {
   TRANSACTION_CANCEL_ATTEMPTED_EVENT,
   TRANSACTION_CANCEL_SUCCESS_EVENT,
 } from '../transaction-activity-log.constants';
-import { Icon, ICON_NAMES, ICON_SIZES } from '../../../component-library';
+import {
+  Icon,
+  ICON_NAMES,
+  ICON_SIZES,
+} from '../../../component-library/icon/deprecated';
 import { Color } from '../../../../helpers/constants/design-system';
 
 export const ACTIVITY_ICONS = {

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

@@ -4,7 +4,10 @@ import Tooltip from '../../../../../ui/tooltip/tooltip';
 import { I18nContext } from '../../../../../../contexts/i18n';
 
 import { useCopyToClipboard } from '../../../../../../hooks/useCopyToClipboard';
-import { Icon, ICON_NAMES } from '../../../../../component-library';
+import {
+  Icon,
+  ICON_NAMES,
+} from '../../../../../component-library/icon/deprecated';
 import { IconColor } from '../../../../../../helpers/constants/design-system';
 
 const CopyRawData = ({ data }) => {

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

@@ -37,12 +37,8 @@ import {
 import Spinner from '../../ui/spinner';
 import { startNewDraftTransaction } from '../../../ducks/send';
 import { AssetType } from '../../../../shared/constants/transaction';
-import {
-  ButtonIcon,
-  BUTTON_ICON_SIZES,
-  Icon,
-  ICON_NAMES,
-} from '../../component-library';
+import { ButtonIcon, BUTTON_ICON_SIZES } from '../../component-library';
+import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
 import { IconColor } from '../../../helpers/constants/design-system';
 import useRamps from '../../../hooks/experiences/useRamps';
 import WalletOverview from './wallet-overview';

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';
+import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
 import { IconColor } from '../../../helpers/constants/design-system';
 import WalletOverview from './wallet-overview';
 

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';
+import { Icon, ICON_NAMES } from '../icon/deprecated';
 import README from './README.mdx';
 import { AvatarBase } from './avatar-base';
 import { AVATAR_BASE_SIZES } from './avatar-base.constants';

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';
+import { ICON_NAMES, Icon } from '../icon/deprecated';
 import {
   BorderColor,
   Size,

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';
+import { Icon, ICON_NAMES } from '../icon/deprecated';
 import { AvatarBase } from '../avatar-base';
 
 import { AVATAR_ICON_SIZES } from './avatar-icon.constants';

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 '..';
+import { ICON_NAMES } from '../icon/deprecated';
 
 import README from './README.mdx';
 import { AvatarIcon, AVATAR_ICON_SIZES } from '.';

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 '..';
+import { ICON_NAMES } from '../icon/deprecated';
 import {
   BackgroundColor,
   IconColor,

ui/components/component-library/badge-wrapper/README.mdx

@@ -113,7 +113,8 @@ import {
   BadgeWrapper,
   BadgeWrapperAnchorElementShape,
   Icon,
-  ICON_NAMES,
+  IconSize,
+  IconName,
   Tag,
 } from '../../component-library';
 
@@ -141,8 +142,8 @@ import {
   }
 >
   <Icon
-    name={ICON_NAMES.GLOBAL}
-    size={Size.XL}
+    name={IconName.Global}
+    size={IconSize.Xl}
     color={IconColor.iconAlternative}
   />
 </BadgeWrapper>

ui/components/component-library/badge-wrapper/badge-wrapper.stories.tsx

@@ -19,7 +19,8 @@ import {
   AvatarNetwork,
   AvatarToken,
   Icon,
-  ICON_NAMES,
+  IconName,
+  IconSize,
   Tag,
 } from '..';
 import {
@@ -165,8 +166,8 @@ export const Badge = () => (
       }
     >
       <Icon
-        name={ICON_NAMES.GLOBAL}
-        size={Size.XL}
+        name={IconName.Global}
+        size={IconSize.Xl}
         color={IconColor.iconAlternative}
       />
     </BadgeWrapper>

ui/components/component-library/banner-alert/banner-alert.js

@@ -2,7 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import { BannerBase, Icon, ICON_NAMES } from '..';
+import { Icon, ICON_NAMES } from '../icon/deprecated';
+import { BannerBase } from '..';
 
 import {
   BackgroundColor,

ui/components/component-library/banner-alert/banner-alert.stories.js

@@ -7,7 +7,8 @@ import {
   Size,
 } from '../../../helpers/constants/design-system';
 import Box from '../../ui/box/box';
-import { ICON_NAMES, ButtonLink, ButtonPrimary } from '..';
+import { ButtonLink, ButtonPrimary } from '..';
+import { ICON_NAMES } from '../icon/deprecated';
 import README from './README.mdx';
 import { BannerAlert, BANNER_ALERT_SEVERITIES } from '.';
 

ui/components/component-library/banner-base/README.mdx

@@ -128,7 +128,8 @@ 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, Icon, ICON_NAMES } from '../../component-library';
+import { BannerBase } from '../../component-library';
+import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
 
 <BannerBase
   title="Start accessory demo"

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-
-import { ButtonIcon, ButtonLink, ICON_NAMES, Text } from '..';
+import { ButtonIcon, ButtonLink, Text } from '..';
+import { ICON_NAMES } from '../icon/deprecated';
 
 import Box from '../../ui/box';
 

ui/components/component-library/banner-base/banner-base.stories.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { useState } from '@storybook/addons';
 import { Size } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES, ButtonLink, ButtonPrimary } from '..';
+import { ButtonLink, ButtonPrimary } from '..';
+import { Icon, ICON_NAMES } from '../icon/deprecated';
 import { BannerBase } from './banner-base';
 import README from './README.mdx';
 

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 '..';
+import { Icon, ICON_NAMES } from '../icon/deprecated';
 import { BannerBase } from './banner-base';
 
 describe('BannerBase', () => {

ui/components/component-library/banner-tip/banner-tip.stories.js

@@ -5,7 +5,8 @@ import {
   Size,
 } from '../../../helpers/constants/design-system';
 import Box from '../../ui/box/box';
-import { ButtonLink, ButtonPrimary, Icon, ICON_NAMES } from '..';
+import { Icon, ICON_NAMES } from '../icon/deprecated';
+import { ButtonLink, ButtonPrimary } from '..';
 import README from './README.mdx';
 import { BannerTip, BannerTipLogoType } from '.';
 

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';
+import { Icon, ICON_NAMES } from '../icon/deprecated';
 import { Text } from '../text';
 
 import {

ui/components/component-library/button-base/button-base.stories.js

@@ -7,7 +7,8 @@ import {
   Size,
 } from '../../../helpers/constants/design-system';
 import Box from '../../ui/box/box';
-import { ICON_NAMES, TextDirection } from '..';
+import { TextDirection } from '..';
+import { ICON_NAMES } from '../icon/deprecated';
 import { BUTTON_BASE_SIZES } from './button-base.constants';
 import { ButtonBase } from './button-base';
 import README from './README.mdx';

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 '..';
+import { ICON_NAMES } from '../icon/deprecated';
 import { BUTTON_BASE_SIZES } from './button-base.constants';
 import { ButtonBase } from './button-base';
 

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';
+import { Icon, ICON_NAMES } from '../icon/deprecated';
 
 import { BUTTON_ICON_SIZES } from './button-icon.constants';
 

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';
+import { ICON_NAMES } from '../icon/deprecated';
 import { BUTTON_ICON_SIZES } from './button-icon.constants';
 import { ButtonIcon } from './button-icon';
 import README from './README.mdx';

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 '..';
+import { ICON_NAMES } from '../icon/deprecated';
 import { BUTTON_ICON_SIZES } from './button-icon.constants';
 import { ButtonIcon } from './button-icon';
 

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';
+import { ICON_NAMES } from '../icon/deprecated';
 import { Text } from '../text';
 import { ButtonLink } from './button-link';
 import { BUTTON_LINK_SIZES } from './button-link.constants';

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 '..';
+import { ICON_NAMES } from '../icon/deprecated';
 import { ButtonLink } from './button-link';
 import { BUTTON_LINK_SIZES } from './button-link.constants';
 

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';
+import { ICON_NAMES } from '../icon/deprecated';
 import { ButtonPrimary } from './button-primary';
 
 import README from './README.mdx';

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 '..';
+import { ICON_NAMES } from '../icon/deprecated';
 import { ButtonPrimary } from './button-primary';
 import { BUTTON_PRIMARY_SIZES } from './button-primary.constants';
 

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';
+import { ICON_NAMES } from '../icon/deprecated';
 import { ButtonSecondary } from './button-secondary';
 import { BUTTON_SECONDARY_SIZES } from './button-secondary.constants';
 import README from './README.mdx';

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 '..';
+import { ICON_NAMES } from '../icon/deprecated';
 import { ButtonSecondary } from './button-secondary';
 import { BUTTON_SECONDARY_SIZES } from './button-secondary.constants';
 

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';
+import { ICON_NAMES } from '../icon/deprecated';
 import { BUTTON_LINK_SIZES } from '../button-link/button-link.constants';
 import Box from '../../ui/box/box';
 import { Text } from '../text';

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 '..';
+import { ICON_NAMES } from '../icon/deprecated';
 import { BUTTON_SIZES, BUTTON_TYPES } from './button.constants';
 import { Button } from './button';
 

ui/components/component-library/form-text-field/README.mdx

@@ -264,12 +264,11 @@ import {
 
 import Box from '../../ui/box/box';
 
+import { Icon, ICON_NAMES } from '../icon/deprecated'
 import {
   ButtonLink,
   FormTextField,
   HelpText,
-  ICON_NAMES,
-  Icon,
   Label,
   TEXT_FIELD_TYPES,
   Text,

ui/components/component-library/form-text-field/form-text-field.stories.js

@@ -12,14 +12,12 @@ import {
 } from '../../../helpers/constants/design-system';
 
 import Box from '../../ui/box/box';
-
+import { Icon, ICON_NAMES } from '../icon/deprecated';
 import {
   ButtonLink,
   ButtonPrimary,
   ButtonSecondary,
   HelpText,
-  Icon,
-  ICON_NAMES,
   Label,
   Text,
   TEXT_FIELD_SIZES,

ui/components/component-library/header-base/README.mdx

@@ -52,7 +52,12 @@ Use the `startAccessoryWrapperProps` prop to customize the wrapper element aroun
 </Canvas>
 
 ```jsx
-import { HeaderBase, Text } from '../../component-library';
+import {
+  HeaderBase,
+  Text,
+  ButtonIcon,
+  IconName,
+} from '../../component-library';
 import {
   TEXT_ALIGN,
   TextVariant,
@@ -62,7 +67,7 @@ import {
   startAccessory={
     <ButtonIcon
       size={BUTTON_ICON_SIZES.SM}
-      iconName={ICON_NAMES.ARROW_LEFT}
+      iconName={IconName.ArrowLeft}
       ariaLabel="back"
     />
   }
@@ -84,7 +89,13 @@ Use the `endAccessoryWrapperProps` prop to customize the wrapper element around
 </Canvas>
 
 ```jsx
-import { HeaderBase, Text } from '../../component-library';
+import {
+  ButtonIcon,
+  BUTTON_ICON_SIZES,
+  HeaderBase,
+  IconName,
+  Text,
+} from '../../component-library';
 import {
   TEXT_ALIGN,
   TextVariant,
@@ -94,7 +105,7 @@ import {
   endAccessory={
     <ButtonIcon
       size={BUTTON_ICON_SIZES.SM}
-      iconName={ICON_NAMES.CLOSE}
+      iconName={IconName.Close}
       ariaLabel="close"
     />
   }

ui/components/component-library/header-base/header-base.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import Box from '../../ui/box';
 import {
-  ICON_NAMES,
+  IconName,
   Button,
   ButtonIcon,
   BUTTON_ICON_SIZES,
@@ -43,14 +43,14 @@ DefaultStory.args = {
   startAccessory: (
     <ButtonIcon
       size={BUTTON_ICON_SIZES.SM}
-      iconName={ICON_NAMES.ARROW_LEFT}
+      iconName={IconName.ArrowLeft}
       ariaLabel="back"
     />
   ),
   endAccessory: (
     <ButtonIcon
       size={BUTTON_ICON_SIZES.SM}
-      iconName={ICON_NAMES.CLOSE}
+      iconName={IconName.Close}
       ariaLabel="close"
     />
   ),
@@ -75,7 +75,7 @@ export const StartAccessory = (args) => {
       startAccessory={
         <ButtonIcon
           size={BUTTON_ICON_SIZES.SM}
-          iconName={ICON_NAMES.ARROW_LEFT}
+          iconName={IconName.ArrowLeft}
           ariaLabel="back"
         />
       }
@@ -95,7 +95,7 @@ export const EndAccessory = (args) => {
       endAccessory={
         <ButtonIcon
           size={BUTTON_ICON_SIZES.SM}
-          iconName={ICON_NAMES.CLOSE}
+          iconName={IconName.Close}
           ariaLabel="close"
         />
       }
@@ -130,7 +130,7 @@ export const UseCaseDemos = (args) => (
           <ButtonIcon
             backgroundColor={BackgroundColor.goerli}
             size={BUTTON_ICON_SIZES.SM}
-            iconName={ICON_NAMES.CLOSE}
+            iconName={IconName.Close}
             ariaLabel="close"
           />
         }
@@ -153,7 +153,7 @@ export const UseCaseDemos = (args) => (
           <ButtonIcon
             backgroundColor={BackgroundColor.successAlternative}
             size={BUTTON_ICON_SIZES.SM}
-            iconName={ICON_NAMES.ARROW_LEFT}
+            iconName={IconName.ArrowLeft}
             ariaLabel="back"
           />
         }
@@ -176,7 +176,7 @@ export const UseCaseDemos = (args) => (
           <ButtonIcon
             backgroundColor={BackgroundColor.successAlternative}
             size={BUTTON_ICON_SIZES.SM}
-            iconName={ICON_NAMES.ARROW_LEFT}
+            iconName={IconName.ArrowLeft}
             ariaLabel="back"
           />
         }
@@ -184,7 +184,7 @@ export const UseCaseDemos = (args) => (
           <ButtonIcon
             backgroundColor={BackgroundColor.goerli}
             size={BUTTON_ICON_SIZES.SM}
-            iconName={ICON_NAMES.CLOSE}
+            iconName={IconName.Close}
             ariaLabel="close"
           />
         }
@@ -216,7 +216,7 @@ export const UseCaseDemos = (args) => (
           <ButtonIcon
             backgroundColor={BackgroundColor.goerli}
             size={BUTTON_ICON_SIZES.SM}
-            iconName={ICON_NAMES.CLOSE}
+            iconName={IconName.Close}
             ariaLabel="close"
           />
         }
@@ -243,7 +243,7 @@ export const UseCaseDemos = (args) => (
           <ButtonIcon
             backgroundColor={BackgroundColor.successAlternative}
             size={BUTTON_ICON_SIZES.SM}
-            iconName={ICON_NAMES.CLOSE}
+            iconName={IconName.Close}
             ariaLabel="close"
           />
         }
@@ -282,7 +282,7 @@ export const UseCaseDemos = (args) => (
           <ButtonIcon
             backgroundColor={BackgroundColor.goerli}
             size={BUTTON_ICON_SIZES.SM}
-            iconName={ICON_NAMES.CLOSE}
+            iconName={IconName.Close}
             ariaLabel="close"
           />
         }

ui/components/component-library/header-base/header-base.test.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable jest/require-top-level-describe */
 import { render } from '@testing-library/react';
 import React from 'react';
-import { Icon, ICON_NAMES } from '..';
+import { Icon, IconName } from '..';
 import { HeaderBase } from './header-base';
 
 describe('HeaderBase', () => {
@@ -39,7 +39,7 @@ describe('HeaderBase', () => {
     const { getByTestId } = render(
       <HeaderBase
         startAccessory={
-          <Icon data-testid="start-accessory" name={ICON_NAMES.ADD_SQUARE} />
+          <Icon data-testid="start-accessory" name={IconName.AddSquare} />
         }
       />,
     );
@@ -51,7 +51,7 @@ describe('HeaderBase', () => {
     const { getByTestId } = render(
       <HeaderBase
         endAccessory={
-          <Icon data-testid="end-accessory" name={ICON_NAMES.ADD_SQUARE} />
+          <Icon data-testid="end-accessory" name={IconName.AddSquare} />
         }
       />,
     );

ui/components/component-library/help-text/README.mdx

@@ -28,7 +28,8 @@ The `HelpText` accepts all props below as well as all [Box](/docs/components-ui-
 
 ```jsx
 import { Size, IconColor } from '../../../helpers/constants/design-system';
-import { HelpText, Icon, ICON_NAMES } from '../../component-library';
+import { Icon, ICON_NAMES } from '../../icon/deprecated';
+import { HelpText } from '../../component-library';
 
 <HelpText>Plain text</HelpText> // renders as <p>Plain text</p>
 <HelpText>

ui/components/component-library/help-text/help-text.stories.js

@@ -10,7 +10,7 @@ import {
 
 import Box from '../../ui/box';
 
-import { Icon, ICON_NAMES } from '..';
+import { Icon, ICON_NAMES } from '../icon/deprecated';
 
 import { HelpText } from './help-text';
 

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';
+import { Icon, ICON_NAMES } from '../icon/deprecated';
 
 import { HelpText } from './help-text';
 

ui/components/component-library/icon/README.mdx

@@ -4,7 +4,7 @@ import { Icon } from './icon';
 
 # Icon
 
-The `Icon` component in conjunction with `ICON_NAMES` can be used for all icons in the extension
+The `Icon` component in conjunction with `IconName` can be used for all icons in the extension
 
 <Canvas>
   <Story id="components-componentlibrary-icon--default-story" />
@@ -18,7 +18,7 @@ The `Icon` accepts all props below as well as all [Box](/docs/components-ui-box-
 
 ### Name
 
-Use the `name` prop and the `ICON_NAMES` object to change the icon.
+Use the `name` prop and the `IconName` enum to change the icon.
 
 Use the [IconSearch](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use.
 
@@ -27,50 +27,50 @@ Use the [IconSearch](/story/components-componentlibrary-icon--default-story) sto
 </Canvas>
 
 ```jsx
-import { Icon, ICON_NAMES } from '../../component-library';
+import { Icon, IconName } from '../../component-library';
 
-<Icon name={ICON_NAMES.ADD_SQUARE} />
-<Icon name={ICON_NAMES.BANK} />
-<Icon name={ICON_NAMES.CALCULATOR} />
-<Icon name={ICON_NAMES.COIN} />
+<Icon name={IconName.AddSquare} />
+<Icon name={IconName.Bank} />
+<Icon name={IconName.Calculator} />
+<Icon name={IconName.Coin} />
 // etc...
 ```
 
 ### Size
 
-Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `Icon`. Defaults to `Size.SM`
+Use the `size` prop and the `IconSize` enum to change the size of `Icon`. Defaults to `IconSize.Sm`
 
 Possible sizes include:
 
-- `Size.XS` 12px
-- `Size.SM` 16px
-- `Size.MD` 20px
-- `Size.LG` 24px
-- `Size.XL` 32px
-- `Size.inherit` inherits the font-size from parent element. This is useful for inline icons in text.
+- `IconSize.Xs` 12px
+- `IconSize.Sm` 16px
+- `IconSize.Md` 20px
+- `IconSize.Lg` 24px
+- `IconSize.Xl` 32px
+- `IconSize.Inherit` inherits the font-size from parent element. This is useful for inline icons in text.
 
 <Canvas>
   <Story id="components-componentlibrary-icon--size-story" />
 </Canvas>
 
 ```jsx
-import { Size，TextVariant } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../component-library';
+import { TextVariant } from '../../../helpers/constants/design-system';
+import { Icon, IconName, IconSize, Text } from '../../component-library';
 
-<Icon name={ICON_NAMES.ADD_SQUARE} size={Size.XS} />
-<Icon name={ICON_NAMES.ADD_SQUARE} size={Size.SM} />
-<Icon name={ICON_NAMES.ADD_SQUARE} size={Size.MD} />
-<Icon name={ICON_NAMES.ADD_SQUARE} size={Size.LG} />
-<Icon name={ICON_NAMES.ADD_SQUARE} size={Size.XL} />
+<Icon name={IconName.AddSquare} size={IconSize.Xs} />
+<Icon name={IconName.AddSquare} size={IconSize.Sm} />
+<Icon name={IconName.AddSquare} size={IconSize.Md} />
+<Icon name={IconName.AddSquare} size={IconSize.Lg} />
+<Icon name={IconName.AddSquare} size={IconSize.Xl} />
 <Text as="p" variant={TextVariant.bodySm}>
-    <Icon size={Size.inherit} />  inherits the
+    <Icon size={IconSize.Inherit} />  inherits the
     font-size of the parent element.
 </Text>
 ```
 
 ### Color
 
-Use the `color` prop and the `Color` object from `./ui/helpers/constants/design-system.js` to change the color of `Icon`. Defaults to `Color.inherit` which will use the text color of the parent element. This is useful for inline icons.
+Use the `color` prop and the `IconColor` enum from `./ui/helpers/constants/design-system.js` to change the color of `Icon`. Defaults to `IconColor.inherit` which will use the text color of the parent element. This is useful for inline icons.
 
 <Canvas>
   <Story id="components-componentlibrary-icon--color-story" />
@@ -78,23 +78,23 @@ Use the `color` prop and the `Color` object from `./ui/helpers/constants/design-
 
 ```jsx
 import { IconColor } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES } from '../../component-library';
+import { Icon, IconName } from '../../component-library';
 
-<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.inherit} />
-<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.iconDefault} />
-<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.iconAlternative} />
-<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.iconMuted} />
-<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.overlayInverse} />
-<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.primaryDefault} />
-<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.primaryInverse} />
-<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.errorDefault} />
-<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.errorInverse} />
-<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.successDefault} />
-<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.successInverse} />
-<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.warningDefault} />
-<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.warningInverse} />
-<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.infoDefault} />
-<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.infoInverse} />
+<Icon name={IconName.AddSquare} color={IconColor.inherit} />
+<Icon name={IconName.AddSquare} color={IconColor.iconDefault} />
+<Icon name={IconName.AddSquare} color={IconColor.iconAlternative} />
+<Icon name={IconName.AddSquare} color={IconColor.iconMuted} />
+<Icon name={IconName.AddSquare} color={IconColor.overlayInverse} />
+<Icon name={IconName.AddSquare} color={IconColor.primaryDefault} />
+<Icon name={IconName.AddSquare} color={IconColor.primaryInverse} />
+<Icon name={IconName.AddSquare} color={IconColor.errorDefault} />
+<Icon name={IconName.AddSquare} color={IconColor.errorInverse} />
+<Icon name={IconName.AddSquare} color={IconColor.successDefault} />
+<Icon name={IconName.AddSquare} color={IconColor.successInverse} />
+<Icon name={IconName.AddSquare} color={IconColor.warningDefault} />
+<Icon name={IconName.AddSquare} color={IconColor.warningInverse} />
+<Icon name={IconName.AddSquare} color={IconColor.infoDefault} />
+<Icon name={IconName.AddSquare} color={IconColor.infoInverse} />
 ```
 
 ### Layout & Spacing
@@ -119,12 +119,12 @@ import {
 
 import Box from '../../ui/box/box';
 
-import { ICON_NAMES, Icon, Text, Label } from '../../component-library';
+import { IconName, Icon, IconSize, Text, Label } from '../../component-library';
 
 <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={4}>
   <Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
     <Icon
-      name={ICON_NAMES.CHECK}
+      name={IconName.Check}
       color={IconColor.successDefault}
       marginRight={1}
     />
@@ -142,7 +142,7 @@ import { ICON_NAMES, Icon, Text, Label } from '../../component-library';
       0x79fAaFe7B6D5DB5D8c63FE88DFF0AF1Fe53358db
     </Text>
     <Icon
-      name={ICON_NAMES.COPY}
+      name={IconName.Copy}
       color={IconColor.primaryDefault}
       marginLeft={1}
     />
@@ -155,18 +155,18 @@ import { ICON_NAMES, Icon, Text, Label } from '../../component-library';
     borderColor={BorderColor.borderMuted}
     backgroundColor={BackgroundColor.backgroundDefault}
   >
-    <Icon name={ICON_NAMES.ADD} color={IconColor.iconDefault} marginRight={2} />
+    <Icon name={IconName.Add} color={IconColor.iconDefault} marginRight={2} />
     <Text>Create account</Text>
   </Box>
   <Label>
     Custom spending cap{' '}
-    <Icon name={ICON_NAMES.INFO} size={ICON_SIZES.AUTO} marginLeft={1} />
+    <Icon name={IconName.Info} size={IconSize.Inherit} marginLeft={1} />
   </Label>
   <div>
     <Text>
       <Icon
-        name={ICON_NAMES.WARNING}
-        size={ICON_SIZES.AUTO}
+        name={IconName.Warning}
+        size={IconSize.Inherit}
         marginLeft={1}
         color={IconColor.warningDefault}
       />{' '}
@@ -178,17 +178,17 @@ import { ICON_NAMES, Icon, Text, Label } from '../../component-library';
 
 ### Adding a new icon
 
-To add a new icon the only thing you need to do is add the icon svg file to `app/images/icons`. To ensure that the icon is added correctly follow these steps:
+In order to ensure that a new icon is added correctly, there are a few steps that need to be followed:
 
 #### Step 1.
 
 Optimize the svg using [Fontastic](https://fontastic.me/). This will remove any unnecessary code from the svg. Your svg should only contain a single path.
 
-Example of a correctly optimized svg:
+Example of a correctly optimized svg `add-square-filled.svg`:
 
-```
-<svg xmlns="http://www.w3.org/2000/svg" id="icon-add-square-filled" viewBox="0 0 512 512">
-  <path d="m337 51l-171 0c-75 0-119 45-119 119l0 172c0 74 44 119 119 119l171 0c75 0 119-45 119-119l0-172c1-74-44-119-119-119z m-3 220l-67 0 0 67c0 8-7 15-15 15-9 0-16-7-16-15l0-67-66 0c-9 0-16-7-16-15 0-8 7-15 16-15l66 0 0-67c0-8 7-15 16-15 8 0 15 7 15 15l0 67 67 0c8 0 15 7 15 15 0 8-7 15-15 15z"/>
+```xml
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path d="m337 51l-171 0c-75 0-119 45-119 119l0 172c0 74 44 119 119 119l171 0c75 0 119-45 119-119l0-172c1-74-44-119-119-119z m-3 220l-67 0 0 67c0 8-7 15-15 15-9 0-16-7-16-15l0-67-66 0c-9 0-16-7-16-15 0-8 7-15 16-15l66 0 0-67c0-8 7-15 16-15 8 0 15 7 15 15l0 67 67 0c8 0 15 7 15 15 0 8-7 15-15 15z" />
 </svg>
 ```
 
@@ -200,6 +200,6 @@ Add your optimized svg file to to `app/images/icons`
 
 #### Step 3.
 
-Run `yarn start` to generate the `ICON_NAMES` with your added icon.
+Add your icon to the `IconName` enum in `./ui/components/ui/icon/icon.types.ts`
 
 If you have any questions please reach out to the design system team in the [#metamask-design-system](https://consensys.slack.com/archives/C0354T27M5M) channel on slack.

ui/components/component-library/icon/deprecated/__snapshots__/icon.test.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Icon should render correctly 1`] = `
+<div>
+  <span
+    class="box mm-icon mm-icon--size-md box--display-inline-block box--flex-direction-row box--color-inherit"
+    data-testid="icon"
+    style="mask-image: url('./images/icons/add-square.svg');"
+  />
+</div>
+`;

ui/components/component-library/icon/deprecated/icon.constants.js

@@ -0,0 +1,23 @@
+import { Size } from '../../../../helpers/constants/design-system';
+
+/**
+ * @deprecated `ICON_NAMES` has been deprecated in favour of the `IconName` enum
+ *
+ * import { Icon, IconName } from '../../component-library';
+ */
+/* eslint-disable prefer-destructuring*/ // process.env is not a standard JavaScript object, so we are not able to use object destructuring
+export const ICON_NAMES = JSON.parse(process.env.ICON_NAMES);
+
+/**
+ * @deprecated `ICON_SIZES` has been deprecated in favour of the `IconSize` enum
+ *
+ * import { Icon, IconSize, IconName } from '../../component-library';
+ */
+export const ICON_SIZES = {
+  XS: Size.XS,
+  SM: Size.SM,
+  MD: Size.MD,
+  LG: Size.LG,
+  XL: Size.XL,
+  AUTO: Size.inherit,
+};

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

@@ -2,13 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-import Box from '../../ui/box/box';
+import Box from '../../../ui/box/box';
 
 import {
   Size,
   IconColor,
   DISPLAY,
-} from '../../../helpers/constants/design-system';
+} from '../../../../helpers/constants/design-system';
 
 import { ICON_SIZES, ICON_NAMES } from './icon.constants';
 

ui/components/component-library/icon/deprecated/icon.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable jest/require-top-level-describe */
 import { render } from '@testing-library/react';
 import React from 'react';
-import { Size, IconColor } from '../../../helpers/constants/design-system';
+import { Size, IconColor } from '../../../../helpers/constants/design-system';
 import { ICON_NAMES } from './icon.constants';
 import { Icon } from './icon';
 

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

@@ -1,24 +0,0 @@
-import { Size } from '../../../helpers/constants/design-system';
-
-/**
- * The ICON_NAMES object contains all the possible icon names.
- *
- * Search for an icon: https://metamask.github.io/metamask-storybook/?path=/story/components-componentlibrary-icon--default-story
- *
- * Add an icon: https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#adding-a-new-icon
- *
- * ICON_NAMES is generated using svgs in app/images/icons and
- * the generateIconNames script in development/generate-icon-names.js
- * then stored as an environment variable
- */
-
-/* eslint-disable prefer-destructuring*/ // process.env is not a standard JavaScript object, so we are not able to use object destructuring
-export const ICON_NAMES = JSON.parse(process.env.ICON_NAMES);
-export const ICON_SIZES = {
-  XS: Size.XS,
-  SM: Size.SM,
-  MD: Size.MD,
-  LG: Size.LG,
-  XL: Size.XL,
-  AUTO: Size.inherit,
-};

ui/components/component-library/icon/icon.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
 import {
-  Size,
   AlignItems,
   DISPLAY,
   IconColor,
@@ -20,91 +21,38 @@ import Box from '../../ui/box/box';
 import {
   ButtonIcon,
   ButtonLink,
-  ICON_NAMES,
-  ICON_SIZES,
-  Icon,
   Label,
   Text,
   TextField,
   TextFieldSearch,
+  TEXT_FIELD_SIZES,
+  BUTTON_ICON_SIZES,
+  BUTTON_LINK_SIZES,
 } from '..';
 
+import { Icon } from './icon';
+import { IconName, IconSize } from './icon.types';
+
 import README from './README.mdx';
 
-const marginSizeControlOptions = [
-  undefined,
-  0,
-  1,
-  2,
-  3,
-  4,
-  5,
-  6,
-  7,
-  8,
-  9,
-  10,
-  11,
-  12,
-  'auto',
-];
-
 export default {
   title: 'Components/ComponentLibrary/Icon',
-
   component: Icon,
   parameters: {
     docs: {
       page: README,
     },
   },
-  argTypes: {
-    name: {
-      control: 'select',
-      options: Object.values(ICON_NAMES),
-    },
-    size: {
-      control: 'select',
-      options: Object.values(ICON_SIZES),
-    },
-    color: {
-      control: 'select',
-      options: Object.values(IconColor),
-    },
-    className: {
-      control: 'text',
-    },
-    marginTop: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-    marginRight: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-    marginBottom: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-    marginLeft: {
-      options: marginSizeControlOptions,
-      control: 'select',
-      table: { category: 'box props' },
-    },
-  },
   args: {
-    name: ICON_NAMES.ADD_SQUARE,
+    name: IconName.AddSquare,
     color: IconColor.inherit,
-    size: Size.MD,
+    size: IconSize.Md,
   },
-};
+} as ComponentMeta<typeof Icon>;
 
-export const DefaultStory = (args) => {
+export const DefaultStory: ComponentStory<typeof Icon> = (args) => {
   const [search, setSearch] = useState('');
-  const iconList = Object.keys(ICON_NAMES)
+  const iconList = Object.keys(IconName)
     .filter(
       (item) =>
         search === '' ||
@@ -138,7 +86,7 @@ export const DefaultStory = (args) => {
           flexDirection={FLEX_DIRECTION.COLUMN}
         >
           {/* TODO replace with FormTextField */}
-          <Label htmlFor="icon-search">Name</Label>
+          <Label htmlFor="icon-search">IconName</Label>
           <TextFieldSearch
             id="icon-search"
             marginBottom={4}
@@ -161,7 +109,7 @@ export const DefaultStory = (args) => {
             return (
               <Box
                 borderColor={BorderColor.borderMuted}
-                borderRadius={Size.MD}
+                borderRadius={BorderRadius.MD}
                 display={DISPLAY.FLEX}
                 flexDirection={FLEX_DIRECTION.COLUMN}
                 alignItems={AlignItems.center}
@@ -169,12 +117,12 @@ export const DefaultStory = (args) => {
                 padding={4}
                 key={item}
               >
-                <Icon marginBottom={2} {...args} name={ICON_NAMES[item]} />
+                <Icon marginBottom={2} {...args} name={IconName[item]} />
                 <TextField
                   placeholder={item}
                   value={item}
                   readOnly
-                  size={Size.SM}
+                  size={TEXT_FIELD_SIZES.SM}
                   inputProps={{
                     variant: TextVariant.bodyXs,
                     textAlign: TEXT_ALIGN.CENTER,
@@ -182,8 +130,8 @@ export const DefaultStory = (args) => {
                   backgroundColor={BackgroundColor.backgroundAlternative}
                   endAccessory={
                     <ButtonIcon
-                      iconName={ICON_NAMES.COPY}
-                      size={Size.SM}
+                      iconName={IconName.Copy}
+                      size={BUTTON_ICON_SIZES.SM}
                       color={IconColor.iconAlternative}
                       ariaLabel="Copy to clipboard"
                       title="Copy to clipboard"
@@ -206,7 +154,7 @@ export const DefaultStory = (args) => {
         <Text>
           No matches. Please try again or ask in the{' '}
           <ButtonLink
-            size={Size.inherit}
+            size={BUTTON_LINK_SIZES.INHERIT}
             color={Color.primaryDefault}
             href="https://consensys.slack.com/archives/C0354T27M5M"
             target="_blank"
@@ -221,14 +169,14 @@ export const DefaultStory = (args) => {
 };
 DefaultStory.storyName = 'Default';
 
-export const Name = (args) => (
+export const Name: ComponentStory<typeof Icon> = (args) => (
   <>
     <Box display={DISPLAY.FLEX} flexWrap={FLEX_WRAP.WRAP} gap={2}>
-      {Object.keys(ICON_NAMES).map((item) => {
+      {Object.keys(IconName).map((item) => {
         return (
           <Box
             borderColor={BorderColor.borderMuted}
-            borderRadius={Size.MD}
+            borderRadius={BorderRadius.MD}
             display={DISPLAY.FLEX}
             flexDirection={FLEX_DIRECTION.COLUMN}
             alignItems={AlignItems.center}
@@ -236,7 +184,7 @@ export const Name = (args) => (
             padding={4}
             key={item}
           >
-            <Icon {...args} name={ICON_NAMES[item]} />
+            <Icon {...args} name={IconName[item]} />
           </Box>
         );
       })}
@@ -244,7 +192,7 @@ export const Name = (args) => (
   </>
 );
 
-export const SizeStory = (args) => (
+export const SizeStory: ComponentStory<typeof Icon> = (args) => (
   <>
     <Box
       display={DISPLAY.FLEX}
@@ -252,49 +200,49 @@ export const SizeStory = (args) => (
       gap={1}
       marginBottom={4}
     >
-      <Icon {...args} size={Size.XS} />
-      <Icon {...args} size={Size.SM} />
-      <Icon {...args} size={Size.MD} />
-      <Icon {...args} size={Size.LG} />
-      <Icon {...args} size={Size.XL} />
+      <Icon {...args} size={IconSize.Xs} />
+      <Icon {...args} size={IconSize.Sm} />
+      <Icon {...args} size={IconSize.Md} />
+      <Icon {...args} size={IconSize.Lg} />
+      <Icon {...args} size={IconSize.Xl} />
     </Box>
     <Text variant={TextVariant.displayMd}>
       inherits the font-size of the parent element.{' '}
-      <Icon {...args} size={Size.inherit} />
+      <Icon {...args} size={IconSize.Inherit} />
     </Text>
     <Text variant={TextVariant.headingLg}>
       inherits the font-size of the parent element.{' '}
-      <Icon {...args} size={Size.inherit} />
+      <Icon {...args} size={IconSize.Inherit} />
     </Text>
     <Text variant={TextVariant.headingMd}>
       inherits the font-size of the parent element.{' '}
-      <Icon {...args} size={Size.inherit} />
+      <Icon {...args} size={IconSize.Inherit} />
     </Text>
     <Text variant={TextVariant.headingSm}>
       inherits the font-size of the parent element.{' '}
-      <Icon {...args} size={Size.inherit} />
+      <Icon {...args} size={IconSize.Inherit} />
     </Text>
     <Text variant={TextVariant.bodyLgMedium}>
       inherits the font-size of the parent element.{' '}
-      <Icon {...args} size={Size.inherit} />
+      <Icon {...args} size={IconSize.Inherit} />
     </Text>
     <Text variant={TextVariant.bodyMd}>
       inherits the font-size of the parent element.{' '}
-      <Icon {...args} size={Size.inherit} />
+      <Icon {...args} size={IconSize.Inherit} />
     </Text>
     <Text variant={TextVariant.bodySm}>
       inherits the font-size of the parent element.{' '}
-      <Icon {...args} size={Size.inherit} />
+      <Icon {...args} size={IconSize.Inherit} />
     </Text>
     <Text variant={TextVariant.bodyXs}>
       inherits the font-size of the parent element.{' '}
-      <Icon {...args} size={Size.inherit} />
+      <Icon {...args} size={IconSize.Inherit} />
     </Text>
   </>
 );
 SizeStory.storyName = 'Size';
 
-export const ColorStory = (args) => (
+export const ColorStory: ComponentStory<typeof Icon> = (args) => (
   <Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline}>
     <Box padding={1} display={DISPLAY.FLEX} alignItems={AlignItems.center}>
       <Icon {...args} color={IconColor.inherit} />
@@ -379,7 +327,7 @@ export const LayoutAndSpacing = () => (
   <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={4}>
     <Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
       <Icon
-        name={ICON_NAMES.CHECK}
+        name={IconName.Check}
         color={IconColor.successDefault}
         marginRight={1}
       />
@@ -397,7 +345,7 @@ export const LayoutAndSpacing = () => (
         0x79fAaFe7B6D5DB5D8c63FE88DFF0AF1Fe53358db
       </Text>
       <Icon
-        name={ICON_NAMES.COPY}
+        name={IconName.Copy}
         color={IconColor.primaryDefault}
         marginLeft={1}
       />
@@ -410,22 +358,18 @@ export const LayoutAndSpacing = () => (
       borderColor={BorderColor.borderMuted}
       backgroundColor={BackgroundColor.backgroundDefault}
     >
-      <Icon
-        name={ICON_NAMES.ADD}
-        color={IconColor.iconDefault}
-        marginRight={2}
-      />
+      <Icon name={IconName.Add} color={IconColor.iconDefault} marginRight={2} />
       <Text>Create account</Text>
     </Box>
     <Label>
       Custom spending cap{' '}
-      <Icon name={ICON_NAMES.INFO} size={ICON_SIZES.AUTO} marginLeft={1} />
+      <Icon name={IconName.Info} size={IconSize.Inherit} marginLeft={1} />
     </Label>
     <div>
       <Text>
         <Icon
-          name={ICON_NAMES.WARNING}
-          size={ICON_SIZES.AUTO}
+          name={IconName.Warning}
+          size={IconSize.Inherit}
           marginLeft={1}
           color={IconColor.warningDefault}
         />{' '}

ui/components/component-library/icon/icon.test.tsx

@@ -0,0 +1,141 @@
+/* eslint-disable jest/require-top-level-describe */
+import { render } from '@testing-library/react';
+import React from 'react';
+import { IconColor } from '../../../helpers/constants/design-system';
+import { IconName, IconSize } from './icon.types';
+import { Icon } from './icon';
+
+describe('Icon', () => {
+  it('should render correctly', () => {
+    const { getByTestId, container } = render(
+      <Icon name={IconName.AddSquare} data-testid="icon" />,
+    );
+    expect(getByTestId('icon')).toBeDefined();
+    expect(container.querySelector('svg')).toBeDefined();
+    expect(container).toMatchSnapshot();
+  });
+  it('should render with a custom class', () => {
+    const { getByTestId } = render(
+      <Icon
+        name={IconName.AddSquare}
+        data-testid="icon"
+        className="test-class"
+      />,
+    );
+    expect(getByTestId('icon')).toHaveClass('test-class');
+  });
+  it('should render with an aria-label attribute', () => {
+    /**
+     * We aren't specifically adding an ariaLabel prop because in most cases
+     * the icon should be decorative or be accompanied by text. Also if the icon
+     * is to be used as a button in most cases ButtonIcon should be used. However
+     * we should test if it's possible to pass an aria-label attribute to the
+     * root html element.
+     */
+    const { getByTestId } = render(
+      <Icon
+        name={IconName.AddSquare}
+        data-testid="icon"
+        aria-label="test aria label"
+      />,
+    );
+    expect(getByTestId('icon')).toHaveAttribute(
+      'aria-label',
+      'test aria label',
+    );
+  });
+  it('should render with different icons using mask-image and image urls', () => {
+    const { getByTestId } = render(
+      <>
+        <Icon name={IconName.AddSquare} data-testid="add-square" />
+        <Icon name={IconName.Bank} data-testid="bank" />
+        <Icon name={IconName.Bookmark} data-testid="bookmark" />
+        <Icon name={IconName.Calculator} data-testid="calculator" />
+      </>,
+    );
+    expect(window.getComputedStyle(getByTestId('add-square')).maskImage).toBe(
+      `url('./images/icons/add-square.svg')`,
+    );
+    expect(window.getComputedStyle(getByTestId('bank')).maskImage).toBe(
+      `url('./images/icons/bank.svg')`,
+    );
+    expect(window.getComputedStyle(getByTestId('bookmark')).maskImage).toBe(
+      `url('./images/icons/bookmark.svg')`,
+    );
+    expect(window.getComputedStyle(getByTestId('calculator')).maskImage).toBe(
+      `url('./images/icons/calculator.svg')`,
+    );
+  });
+  it('should render with different size classes', () => {
+    const { getByTestId } = render(
+      <>
+        <Icon
+          name={IconName.AddSquare}
+          size={IconSize.Xs}
+          data-testid="icon-xs"
+        />
+        <Icon
+          name={IconName.AddSquare}
+          size={IconSize.Sm}
+          data-testid="icon-sm"
+        />
+        <Icon
+          name={IconName.AddSquare}
+          size={IconSize.Md}
+          data-testid="icon-md"
+        />
+        <Icon
+          name={IconName.AddSquare}
+          size={IconSize.Lg}
+          data-testid="icon-lg"
+        />
+        <Icon
+          name={IconName.AddSquare}
+          size={IconSize.Xl}
+          data-testid="icon-xl"
+        />
+        <Icon
+          name={IconName.AddSquare}
+          size={IconSize.Inherit}
+          data-testid="icon-inherit"
+        />
+      </>,
+    );
+    expect(getByTestId('icon-xs')).toHaveClass('mm-icon--size-xs');
+    expect(getByTestId('icon-sm')).toHaveClass('mm-icon--size-sm');
+    expect(getByTestId('icon-md')).toHaveClass('mm-icon--size-md');
+    expect(getByTestId('icon-lg')).toHaveClass('mm-icon--size-lg');
+    expect(getByTestId('icon-xl')).toHaveClass('mm-icon--size-xl');
+    expect(getByTestId('icon-inherit')).toHaveClass('mm-icon--size-inherit');
+  });
+  it('should render with icon colors', () => {
+    const { getByTestId } = render(
+      <>
+        <Icon
+          name={IconName.AddSquare}
+          color={IconColor.iconDefault}
+          data-testid="icon-color-default"
+        />
+        <Icon
+          name={IconName.AddSquare}
+          color={IconColor.iconAlternative}
+          data-testid="icon-color-alternative"
+        />
+        <Icon
+          name={IconName.AddSquare}
+          color={IconColor.iconMuted}
+          data-testid="icon-color-muted"
+        />
+      </>,
+    );
+    expect(getByTestId('icon-color-default')).toHaveClass(
+      'box--color-icon-default',
+    );
+    expect(getByTestId('icon-color-alternative')).toHaveClass(
+      'box--color-icon-alternative',
+    );
+    expect(getByTestId('icon-color-muted')).toHaveClass(
+      'box--color-icon-muted',
+    );
+  });
+});

ui/components/component-library/icon/icon.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import classnames from 'classnames';
+
+import Box from '../../ui/box/box';
+
+import { IconColor, DISPLAY } from '../../../helpers/constants/design-system';
+
+import { IconProps, IconSize } from './icon.types';
+
+export const Icon = ({
+  name,
+  size = IconSize.Md,
+  color = IconColor.inherit,
+  className = '',
+  style,
+  ...props
+}: IconProps) => (
+  <Box
+    className={classnames(className, 'mm-icon', `mm-icon--size-${size}`)}
+    as="span"
+    display={DISPLAY.INLINE_BLOCK}
+    color={color}
+    style={{
+      /**
+       * To reduce the possibility of injection attacks
+       * the icon component uses mask-image instead of rendering
+       * the svg directly.
+       */
+      maskImage: `url('./images/icons/${String(name)}.svg')`,
+      WebkitMaskImage: `url('./images/icons/${String(name)}.svg')`,
+      ...style,
+    }}
+    {...props}
+  />
+);

ui/components/component-library/icon/icon.types.ts

@@ -0,0 +1,178 @@
+import type { BoxProps } from '../../ui/box/box.d';
+import { IconColor } from '../../../helpers/constants/design-system';
+
+export enum IconSize {
+  Xs = 'xs',
+  Sm = 'sm',
+  Md = 'md',
+  Lg = 'lg',
+  Xl = 'xl',
+  Inherit = 'inherit',
+}
+
+/**
+ * The IconName enum contains all the possible icon names.
+ *
+ * Search for an icon: https://metamask.github.io/metamask-storybook/?path=/story/components-componentlibrary-icon--default-story
+ *
+ * Add an icon: https://metamask.github.io/metamask-storybook/?path=/docs/components-componentlibrary-icon--default-story#adding-a-new-icon
+ *
+ */
+
+export enum IconName {
+  AddSquare = 'add-square',
+  Add = 'add',
+  Arrow2Down = 'arrow-2-down',
+  Arrow2Left = 'arrow-2-left',
+  Arrow2Right = 'arrow-2-right',
+  Arrow2Up = 'arrow-2-up',
+  ArrowDoubleLeft = 'arrow-double-left',
+  ArrowDoubleRight = 'arrow-double-right',
+  ArrowDown = 'arrow-down',
+  ArrowLeft = 'arrow-left',
+  ArrowRight = 'arrow-right',
+  ArrowUp = 'arrow-up',
+  BankToken = 'bank-token',
+  Bank = 'bank',
+  Book = 'book',
+  Bookmark = 'bookmark',
+  Bridge = 'bridge',
+  Calculator = 'calculator',
+  CardPos = 'card-pos',
+  CardToken = 'card-token',
+  Card = 'card',
+  Category = 'category',
+  Chart = 'chart',
+  Check = 'check',
+  Clock = 'clock',
+  Close = 'close',
+  CodeCircle = 'code-circle',
+  Coin = 'coin',
+  Confirmation = 'confirmation',
+  Connect = 'connect',
+  CopySuccess = 'copy-success',
+  Copy = 'copy',
+  Danger = 'danger',
+  Dark = 'dark',
+  Data = 'data',
+  Diagram = 'diagram',
+  DocumentCode = 'document-code',
+  Edit = 'edit',
+  Eraser = 'eraser',
+  Ethereum = 'ethereum',
+  Expand = 'expand',
+  Explore = 'explore',
+  Export = 'export',
+  EyeSlash = 'eye-slash',
+  Eye = 'eye',
+  Filter = 'filter',
+  Flag = 'flag',
+  FlashSlash = 'flash-slash',
+  Flash = 'flash',
+  FullCircle = 'full-circle',
+  Gas = 'gas',
+  GlobalSearch = 'global-search',
+  Global = 'global',
+  Graph = 'graph',
+  Hardware = 'hardware',
+  Heart = 'heart',
+  Hierarchy = 'hierarchy',
+  Home = 'home',
+  Import = 'import',
+  Info = 'info',
+  Key = 'key',
+  Light = 'light',
+  Link = 'link',
+  Loading = 'loading',
+  LockCircle = 'lock-circle',
+  LockSlash = 'lock-slash',
+  Lock = 'lock',
+  Login = 'login',
+  Logout = 'logout',
+  Menu = 'menu',
+  MessageQuestion = 'message-question',
+  Messages = 'messages',
+  MinusSquare = 'minus-square',
+  Minus = 'minus',
+  Mobile = 'mobile',
+  Money = 'money',
+  Monitor = 'monitor',
+  MoreHorizontal = 'more-horizontal',
+  MoreVertical = 'more-vertical',
+  NotificationCircle = 'notification-circle',
+  Notification = 'notification',
+  PasswordCheck = 'password-check',
+  People = 'people',
+  ProgrammingArrows = 'programming-arrows',
+  Question = 'question',
+  Received = 'received',
+  Refresh = 'refresh',
+  Save = 'save',
+  ScanBarcode = 'scan-barcode',
+  ScanFocus = 'scan-focus',
+  Scan = 'scan',
+  Scroll = 'scroll',
+  Search = 'search',
+  SecurityCard = 'security-card',
+  SecurityCross = 'security-cross',
+  SecurityKey = 'security-key',
+  SecuritySearch = 'security-search',
+  SecuritySlash = 'security-slash',
+  SecurityTick = 'security-tick',
+  SecurityTime = 'security-time',
+  SecurityUser = 'security-user',
+  Security = 'security',
+  Send1 = 'send-1',
+  Send2 = 'send-2',
+  Setting = 'setting',
+  Slash = 'slash',
+  SnapsMobile = 'snaps-mobile',
+  SnapsPlus = 'snaps-plus',
+  Snaps = 'snaps',
+  Speedometer = 'speedometer',
+  Star = 'star',
+  Student = 'student',
+  SwapHorizontal = 'swap-horizontal',
+  SwapVertical = 'swap-vertical',
+  Tag = 'tag',
+  Tilde = 'tilde',
+  Timer = 'timer',
+  Trash = 'trash',
+  TrendDown = 'trend-down',
+  TrendUp = 'trend-up',
+  UserCircleAdd = 'user-circle-add',
+  UserCircle = 'user-circle',
+  User = 'user',
+  WalletCard = 'wallet-card',
+  WalletMoney = 'wallet-money',
+  Wallet = 'wallet',
+  Warning = 'warning',
+}
+
+export interface IconProps extends BoxProps {
+  /**
+   * The name of the icon to display. Use the IconName enum
+   * Search for an icon: https://metamask.github.io/metamask-storybook/?path=/story/components-componentlibrary-icon--default-story
+   */
+  name: IconName;
+  /**
+   * The size of the Icon.
+   * Possible values could be IconSize.Xs (12px), IconSize.Sm (16px), IconSize.Md (20px), IconSize.Lg (24px), IconSize.Xl (32px), IconSize.Inherit (inherits font-size).
+   * Default value is IconSize.Md (20px).
+   */
+  size?: IconSize;
+  /**
+   * The color of the icon.
+   * Defaults to IconColor.inherit.
+   */
+  color?: IconColor;
+  /**
+   * An additional className to apply to the icon.
+   */
+  className?: string;
+  /**
+   * Addition style properties to apply to the icon.
+   * The Icon component uses inline styles to apply the icon's mask-image so be wary of overriding
+   */
+  style?: React.CSSProperties;
+}

ui/components/component-library/icon/index.ts

@@ -0,0 +1,3 @@
+export { Icon } from './icon';
+export { IconName, IconSize } from './icon.types';
+export type { IconProps } from './icon.types';

ui/components/component-library/index.js

@@ -23,7 +23,7 @@ export { ButtonSecondary, BUTTON_SECONDARY_SIZES } from './button-secondary';
 export { FormTextField } from './form-text-field';
 export { HeaderBase } from './header-base';
 export { HelpText } from './help-text';
-export { Icon, ICON_NAMES, ICON_SIZES } from './icon';
+export { Icon, IconName, IconSize } from './icon';
 export { Label } from './label';
 export { PickerNetwork } from './picker-network';
 export { Tag } from './tag';

ui/components/component-library/label/README.mdx

@@ -32,7 +32,8 @@ 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 { Label, TextField, Icon, ICON_NAMES } from '../../component-library';
+import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
+import { Label, TextField } from '../../component-library';
 
 <Label>Plain text</Label>
 <Label display={DISPLAY.FLEX} alignItems={AlignItems.flexStart}>

ui/components/component-library/label/label.stories.js

@@ -9,7 +9,8 @@ import {
 
 import Box from '../../ui/box';
 
-import { Icon, ICON_NAMES, TextField } from '..';
+import { Icon, ICON_NAMES } from '../icon/deprecated';
+import { TextField } from '..';
 
 import { Label } from './label';
 

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';
+import { Icon, ICON_NAMES } from '../icon/deprecated';
 import { TextField } from '../text-field';
 
 import { Label } from './label';

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';
+import { Icon, ICON_NAMES } from '../icon/deprecated';
 import { Text } from '../text';
 import Box from '../../ui/box';
 import {

ui/components/component-library/tag-url/tag-url.js

@@ -15,7 +15,7 @@ import {
 } from '../../../helpers/constants/design-system';
 import { AvatarFavicon } from '../avatar-favicon';
 import { ButtonLink } from '../button-link';
-import { Icon, ICON_NAMES } from '../icon';
+import { Icon, ICON_NAMES } from '../icon/deprecated';
 
 export const TagUrl = ({
   label,

ui/components/component-library/text-field-search/text-field-search.js

@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import { Size } from '../../../helpers/constants/design-system';
 
 import { ButtonIcon } from '../button-icon';
-import { Icon, ICON_NAMES } from '../icon';
+import { Icon, ICON_NAMES } from '../icon/deprecated';
 import { TextField, TEXT_FIELD_TYPES } from '../text-field';
 
 export const TextFieldSearch = ({

ui/components/component-library/text-field/README.mdx

@@ -90,7 +90,8 @@ Use the `startAccessory` and `endAccessory` props to add components such as icon
 
 ```jsx
 import { Color, IconColor, SIZES, DISPLAY } from '../../../helpers/constants/design-system';
-import { ButtonIcon, Icon, ICON_NAMES, TextField } from '../../component-library';
+import { Icon, ICON_NAMES } from '../../component-library/deprecated'
+import { ButtonIcon, TextField } from '../../component-library';
 
 <TextField
   placeholder="Search"