diff --git a/package.json b/package.json
index c07c9b2e..6b5edfe0 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "@bgd-labs/aave-address-book": "^2.30.0",
     "@bgd-labs/aave-governance-ui-helpers": "^3.1.5",
     "@bgd-labs/frontend-web3-utils": "^1.3.0",
-    "@bgd-labs/react-web3-icons": "^0.0.49",
+    "@bgd-labs/react-web3-icons": "0.0.68",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/server": "^11.11.0",
diff --git a/src/delegate/components/MobileCard.tsx b/src/delegate/components/MobileCard.tsx
index 4aaf982b..ee006153 100644
--- a/src/delegate/components/MobileCard.tsx
+++ b/src/delegate/components/MobileCard.tsx
@@ -1,10 +1,15 @@
+import {
+  IconVariant,
+  Web3IconType,
+} from '@bgd-labs/react-web3-icons/dist/utils/index';
 import { Box, useTheme } from '@mui/system';
+import React from 'react';
 
 import { useStore } from '../../store/ZustandStoreProvider';
 import { BoxWith3D } from '../../ui';
 import { CustomSkeleton } from '../../ui/components/CustomSkeleton';
 import { FormattedNumber } from '../../ui/components/FormattedNumber';
-import { AssetIcon } from '../../ui/components/Web3Icons/AssetIcon';
+import { Web3Icon } from '../../ui/components/Web3Icon';
 import { texts } from '../../ui/utils/texts';
 import { getFormDelegateData } from '../utils/getFormDelegateData';
 import { DelegateTableItemAddress } from './DelegateTableItemAddress';
@@ -60,9 +65,13 @@ export function MobileCard({
                 <CustomSkeleton circle width={30} height={30} />
               </Box>
             ) : (
-              <AssetIcon
-                symbol={symbol}
-                css={{ mr: 4, width: 30, height: 30 }}
+              <Web3Icon
+                size={30}
+                css={{ mr: 4 }}
+                iconInfo={{
+                  type: Web3IconType.asset,
+                  info: { symbol, variant: IconVariant.Full },
+                }}
               />
             )}
             {!symbol ? (
diff --git a/src/delegate/components/TableItem.tsx b/src/delegate/components/TableItem.tsx
index 0c651e59..f702120d 100644
--- a/src/delegate/components/TableItem.tsx
+++ b/src/delegate/components/TableItem.tsx
@@ -1,12 +1,17 @@
 import { Asset } from '@bgd-labs/aave-governance-ui-helpers';
+import {
+  IconVariant,
+  Web3IconType,
+} from '@bgd-labs/react-web3-icons/dist/utils/index';
 import { Box, useTheme } from '@mui/system';
+import React from 'react';
 import { Address } from 'viem';
 
 import { useStore } from '../../store/ZustandStoreProvider';
 import { Divider } from '../../ui';
 import { CustomSkeleton } from '../../ui/components/CustomSkeleton';
 import { FormattedNumber } from '../../ui/components/FormattedNumber';
-import { AssetIcon } from '../../ui/components/Web3Icons/AssetIcon';
+import { Web3Icon } from '../../ui/components/Web3Icon';
 import { DelegateData } from '../types';
 import { getFormDelegateData } from '../utils/getFormDelegateData';
 import { DelegateTableItemAddress } from './DelegateTableItemAddress';
@@ -82,9 +87,13 @@ export function TableItem({
               <CustomSkeleton circle width={35} height={35} />
             </Box>
           ) : (
-            <AssetIcon
-              symbol={symbol}
-              css={{ mr: 16, width: 35, height: 35 }}
+            <Web3Icon
+              size={35}
+              css={{ mr: 16 }}
+              iconInfo={{
+                type: Web3IconType.asset,
+                info: { symbol, variant: IconVariant.Full },
+              }}
             />
           )}
           <Box sx={{ display: 'flex', flexDirection: 'column' }}>
diff --git a/src/proposals/components/EditVotingTokensContent.tsx b/src/proposals/components/EditVotingTokensContent.tsx
index a6a1f8fd..ed44556d 100644
--- a/src/proposals/components/EditVotingTokensContent.tsx
+++ b/src/proposals/components/EditVotingTokensContent.tsx
@@ -2,12 +2,16 @@ import {
   Balance,
   valueToBigNumber,
 } from '@bgd-labs/aave-governance-ui-helpers';
+import {
+  IconVariant,
+  Web3IconType,
+} from '@bgd-labs/react-web3-icons/dist/utils/index';
 import { Box } from '@mui/system';
 import React, { useState } from 'react';
 
 import { BackButton3D, Divider } from '../../ui';
 import { FormattedNumber } from '../../ui/components/FormattedNumber';
-import { AssetIcon } from '../../ui/components/Web3Icons/AssetIcon';
+import { Web3Icon } from '../../ui/components/Web3Icon';
 import { texts } from '../../ui/utils/texts';
 import { RepresentationIcon } from './RepresentationIcon';
 
@@ -215,9 +219,13 @@ export function EditVotingTokensContent({
               onClick={() => handleChange(item.underlyingAsset, !item.isActive)}
               key={index}>
               <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                <AssetIcon
-                  symbol={item.tokenName}
-                  css={{ width: 21, height: 21, mr: 10 }}
+                <Web3Icon
+                  size={21}
+                  css={{ mr: 10 }}
+                  iconInfo={{
+                    type: Web3IconType.asset,
+                    info: { symbol: item.tokenName, variant: IconVariant.Full },
+                  }}
                 />
                 <Box component="p" sx={{ typography: 'h3', fontWeight: 600 }}>
                   {item.tokenName}
diff --git a/src/representations/components/TableItem.tsx b/src/representations/components/TableItem.tsx
index 08b58509..cbaf116f 100644
--- a/src/representations/components/TableItem.tsx
+++ b/src/representations/components/TableItem.tsx
@@ -91,6 +91,7 @@ export function TableItem({
           ) : (
             <NetworkIcon
               chainId={chainId}
+              size={35}
               css={{ mr: 12, width: 35, height: 35 }}
             />
           )}
diff --git a/src/rpcSwitcher/components/TableItem.tsx b/src/rpcSwitcher/components/TableItem.tsx
index d537a2b8..a5c04919 100644
--- a/src/rpcSwitcher/components/TableItem.tsx
+++ b/src/rpcSwitcher/components/TableItem.tsx
@@ -75,6 +75,7 @@ export function TableItem({
           ) : (
             <NetworkIcon
               chainId={chainId}
+              size={35}
               css={{ mr: 12, width: 35, height: 35 }}
             />
           )}
diff --git a/src/ui/components/NetworkIcon.tsx b/src/ui/components/NetworkIcon.tsx
index f8969679..5cee1994 100644
--- a/src/ui/components/NetworkIcon.tsx
+++ b/src/ui/components/NetworkIcon.tsx
@@ -1,10 +1,14 @@
+import {
+  IconVariant,
+  Web3IconType,
+} from '@bgd-labs/react-web3-icons/dist/utils';
 import { Box, SxProps } from '@mui/system';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { toHex } from 'viem';
 
 import { chainInfoHelper } from '../../utils/configs';
 import { Tooltip } from './Tooltip';
-import { ChainIcon } from './Web3Icons/ChainIcon';
+import { Web3Icon } from './Web3Icon';
 
 interface NetworkIconProps {
   chainId: number;
@@ -45,10 +49,24 @@ export function NetworkIcon({
               {chain.name}: {chain.id} <br /> ({toHex(chain.id)})
             </Box>
           }>
-          <ChainIcon chainId={chainId} size={size} css={css} />
+          <Web3Icon
+            iconInfo={{
+              type: Web3IconType.chain,
+              info: { chainId: chainId, variant: IconVariant.Full },
+            }}
+            size={size ?? 16}
+            css={css}
+          />
         </Tooltip>
       ) : (
-        <ChainIcon chainId={chainId} size={size} css={css} />
+        <Web3Icon
+          iconInfo={{
+            type: Web3IconType.chain,
+            info: { chainId: chainId, variant: IconVariant.Full },
+          }}
+          size={size ?? 16}
+          css={css}
+        />
       )}
     </>
   );
diff --git a/src/ui/components/SelectField.tsx b/src/ui/components/SelectField.tsx
index 8269ae8f..1c6f6f12 100644
--- a/src/ui/components/SelectField.tsx
+++ b/src/ui/components/SelectField.tsx
@@ -65,10 +65,10 @@ export function SelectField({
               },
             }}>
             <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
-              {!!(value || value === 0) && withChainIcon && (
+              {withChainIcon && (
                 <NetworkIcon chainId={value} size={14} css={{ mr: 8 }} />
               )}
-              {!!(value || value === 0)
+              {value || value === 0
                 ? withChainName
                   ? getChainName(value)
                   : value
@@ -125,11 +125,16 @@ export function SelectField({
                     backgroundColor: theme.palette.$light,
                   },
                 }}>
-                {withChainName
-                  ? getChainName(option)
-                  : withMyself && option === ''
-                    ? 'Myself'
-                    : option}
+                <Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
+                  {withChainIcon && (
+                    <NetworkIcon chainId={option} size={14} css={{ mr: 8 }} />
+                  )}
+                  {withChainName
+                    ? getChainName(option)
+                    : withMyself && option === ''
+                      ? 'Myself'
+                      : option}
+                </Box>
               </Listbox.Option>
             ))}
           </Listbox.Options>
diff --git a/src/ui/components/Web3Icon.tsx b/src/ui/components/Web3Icon.tsx
new file mode 100644
index 00000000..4df4a65c
--- /dev/null
+++ b/src/ui/components/Web3Icon.tsx
@@ -0,0 +1,110 @@
+'use client';
+
+import { Web3DynamicIcon } from '@bgd-labs/react-web3-icons';
+import {
+  AssetIconProps,
+  ChainType,
+  ComponentsFallback,
+  getAssetIconNameAndPath,
+  getChainIconNameAndPath,
+  getWalletIconNameAndPath,
+  IconInfo,
+  WalletType,
+  Web3IconType,
+} from '@bgd-labs/react-web3-icons/dist/utils';
+import { Box, SxProps } from '@mui/system';
+import { useMemo } from 'react';
+
+import { CustomSkeleton } from './CustomSkeleton';
+
+interface Web3IconProps {
+  iconInfo:
+    | IconInfo<AssetIconProps>
+    | IconInfo<Pick<ChainType, 'chainId' | 'variant'>>
+    | IconInfo<Pick<WalletType, 'name' | 'variant'>>;
+  size?: number;
+  css?: SxProps;
+}
+/**
+ * Renders an asset or chain or wallet icon specified by icon type and props.
+ */
+export const Web3Icon = ({ size, css, ...props }: Web3IconProps) => {
+  let iconPath = undefined;
+  let componentsFallback: ComponentsFallback | undefined = undefined;
+  useMemo(() => {
+    if (props.iconInfo.type === Web3IconType.asset) {
+      const assetInfo = getAssetIconNameAndPath(
+        props.iconInfo.info as AssetIconProps,
+      );
+      iconPath = assetInfo.iconPathToRepo;
+      componentsFallback = {
+        name: assetInfo.iconName,
+        path: () =>
+          import('@bgd-labs/react-web3-icons/dist/components/index.cjs'),
+      };
+    } else if (props.iconInfo.type === Web3IconType.chain) {
+      const chainInfo = getChainIconNameAndPath(
+        props.iconInfo.info as Pick<ChainType, 'chainId' | 'variant'>,
+      );
+      iconPath = chainInfo.iconPathToRepo;
+      componentsFallback = {
+        name: chainInfo.iconName,
+        path: () =>
+          import('@bgd-labs/react-web3-icons/dist/components/chains/index.cjs'),
+      };
+    } else if (props.iconInfo.type === Web3IconType.wallet) {
+      const walletInfo = getWalletIconNameAndPath(
+        props.iconInfo.info as Pick<WalletType, 'name' | 'variant'>,
+      );
+      iconPath = walletInfo.iconPathToRepo;
+      componentsFallback = {
+        name: walletInfo.iconName,
+        path: () =>
+          import(
+            '@bgd-labs/react-web3-icons/dist/components/wallets/index.cjs'
+          ),
+      };
+    }
+  }, [props]);
+
+  if (!iconPath || !componentsFallback) {
+    return (
+      <Box
+        sx={{
+          lineHeight: 0,
+          width: size ?? 12,
+          height: size ?? 12,
+          ...css,
+        }}>
+        <CustomSkeleton circle width={size ?? 12} height={size ?? 12} />
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      sx={{
+        lineHeight: 0,
+        width: size ?? 12,
+        height: size ?? 12,
+        ...css,
+      }}>
+      <Web3DynamicIcon
+        width={size ?? 12}
+        height={size ?? 12}
+        src={iconPath}
+        loader={
+          <Box
+            sx={{
+              lineHeight: 0,
+              width: size ?? 12,
+              height: size ?? 12,
+              ...css,
+            }}>
+            <CustomSkeleton circle width={size ?? 12} height={size ?? 12} />
+          </Box>
+        }
+      />
+    </Box>
+  );
+};
diff --git a/src/ui/components/Web3Icons/AssetIcon.tsx b/src/ui/components/Web3Icons/AssetIcon.tsx
deleted file mode 100644
index bc57666c..00000000
--- a/src/ui/components/Web3Icons/AssetIcon.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client';
-
-import { DynamicIcon } from '@bgd-labs/react-web3-icons';
-import {
-  AssetIconProps,
-  getAssetIconNameAndPath,
-} from '@bgd-labs/react-web3-icons/dist/utils';
-import { Box, SxProps } from '@mui/system';
-
-import { CustomSkeleton } from '../CustomSkeleton';
-
-/**
- * Renders an asset icon specified by symbol.
- */
-export const AssetIcon = ({
-  size,
-  css,
-  ...props
-}: AssetIconProps & { size?: number; css?: SxProps }) => {
-  const { iconPathToRepo, iconName } = getAssetIconNameAndPath(props);
-  return (
-    <Box
-      sx={{
-        lineHeight: 0,
-        borderRadius: '50%',
-        width: size ?? 12,
-        height: size ?? 12,
-        ...css,
-      }}>
-      <DynamicIcon
-        iconPath={iconPathToRepo}
-        iconName={iconName}
-        dynamicComponent={() =>
-          import('@bgd-labs/react-web3-icons/dist/components/index.cjs')
-        }
-        loadingComponent={
-          <CustomSkeleton circle width={size ?? 12} height={size ?? 12} />
-        }
-      />
-    </Box>
-  );
-};
diff --git a/src/ui/components/Web3Icons/ChainIcon.tsx b/src/ui/components/Web3Icons/ChainIcon.tsx
deleted file mode 100644
index 316faa50..00000000
--- a/src/ui/components/Web3Icons/ChainIcon.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-'use client';
-
-import { DynamicIcon } from '@bgd-labs/react-web3-icons';
-import {
-  ChainType,
-  getChainIconNameAndPath,
-  IconVariant,
-} from '@bgd-labs/react-web3-icons/dist/utils';
-import { Box, SxProps } from '@mui/system';
-
-import { CustomSkeleton } from '../CustomSkeleton';
-
-/**
- * Renders a chain icon specified by chain id.
- */
-export const ChainIcon = ({
-  size,
-  css,
-  ...props
-}: Pick<ChainType, 'chainId'> & {
-  variant?: IconVariant;
-  size?: number;
-  css?: SxProps;
-}) => {
-  const { iconName, iconPathToRepo } = getChainIconNameAndPath(props);
-  return (
-    <Box
-      sx={{
-        lineHeight: 0,
-        borderRadius: '50%',
-        width: size ?? 16,
-        height: size ?? 16,
-        ...css,
-      }}>
-      <DynamicIcon
-        iconPath={iconPathToRepo}
-        iconName={iconName}
-        dynamicComponent={() =>
-          import('@bgd-labs/react-web3-icons/dist/components/chains/index.cjs')
-        }
-        loadingComponent={
-          <CustomSkeleton circle width={size ?? 16} height={size ?? 16} />
-        }
-      />
-    </Box>
-  );
-};
diff --git a/src/web3/components/powers/PowersModalItem.tsx b/src/web3/components/powers/PowersModalItem.tsx
index 166e098e..18f63d73 100644
--- a/src/web3/components/powers/PowersModalItem.tsx
+++ b/src/web3/components/powers/PowersModalItem.tsx
@@ -1,10 +1,14 @@
+import {
+  IconVariant,
+  Web3IconType,
+} from '@bgd-labs/react-web3-icons/dist/utils';
 import { Box } from '@mui/system';
 import React from 'react';
 
 import { RepresentationIcon } from '../../../proposals/components/RepresentationIcon';
 import { Divider } from '../../../ui';
 import { FormattedNumber } from '../../../ui/components/FormattedNumber';
-import { AssetIcon } from '../../../ui/components/Web3Icons/AssetIcon';
+import { Web3Icon } from '../../../ui/components/Web3Icon';
 import { getAssetName } from '../../../utils/getAssetName';
 import { GovernancePowerType } from '../../services/delegationService';
 import { PowersByAssets } from '../../store/web3Slice';
@@ -114,9 +118,13 @@ export function PowersModalItem({
               mt: 18,
             }}>
             <Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
-              <AssetIcon
-                symbol={symbol}
-                css={{ mr: 10, width: 20, height: 20 }}
+              <Web3Icon
+                size={20}
+                css={{ mr: 10 }}
+                iconInfo={{
+                  type: Web3IconType.asset,
+                  info: { symbol, variant: IconVariant.Full },
+                }}
               />
               <Box sx={{ typography: 'headline' }}>{asset.tokenName}</Box>
             </Box>
diff --git a/svgo.config.js b/svgo.config.js
index 09cf1b95..da1bf668 100644
--- a/svgo.config.js
+++ b/svgo.config.js
@@ -14,6 +14,6 @@ module.exports = {
           collapseGroups: false,
         },
       },
-    },
+    }
   ],
 };
diff --git a/yarn.lock b/yarn.lock
index d717f644..46d32972 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1315,14 +1315,15 @@
     "@tanstack/react-query" "^5.40.0"
     dayjs "^1.11.11"
 
-"@bgd-labs/react-web3-icons@^0.0.49":
-  version "0.0.49"
-  resolved "https://registry.yarnpkg.com/@bgd-labs/react-web3-icons/-/react-web3-icons-0.0.49.tgz#a6c84cb597ca389328946d9905fc5dee6c6d8303"
-  integrity sha512-0lVwVCXUE6In5JtTsOmIJKg2i4LfkMghXE2x0sNl7VIhSNTh16gZZWjW7TwAKGnTw/u3n5yOZ9bi4r5gKyTQlg==
+"@bgd-labs/react-web3-icons@0.0.68":
+  version "0.0.68"
+  resolved "https://registry.yarnpkg.com/@bgd-labs/react-web3-icons/-/react-web3-icons-0.0.68.tgz#9f2bc29be3b83960f5595b060c8c7c38fe31e477"
+  integrity sha512-mp/QEqFrtI/maf+UR3LKb6304qKHdMmMmYLJXq8zhgoNwuCikmjk5H+SjAsXjBZUFV6y5lUhBAr0UUsX8FAasg==
   dependencies:
     "@loadable/component" "5.16.4"
-    react "18.2.0"
-    react-dom "18.2.0"
+    react "18.3.1"
+    react-dom "18.3.1"
+    react-inlinesvg "^4.1.3"
 
 "@changesets/apply-release-plan@^7.0.0":
   version "7.0.0"
@@ -8952,14 +8953,6 @@ react-custom-scrollbars-2@^4.5.0:
     prop-types "^15.5.10"
     raf "^3.1.0"
 
-react-dom@18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
-  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
-  dependencies:
-    loose-envify "^1.1.0"
-    scheduler "^0.23.0"
-
 react-dom@18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
@@ -8982,6 +8975,18 @@ react-final-form@^6.5.9:
   dependencies:
     "@babel/runtime" "^7.15.4"
 
+react-from-dom@^0.7.2:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/react-from-dom/-/react-from-dom-0.7.3.tgz#60e75fde2369ceb0a8f87d88f9cfbeb67b730e43"
+  integrity sha512-9IK6R7+eD1wOAMC2ZCrENev0eK1625cb7vX+cnnOR9LBRNbjKiaJk4ij2zQbcefEXTWjXFhA7CTO1cd8wMONnw==
+
+react-inlinesvg@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/react-inlinesvg/-/react-inlinesvg-4.1.3.tgz#671f083fd78934ec58afa5128460252dcae61177"
+  integrity sha512-p1+wkr1UQZyLw/3bdpnHO3v3tMNVWyxWnAEY6ML/Ql9ldDYTBTy6HqAyNl7u3au925XPffLMiXKnQrqZeJAldw==
+  dependencies:
+    react-from-dom "^0.7.2"
+
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -9039,13 +9044,6 @@ react-syntax-highlighter@^15.5.0:
     prismjs "^1.27.0"
     refractor "^3.6.0"
 
-react@18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
-  dependencies:
-    loose-envify "^1.1.0"
-
 react@18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
@@ -9461,7 +9459,7 @@ safe-stable-stringify@^2.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-scheduler@^0.23.0, scheduler@^0.23.2:
+scheduler@^0.23.2:
   version "0.23.2"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
   integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==