last part of migratin and eslint rule

.eslintrc.js

@@ -5,6 +5,9 @@ const RESTRICTED_MODULES = {
     { name: '@metamask/providers', message: 'Please lazy-load @metamask/providers or use useProvider hook instead' },
     { name: '@metamask/post-message-stream', message: 'Please lazy-load @metamask/post-message-stream or use useProvider hook instead' },
   ],
+  patterns: [
+    'icons/*',
+  ],
 };
 
 module.exports = {

ui/shared/AccountActionsMenu/AccountActionsMenu.tsx

-import { Button, Menu, MenuButton, MenuList, Icon, Flex, Skeleton, chakra } from '@chakra-ui/react';
+import { Button, Menu, MenuButton, MenuList, Flex, Skeleton, chakra } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import config from 'configs/app';
-import iconArrow from 'icons/arrows/east-mini.svg';
 import useIsAccountActionAllowed from 'lib/hooks/useIsAccountActionAllowed';
 import * as mixpanel from 'lib/mixpanel/index';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import IconSvg from 'ui/shared/IconSvg';
 
 import PrivateTagMenuItem from './items/PrivateTagMenuItem';
 import PublicTagMenuItem from './items/PublicTagMenuItem';
@@ -44,7 +44,7 @@ const AccountActionsMenu = ({ isLoading, className }: Props) => {
         >
           <Flex alignItems="center">
             <span>More</span>
-            <Icon as={ iconArrow } transform="rotate(-90deg)" boxSize={ 5 } ml={ 1 }/>
+            <IconSvg name="arrows/east-mini" transform="rotate(-90deg)" boxSize={ 5 } ml={ 1 }/>
           </Flex>
         </MenuButton>
       </Skeleton>

ui/shared/AccountActionsMenu/items/PrivateTagMenuItem.tsx

-import { MenuItem, Icon, chakra, useDisclosure } from '@chakra-ui/react';
+import { MenuItem, chakra, useDisclosure } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -6,11 +6,11 @@ import React from 'react';
 import type { Address } from 'types/api/address';
 import type { Transaction } from 'types/api/transaction';
 
-import iconPrivateTags from 'icons/privattags.svg';
 import { getResourceKey } from 'lib/api/useApiQuery';
 import getPageType from 'lib/mixpanel/getPageType';
 import AddressModal from 'ui/privateTags/AddressModal/AddressModal';
 import TransactionModal from 'ui/privateTags/TransactionModal/TransactionModal';
+import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   className?: string;
@@ -61,7 +61,7 @@ const PrivateTagMenuItem = ({ className, hash, onBeforeClick, type = 'address' }
   return (
     <>
       <MenuItem className={ className } onClick={ handleClick }>
-        <Icon as={ iconPrivateTags } boxSize={ 6 } mr={ 2 }/>
+        <IconSvg name="privattags" boxSize={ 6 } mr={ 2 }/>
         <span>Add private tag</span>
       </MenuItem>
       { type === 'tx' ?

ui/shared/AccountActionsMenu/items/PublicTagMenuItem.tsx

-import { MenuItem, Icon, chakra } from '@chakra-ui/react';
+import { MenuItem, chakra } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import iconPublicTags from 'icons/publictags.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   className?: string;
@@ -23,7 +23,7 @@ const PublicTagMenuItem = ({ className, hash, onBeforeClick }: Props) => {
 
   return (
     <MenuItem className={ className }onClick={ handleClick }>
-      <Icon as={ iconPublicTags } boxSize={ 6 } mr={ 2 }/>
+      <IconSvg name="publictags" boxSize={ 6 } mr={ 2 }/>
       <span>Add public tag</span>
     </MenuItem>
   );

ui/shared/AccountActionsMenu/items/TokenInfoMenuItem.tsx

-import { MenuItem, Icon, chakra, useDisclosure } from '@chakra-ui/react';
+import { MenuItem, chakra, useDisclosure } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { Route } from 'nextjs-routes';
 
 import config from 'configs/app';
-import iconEdit from 'icons/edit.svg';
 import useApiQuery from 'lib/api/useApiQuery';
 import useHasAccount from 'lib/hooks/useHasAccount';
 import { PAGE_TYPE_DICT } from 'lib/mixpanel/getPageType';
 import AddressVerificationModal from 'ui/addressVerification/AddressVerificationModal';
+import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   className?: string;
@@ -61,7 +61,7 @@ const TokenInfoMenuItem = ({ className, hash, onBeforeClick }: Props) => {
     router.push({ pathname: '/account/verified-addresses' });
   }, [ router ]);
 
-  const icon = <Icon as={ iconEdit } boxSize={ 6 } mr={ 2 } p={ 1 }/>;
+  const icon = <IconSvg name="edit" boxSize={ 6 } mr={ 2 } p={ 1 }/>;
 
   const content = (() => {
     if (!verifiedAddressesQuery.data?.verifiedAddresses.find(({ contractAddress }) => contractAddress.toLowerCase() === hash.toLowerCase())) {

ui/shared/AdditionalInfoButton.tsx

 import {
-  Icon,
   useColorModeValue,
   chakra,
   Button,
@@ -7,7 +6,7 @@ import {
 } from '@chakra-ui/react';
 import React from 'react';
 
-import infoIcon from 'icons/info.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   isOpen?: boolean;
@@ -39,8 +38,8 @@ const AdditionalInfoButton = ({ isOpen, onClick, className, isLoading }: Props,
       cursor="pointer"
       flexShrink={ 0 }
     >
-      <Icon
-        as={ infoIcon }
+      <IconSvg
+        name="info"
         boxSize={ 5 }
         color="link"
         _hover={{ color: 'link_hovered' }}

ui/shared/ApiKeySnippet.tsx

 import { Box, HStack, Flex, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-import keyIcon from 'icons/key.svg';
-import Icon from 'ui/shared/chakra/Icon';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   apiKey: string;
@@ -14,7 +13,7 @@ interface Props {
 const ApiKeySnippet = ({ apiKey, name, isLoading }: Props) => {
   return (
     <HStack spacing={ 2 } alignItems="start">
-      <Icon as={ keyIcon } boxSize={ 6 } color={ useColorModeValue('gray.500', 'gray.400') } isLoading={ isLoading }/>
+      <IconSvg name="key" boxSize={ 6 } color={ useColorModeValue('gray.500', 'gray.400') } isLoading={ isLoading }/>
       <Box>
         <Flex alignItems={{ base: 'flex-start', lg: 'center' }}>
           <Skeleton isLoaded={ !isLoading } display="inline-block" fontWeight={ 600 } mr={ 1 }>

ui/shared/AppError/AppErrorIcon.tsx

-import { Icon } from '@chakra-ui/react';
 import React from 'react';
 
-import icon404 from 'icons/error-pages/404.svg';
-import icon422 from 'icons/error-pages/422.svg';
-import icon429 from 'icons/error-pages/429.svg';
-import icon500 from 'icons/error-pages/500.svg';
+import type { IconName } from 'ui/shared/IconSvg';
+import IconSvg from 'ui/shared/IconSvg';
 
-const ICONS: Record<string, React.FunctionComponent<React.SVGAttributes<SVGElement>> > = {
-  '404': icon404,
-  '422': icon422,
-  '429': icon429,
-  '500': icon500,
+const ICONS: Record<string, IconName> = {
+  '404': 'error-pages/404',
+  '422': 'error-pages/422',
+  '429': 'error-pages/429',
+  '500': 'error-pages/500',
 };
 
 interface Props {
@@ -18,7 +15,7 @@ interface Props {
 }
 
 const AppErrorIcon = ({ statusCode }: Props) => {
-  return <Icon as={ ICONS[String(statusCode)] || ICONS['500'] } width="200px" height="auto" color="text"/>;
+  return <IconSvg name={ ICONS[String(statusCode)] || ICONS['500'] } width="200px" height="auto" color="text"/>;
 };
 
 export default AppErrorIcon;

ui/shared/AppError/custom/AppErrorInvalidTxHash.tsx

 /* eslint-disable max-len */
-import { Box, OrderedList, ListItem, Icon, useColorModeValue, Flex } from '@chakra-ui/react';
+import { Box, OrderedList, ListItem, useColorModeValue, Flex } from '@chakra-ui/react';
 import React from 'react';
 
-import txIcon from 'icons/transactions.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
 import AppErrorTitle from '../AppErrorTitle';
 
@@ -18,7 +18,7 @@ const AppErrorInvalidTxHash = () => {
     <>
       <Box p={ 4 } borderColor={ snippet.borderColor } borderRadius="md" w="230px" borderWidth="1px">
         <Flex alignItems="center" pb={ 4 } borderBottomWidth="1px" borderColor={ snippet.borderColor }>
-          <Icon as={ txIcon } boxSize={ 8 } color={ snippet.iconColor } bgColor={ snippet.iconBg } p={ 1 } borderRadius="md"/>
+          <IconSvg name="transactions" boxSize={ 8 } color={ snippet.iconColor } bgColor={ snippet.iconBg } p={ 1 } borderRadius="md"/>
           <Box ml={ 2 }>
             <Box w="125px" h="8px" borderRadius="full" bgColor={ snippet.iconBg }/>
             <Box w="30px" h="8px" borderRadius="full" bgColor={ snippet.borderColor } mt={ 1.5 }/>

ui/shared/ClearButton.tsx

-import { chakra, Icon, IconButton, useColorModeValue } from '@chakra-ui/react';
+import { chakra, IconButton, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-import errorIcon from 'icons/status/error.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   onClick: (e: React.SyntheticEvent) => void;
@@ -21,7 +21,7 @@ const ClearButton = ({ onClick, isDisabled, className }: Props) => {
       aria-label="Clear input"
       title="Clear input"
       boxSize={ 6 }
-      icon={ <Icon as={ errorIcon } boxSize={ 3 } color={ iconColor } focusable={ false } _hover={{ color: iconColorHover }}/> }
+      icon={ <IconSvg name="status/error" boxSize={ 3 } color={ iconColor } _hover={{ color: iconColorHover }}/> }
       size="sm"
       onClick={ onClick }
     />

ui/shared/CopyToClipboard.tsx

 import { IconButton, Tooltip, useClipboard, chakra, useDisclosure, Skeleton } from '@chakra-ui/react';
 import React, { useEffect, useState } from 'react';
 
-import CopyIcon from 'icons/copy.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
 export interface Props {
   text: string;
@@ -31,7 +31,7 @@ const CopyToClipboard = ({ text, className, isLoading }: Props) => {
     <Tooltip label={ copied ? 'Copied' : 'Copy to clipboard' } isOpen={ isOpen || copied }>
       <IconButton
         aria-label="copy"
-        icon={ <CopyIcon/> }
+        icon={ <IconSvg name="copy" boxSize={ 5 }/> }
         w="20px"
         h="20px"
         color="gray.400"

ui/shared/EmptySearchResult.tsx

-import { Box, Heading, Icon, Text } from '@chakra-ui/react';
+import { Box, Heading, Text } from '@chakra-ui/react';
 import React from 'react';
 
-import emptyIcon from 'icons/empty_search_result.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   text: string;
@@ -14,8 +14,8 @@ const EmptySearchResult = ({ text }: Props) => {
       flexDirection="column"
       alignItems="center"
     >
-      <Icon
-        as={ emptyIcon }
+      <IconSvg
+        name="empty_search_result"
         boxSize={ 60 }
         display="block"
       />

ui/shared/Hint.tsx

@@ -2,7 +2,7 @@ import type { TooltipProps } from '@chakra-ui/react';
 import { chakra, IconButton, Tooltip, useDisclosure, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import InfoIcon from 'icons/info.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   label: string | React.ReactNode;
@@ -35,7 +35,7 @@ const Hint = ({ label, className, tooltipProps, isLoading }: Props) => {
       <IconButton
         colorScheme="none"
         aria-label="hint"
-        icon={ <InfoIcon/> }
+        icon={ <IconSvg name="info" boxSize={ 5 }/> }
         boxSize={ 5 }
         variant="simple"
         display="inline-block"

ui/shared/LinkExternal.tsx

 import type { ChakraProps } from '@chakra-ui/react';
-import { Link, Icon, chakra, Box, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import { Link, chakra, Box, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-import arrowIcon from 'icons/arrows/north-east.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   href: string;
@@ -59,7 +59,7 @@ const LinkExternal = ({ href, children, className, isLoading, variant }: Props)
   return (
     <Link className={ className } { ...styleProps } target="_blank" href={ href }>
       { children }
-      <Icon as={ arrowIcon } boxSize={ 4 } verticalAlign="middle" color="gray.400"/>
+      <IconSvg name="arrows/north-east" boxSize={ 4 } verticalAlign="middle" color="gray.400"/>
     </Link>
   );
 };

ui/shared/NetworkExplorers.tsx

-import { Flex, Button, Icon, chakra, Popover, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure } from '@chakra-ui/react';
+import { Flex, Button, chakra, Popover, PopoverTrigger, PopoverBody, PopoverContent, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 
 import type { NetworkExplorer as TNetworkExplorer } from 'types/networks';
 
 import config from 'configs/app';
-import arrowIcon from 'icons/arrows/east-mini.svg';
-import explorerIcon from 'icons/explorer.svg';
 import stripTrailingSlash from 'lib/stripTrailingSlash';
+import IconSvg from 'ui/shared/IconSvg';
 import LinkExternal from 'ui/shared/LinkExternal';
 
 interface Props {
@@ -46,8 +45,8 @@ const NetworkExplorers = ({ className, type, pathParam }: Props) => {
           h="32px"
           flexShrink={ 0 }
         >
-          <Icon as={ explorerIcon } boxSize={ 5 }/>
-          <Icon as={ arrowIcon } transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } transitionDuration="faster" boxSize={ 5 }/>
+          <IconSvg name="explorer" boxSize={ 5 }/>
+          <IconSvg name="arrows/east-mini" transform={ isOpen ? 'rotate(90deg)' : 'rotate(-90deg)' } transitionDuration="faster" boxSize={ 5 }/>
         </Button>
       </PopoverTrigger>
       <PopoverContent w="240px">

ui/shared/Page/PageTitle.tsx

-import { Heading, Flex, Tooltip, Icon, Link, chakra, Skeleton, useDisclosure } from '@chakra-ui/react';
+import { Heading, Flex, Tooltip, Link, chakra, Skeleton, useDisclosure } from '@chakra-ui/react';
 import _debounce from 'lodash/debounce';
 import React from 'react';
 
-import eastArrowIcon from 'icons/arrows/east.svg';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import TextAd from 'ui/shared/ad/TextAd';
+import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/LinkInternal';
 
 type BackLinkProp = { label: string; url: string } | { label: string; onClick: () => void };
@@ -32,7 +32,7 @@ const BackLink = (props: BackLinkProp & { isLoading?: boolean }) => {
     return <Skeleton boxSize={ 6 } display="inline-block" borderRadius="base" mr={ 3 } my={ 2 } verticalAlign="text-bottom" isLoaded={ !props.isLoading }/>;
   }
 
-  const icon = <Icon as={ eastArrowIcon } boxSize={ 6 } transform="rotate(180deg)" margin="auto" color="gray.400"/>;
+  const icon = <IconSvg name="arrows/east" boxSize={ 6 } transform="rotate(180deg)" margin="auto" color="gray.400"/>;
 
   if ('url' in props) {
     return (

ui/shared/Page/specs/DefaultView.tsx

-import { Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenInfo } from 'types/api/token';
 
-import iconVerifiedToken from 'icons/verified_token.svg';
 import * as addressMock from 'mocks/address/address';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import EntityTags from 'ui/shared/EntityTags';
+import IconSvg from 'ui/shared/IconSvg';
 import NetworkExplorers from 'ui/shared/NetworkExplorers';
 
 import PageTitle from '../PageTitle';
@@ -33,7 +32,7 @@ const DefaultView = () => {
 
   const contentAfter = (
     <>
-      <Icon as={ iconVerifiedToken } color="green.500" boxSize={ 6 } cursor="pointer"/>
+      <IconSvg name="verified_token" color="green.500" boxSize={ 6 } cursor="pointer"/>
       <EntityTags
         tagsBefore={ [
           { label: 'example', display_name: 'Example label' },

ui/shared/Page/specs/LongNameAndManyTags.tsx

 /* eslint-disable max-len */
-import { Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenInfo } from 'types/api/token';
 
-import iconVerifiedToken from 'icons/verified_token.svg';
 import { publicTag, privateTag, watchlistName } from 'mocks/address/tag';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import EntityTags from 'ui/shared/EntityTags';
+import IconSvg from 'ui/shared/IconSvg';
 import NetworkExplorers from 'ui/shared/NetworkExplorers';
 
 import PageTitle from '../PageTitle';
@@ -28,7 +27,7 @@ const LongNameAndManyTags = () => {
 
   const contentAfter = (
     <>
-      <Icon as={ iconVerifiedToken } color="green.500" boxSize={ 6 } cursor="pointer"/>
+      <IconSvg name="verified_token" color="green.500" boxSize={ 6 } cursor="pointer"/>
       <EntityTags
         data={{
           private_tags: [ privateTag ],

ui/shared/PrevNext.tsx

-import { Box, Icon, IconButton, chakra, Tooltip, Flex, Skeleton } from '@chakra-ui/react';
+import { Box, IconButton, chakra, Tooltip, Flex, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import eastArrow from 'icons/arrows/east-mini.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   className?: string;
@@ -36,7 +36,7 @@ const PrevNext = ({ className, onClick, prevLabel, nextLabel, isPrevDisabled, is
       <Tooltip label={ prevLabel }>
         <IconButton
           aria-label="prev"
-          icon={ <Icon as={ eastArrow } boxSize={ 6 }/> }
+          icon={ <IconSvg name="arrows/east-mini" boxSize={ 6 }/> }
           h={ 6 }
           borderRadius="sm"
           variant="subtle"
@@ -48,7 +48,7 @@ const PrevNext = ({ className, onClick, prevLabel, nextLabel, isPrevDisabled, is
       <Tooltip label={ nextLabel }>
         <IconButton
           aria-label="next"
-          icon={ <Icon as={ eastArrow }boxSize={ 6 } transform="rotate(180deg)"/> }
+          icon={ <IconSvg name="arrows/east-mini" boxSize={ 6 } transform="rotate(180deg)"/> }
           h={ 6 }
           borderRadius="sm"
           variant="subtle"

ui/shared/ResetIconButton.tsx

-import { Tooltip, Flex, Icon, useColorModeValue } from '@chakra-ui/react';
+import { Tooltip, Flex, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-import crossIcon from 'icons/cross.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
 type Props = {
   onClick: () => void;
@@ -14,8 +14,8 @@ const ResetIconButton = ({ onClick }: Props) => {
   return (
     <Tooltip label="Reset filter">
       <Flex>
-        <Icon
-          as={ crossIcon }
+        <IconSvg
+          name="cross"
           boxSize={ 5 }
           ml={ 1 }
           color={ resetTokenIconColor }

ui/shared/TableItemActionButtons.tsx

 import { Tooltip, IconButton, HStack, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import DeleteIcon from 'icons/delete.svg';
-import EditIcon from 'icons/edit.svg';
 import usePreventFocusAfterModalClosing from 'lib/hooks/usePreventFocusAfterModalClosing';
+import IconSvg from 'ui/shared/IconSvg';
 
 type Props = {
   onEditClick: () => void;
@@ -31,7 +30,7 @@ const TableItemActionButtons = ({ onEditClick, onDeleteClick, isLoading }: Props
           variant="simple"
           boxSize={ 5 }
           onClick={ onEditClick }
-          icon={ <EditIcon/> }
+          icon={ <IconSvg name="edit" boxSize={ 5 }/> }
           onFocusCapture={ onFocusCapture }
           display="inline-block"
           flexShrink={ 0 }
@@ -44,7 +43,7 @@ const TableItemActionButtons = ({ onEditClick, onDeleteClick, isLoading }: Props
           variant="simple"
           boxSize={ 5 }
           onClick={ onDeleteClick }
-          icon={ <DeleteIcon/> }
+          icon={ <IconSvg name="delete" boxSize={ 5 }/> }
           onFocusCapture={ onFocusCapture }
           display="inline-block"
           flexShrink={ 0 }

ui/shared/TokenLogoPlaceholder.tsx

-import { chakra, Icon, useColorModeValue } from '@chakra-ui/react';
+import { chakra, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-import tokenPlaceholderIcon from 'icons/token-placeholder.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
 const TokenLogoPlaceholder = ({ className }: { className?: string }) => {
   const bgColor = useColorModeValue('gray.200', 'gray.600');
   const color = useColorModeValue('gray.400', 'gray.200');
 
   return (
-    <Icon
+    <IconSvg
       className={ className }
       fontWeight={ 600 }
       bgColor={ bgColor }
       color={ color }
       borderRadius="base"
-      as={ tokenPlaceholderIcon }
+      name="token-placeholder"
       transitionProperty="background-color,color"
       transitionDuration="normal"
       transitionTimingFunction="ease"

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -3,15 +3,14 @@ import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
-import eastArrowIcon from 'icons/arrows/east.svg';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
-import Icon from 'ui/shared/chakra/Icon';
 import Tag from 'ui/shared/chakra/Tag';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import IconSvg from 'ui/shared/IconSvg';
 import InOutTag from 'ui/shared/InOutTag';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
@@ -100,7 +99,7 @@ const TokenTransferListItem = ({
             flexShrink={ 0 }
           />
         ) :
-          <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500" isLoading={ isLoading } flexShrink={ 0 }/>
+          <IconSvg name="arrows/east" boxSize={ 6 } color="gray.500" isLoading={ isLoading } flexShrink={ 0 }/>
         }
         <AddressEntity
           address={ to }

ui/shared/UserAvatar.tsx

-import { SkeletonCircle, Image, Icon } from '@chakra-ui/react';
+import { SkeletonCircle, Image } from '@chakra-ui/react';
 import React from 'react';
 
-import profileIcon from 'icons/profile.svg';
 import { useAppContext } from 'lib/contexts/app';
 import * as cookies from 'lib/cookies';
 import useFetchProfileInfo from 'lib/hooks/useFetchProfileInfo';
+import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   size: number;
@@ -34,7 +34,7 @@ const UserAvatar = ({ size }: Props) => {
       boxSize={ `${ size }px` }
       borderRadius="full"
       overflow="hidden"
-      fallback={ isImageLoadError || !data?.avatar ? <Icon as={ profileIcon } boxSize={ 5 }/> : undefined }
+      fallback={ isImageLoadError || !data?.avatar ? <IconSvg name="profile" boxSize={ 5 }/> : undefined }
       onError={ handleImageLoadError }
     />
   );

ui/shared/chart/ChartWidget.tsx

@@ -3,7 +3,6 @@ import {
   Center,
   chakra,
   Flex,
-  Icon,
   IconButton, Link,
   Menu,
   MenuButton,
@@ -20,14 +19,10 @@ import React, { useRef, useCallback, useState } from 'react';
 
 import type { TimeChartItem } from './types';
 
-import svgFileIcon from 'icons/files/csv.svg';
-import imageIcon from 'icons/files/image.svg';
-import repeatArrowIcon from 'icons/repeat_arrow.svg';
-import scopeIcon from 'icons/scope.svg';
-import dotsIcon from 'icons/vertical_dots.svg';
 import dayjs from 'lib/date/dayjs';
 import { apos } from 'lib/html-entities';
 import saveAsCSV from 'lib/saveAsCSV';
+import IconSvg from 'ui/shared/IconSvg';
 
 import ChartWidgetGraph from './ChartWidgetGraph';
 import FullscreenChartModal from './FullscreenChartModal';
@@ -202,7 +197,7 @@ const ChartWidget = ({ items, title, description, isLoading, className, isError,
                 size="sm"
                 variant="outline"
                 onClick={ handleZoomResetClick }
-                icon={ <Icon as={ repeatArrowIcon } w={ 4 } h={ 4 }/> }
+                icon={ <IconSvg name="repeat_arrow" w={ 4 } h={ 4 }/> }
               />
             </Tooltip>
 
@@ -212,7 +207,7 @@ const ChartWidget = ({ items, title, description, isLoading, className, isError,
                   <MenuButton
                     w="36px"
                     h="32px"
-                    icon={ <Icon as={ dotsIcon } w={ 4 } h={ 4 }/> }
+                    icon={ <IconSvg name="vertical_dots" w={ 4 } h={ 4 }/> }
                     colorScheme="gray"
                     variant="ghost"
                     as={ IconButton }
@@ -228,7 +223,7 @@ const ChartWidget = ({ items, title, description, isLoading, className, isError,
                     alignItems="center"
                     onClick={ showChartFullscreen }
                   >
-                    <Icon as={ scopeIcon } boxSize={ 5 } mr={ 3 }/>
+                    <IconSvg name="scope" boxSize={ 5 } mr={ 3 }/>
                   View fullscreen
                   </MenuItem>
 
@@ -237,7 +232,7 @@ const ChartWidget = ({ items, title, description, isLoading, className, isError,
                     alignItems="center"
                     onClick={ handleFileSaveClick }
                   >
-                    <Icon as={ imageIcon } boxSize={ 5 } mr={ 3 }/>
+                    <IconSvg name="files/image" boxSize={ 5 } mr={ 3 }/>
                   Save as PNG
                   </MenuItem>
 
@@ -246,7 +241,7 @@ const ChartWidget = ({ items, title, description, isLoading, className, isError,
                     alignItems="center"
                     onClick={ handleSVGSavingClick }
                   >
-                    <Icon as={ svgFileIcon } boxSize={ 5 } mr={ 3 }/>
+                    <IconSvg name="files/csv" boxSize={ 5 } mr={ 3 }/>
                   Save as CSV
                   </MenuItem>
                 </MenuList>

ui/shared/chart/FullscreenChartModal.tsx

-import { Box, Button, Grid, Heading, Icon, Modal, ModalBody, ModalCloseButton, ModalContent, ModalOverlay, Text } from '@chakra-ui/react';
+import { Box, Button, Grid, Heading, Modal, ModalBody, ModalCloseButton, ModalContent, ModalOverlay, Text } from '@chakra-ui/react';
 import React, { useCallback } from 'react';
 
 import type { TimeChartItem } from './types';
 
-import repeatArrow from 'icons/repeat_arrow.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
 import ChartWidgetGraph from './ChartWidgetGraph';
 
@@ -71,7 +71,7 @@ const FullscreenChartModal = ({
 
             { !isZoomResetInitial && (
               <Button
-                leftIcon={ <Icon as={ repeatArrow } w={ 4 } h={ 4 }/> }
+                leftIcon={ <IconSvg name="repeat_arrow" w={ 4 } h={ 4 }/> }
                 colorScheme="blue"
                 gridColumn={ 2 }
                 justifySelf="end"

ui/shared/filters/FilterButton.tsx

 import type { As } from '@chakra-ui/react';
-import { Skeleton, Box, Button, Circle, Icon, useColorModeValue } from '@chakra-ui/react';
+import { Skeleton, Box, Button, Circle, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-import filterIcon from 'icons/filter.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
-const FilterIcon = <Icon as={ filterIcon } boxSize={ 5 } mr={{ base: 0, lg: 2 }}/>;
+const FilterIcon = <IconSvg name="filter" boxSize={ 5 } mr={{ base: 0, lg: 2 }}/>;
 
 interface Props {
   isActive?: boolean;

ui/shared/filters/FilterInput.tsx

-import { chakra, Icon, Input, InputGroup, InputLeftElement, InputRightElement, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import { chakra, Input, InputGroup, InputLeftElement, InputRightElement, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import type { ChangeEvent } from 'react';
 import React, { useCallback, useState } from 'react';
 
-import searchIcon from 'icons/search.svg';
 import ClearButton from 'ui/shared/ClearButton';
+import IconSvg from 'ui/shared/IconSvg';
 
 type Props = {
   onChange: (searchTerm: string) => void;
@@ -44,7 +44,7 @@ const FilterInput = ({ onChange, className, size = 'sm', placeholder, initialVal
         <InputLeftElement
           pointerEvents="none"
         >
-          <Icon as={ searchIcon } color={ iconColor }/>
+          <IconSvg name="search" color={ iconColor }/>
         </InputLeftElement>
 
         <Input

ui/shared/forms/FileSnippet.tsx

-import { Box, Flex, Icon, Text, useColorModeValue, IconButton, chakra, Tooltip } from '@chakra-ui/react';
+import { Box, Flex, Text, useColorModeValue, IconButton, chakra, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
-import CrossIcon from 'icons/cross.svg';
-import jsonIcon from 'icons/files/json.svg';
-import placeholderIcon from 'icons/files/placeholder.svg';
-import solIcon from 'icons/files/sol.svg';
-import yulIcon from 'icons/files/yul.svg';
-import infoIcon from 'icons/info.svg';
+import type { IconName } from 'ui/shared/IconSvg';
+import IconSvg from 'ui/shared/IconSvg';
 
-const FILE_ICONS: Record<string, React.FunctionComponent<React.SVGAttributes<SVGElement>>> = {
-  '.json': jsonIcon,
-  '.sol': solIcon,
-  '.yul': yulIcon,
+const FILE_ICONS: Record<string, IconName> = {
+  '.json': 'files/json',
+  '.sol': 'files/sol',
+  '.yul': 'files/yul',
 };
 
 function getFileExtension(fileName: string) {
@@ -44,7 +40,7 @@ const FileSnippet = ({ file, className, index, onRemove, isDisabled, error }: Pr
   }, []);
 
   const fileExtension = getFileExtension(file.name);
-  const fileIcon = FILE_ICONS[fileExtension] || placeholderIcon;
+  const fileIcon = FILE_ICONS[fileExtension] || 'files/placeholder';
   const iconColor = useColorModeValue('gray.600', 'gray.400');
 
   return (
@@ -55,8 +51,8 @@ const FileSnippet = ({ file, className, index, onRemove, isDisabled, error }: Pr
       alignItems="center"
       textAlign="left"
     >
-      <Icon
-        as={ fileIcon }
+      <IconSvg
+        name={ fileIcon }
         boxSize="74px"
         color={ error ? 'error' : iconColor }
         mr={ 2 }
@@ -83,13 +79,13 @@ const FileSnippet = ({ file, className, index, onRemove, isDisabled, error }: Pr
               maxW="320px"
             >
               <Box cursor="pointer" display="inherit" onClick={ handleErrorHintIconClick } ml={ 1 }>
-                <Icon as={ infoIcon } boxSize={ 5 } color="error"/>
+                <IconSvg name="info" boxSize={ 5 } color="error"/>
               </Box>
             </Tooltip>
           ) }
           <IconButton
             aria-label="remove"
-            icon={ <CrossIcon/> }
+            icon={ <IconSvg name="cross" boxSize={ 6 }/> }
             boxSize={ 6 }
             variant="simple"
             display="inline-block"

ui/shared/monaco/CodeEditorMainFileIndicator.tsx

-import { Box, chakra, Icon, Tooltip } from '@chakra-ui/react';
+import { Box, chakra, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
-import iconStar from 'icons/star_filled.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   className?: string;
@@ -11,7 +11,7 @@ const CodeEditorMainFileIndicator = ({ className }: Props) => {
   return (
     <Tooltip label="The main file containing verified contract">
       <Box className={ className } >
-        <Icon as={ iconStar } boxSize={ 3 } display="block" color="green.500"/>
+        <IconSvg name="star_filled" boxSize={ 3 } display="block" color="green.500"/>
       </Box>
     </Tooltip>
   );

ui/shared/nft/NftFallback.tsx

-import { Icon, useColorModeValue, chakra } from '@chakra-ui/react';
+import { useColorModeValue, chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import nftIcon from 'icons/nft_shield.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
 const NftFallback = ({ className }: {className?: string}) => {
   return (
-    <Icon
+    <IconSvg
       className={ className }
-      as={ nftIcon }
+      name="nft_shield"
       p="50px"
       color={ useColorModeValue('blackAlpha.500', 'whiteAlpha.500') }
       bgColor={ useColorModeValue('blackAlpha.50', 'whiteAlpha.50') }

ui/shared/pagination/Pagination.tsx

-import { Button, Skeleton, Flex, Icon, IconButton, chakra } from '@chakra-ui/react';
+import { Button, Skeleton, Flex, IconButton, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { PaginationParams } from './types';
 
-import arrowIcon from 'icons/arrows/east-mini.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
 interface Props extends PaginationParams {
   className?: string;
@@ -40,7 +40,7 @@ const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasPage
           size="sm"
           aria-label="Prev page"
           w="36px"
-          icon={ <Icon as={ arrowIcon } w={ 5 } h={ 5 }/> }
+          icon={ <IconSvg name="arrows/east-mini" w={ 5 } h={ 5 }/> }
           isDisabled={ !canGoBackwards || isLoading }
         />
       </Skeleton>
@@ -65,7 +65,7 @@ const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasPage
           size="sm"
           aria-label="Next page"
           w="36px"
-          icon={ <Icon as={ arrowIcon } w={ 5 } h={ 5 } transform="rotate(180deg)"/> }
+          icon={ <IconSvg name="arrows/east-mini" w={ 5 } h={ 5 } transform="rotate(180deg)"/> }
           isDisabled={ !hasNextPage || isLoading }
         />
       </Skeleton>

ui/shared/radioButtonGroup/specs/RadioButtonGroupTest.tsx

@@ -2,15 +2,6 @@ import React from 'react';
 
 import RadioButtonGroup from '../RadioButtonGroup';
 
-const TestIcon = ({ className }: {className?: string}) => {
-  return (
-    <svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" className={ className }>
-      { /* eslint-disable-next-line max-len */ }
-      <path fillRule="evenodd" clipRule="evenodd" d="M3.5 11a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0ZM11 1C5.477 1 1 5.477 1 11s4.477 10 10 10 10-4.477 10-10S16.523 1 11 1Zm1.25 5a1.25 1.25 0 1 0-2.5 0v5c0 .69.56 1.25 1.25 1.25h5a1.25 1.25 0 1 0 0-2.5h-3.75V6Z" fill="currentColor" stroke="transparent" strokeWidth=".6" strokeLinecap="round" strokeLinejoin="round"/>
-    </svg>
-  );
-};
-
 type Test = 'v1' | 'v2' | 'v3';
 
 const RadioButtonGroupTest = () => {
@@ -21,9 +12,9 @@ const RadioButtonGroupTest = () => {
       defaultValue="v1"
       name="test"
       options={ [
-        { value: 'v1', title: 'test option 1', icon: TestIcon, onlyIcon: false },
+        { value: 'v1', title: 'test option 1', icon: 'clock', onlyIcon: false },
         { value: 'v2', title: 'test 2', onlyIcon: false },
-        { value: 'v2', title: 'test 2', icon: TestIcon, onlyIcon: true },
+        { value: 'v2', title: 'test 2', icon: 'clock', onlyIcon: true },
       ] }
     />
   );

ui/shared/sort/SortButton.tsx

-import { Icon, IconButton, chakra, Skeleton } from '@chakra-ui/react';
+import { IconButton, chakra, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import upDownArrow from 'icons/arrows/up-down.svg';
+import IconSvg from 'ui/shared/IconSvg';
 
 type Props = {
   onClick: () => void;
@@ -17,7 +17,7 @@ const SortButton = ({ onClick, isActive, className, isLoading }: Props) => {
 
   return (
     <IconButton
-      icon={ <Icon as={ upDownArrow } boxSize={ 5 }/> }
+      icon={ <IconSvg name="arrows/up-down" boxSize={ 5 }/> }
       aria-label="sort"
       size="sm"
       variant="outline"

ui/shared/statusTag/StatusTag.tsx

-import { TagLabel, TagLeftIcon, Tooltip } from '@chakra-ui/react';
+import { TagLabel, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
-import errorIcon from 'icons/status/error.svg';
-import pendingIcon from 'icons/status/pending.svg';
-import successIcon from 'icons/status/success.svg';
 import Tag from 'ui/shared/chakra/Tag';
+import type { IconName } from 'ui/shared/IconSvg';
+import IconSvg from 'ui/shared/IconSvg';
 
 export type StatusTagType = 'ok' | 'error' | 'pending';
 
@@ -16,20 +15,20 @@ export interface Props {
 }
 
 const StatusTag = ({ type, text, errorText, isLoading }: Props) => {
-  let icon;
+  let icon: IconName;
   let colorScheme;
 
   switch (type) {
     case 'ok':
-      icon = successIcon;
+      icon = 'status/success';
       colorScheme = 'green';
       break;
     case 'error':
-      icon = errorIcon;
+      icon = 'status/error';
       colorScheme = 'red';
       break;
     case 'pending':
-      icon = pendingIcon;
+      icon = 'status/pending';
       // FIXME: it's not gray on mockups
       // need to implement new color scheme or redefine colors here
       colorScheme = 'gray';
@@ -39,7 +38,7 @@ const StatusTag = ({ type, text, errorText, isLoading }: Props) => {
   return (
     <Tooltip label={ errorText }>
       <Tag colorScheme={ colorScheme } display="inline-flex" isLoading={ isLoading }>
-        <TagLeftIcon boxSize={ 2.5 } as={ icon }/>
+        <IconSvg boxSize={ 2.5 } name={ icon }/>
         <TagLabel>{ text }</TagLabel>
       </Tag>
     </Tooltip>