diff --git a/src/__swaps__/screens/Swap/components/SwapCoinIcon.tsx b/src/__swaps__/screens/Swap/components/SwapCoinIcon.tsx
deleted file mode 100644
index f5e15d41c8d..00000000000
--- a/src/__swaps__/screens/Swap/components/SwapCoinIcon.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-/* eslint-disable no-nested-ternary */
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-import EthIcon from '@/assets/eth-icon.png';
-import { ChainImage } from '@/components/coin-icon/ChainImage';
-import { globalColors } from '@/design-system';
-import { borders, fonts } from '@/styles';
-import { useTheme } from '@/theme';
-import { FallbackIcon as CoinIconTextFallback, isETH } from '@/utils';
-import { FastFallbackCoinIconImage } from '@/components/asset-list/RecyclerAssetList2/FastComponents/FastFallbackCoinIconImage';
-import Animated from 'react-native-reanimated';
-import FastImage, { Source } from 'react-native-fast-image';
-import { ChainId } from '@/state/backendNetworks/types';
-
-// TODO: Delete this and replace with RainbowCoinIcon
-// ⚠️ When replacing this component with RainbowCoinIcon, make sure
-// ⚠️ to exactly replicate the sizing and shadows defined below
-
-const fallbackTextStyles = {
-  fontFamily: fonts.family.SFProRounded,
-  fontWeight: fonts.weight.bold,
-  letterSpacing: fonts.letterSpacing.roundedTight,
-  marginBottom: 0.5,
-  textAlign: 'center',
-};
-
-const fallbackIconStyle = (size: number) => ({
-  ...borders.buildCircleAsObject(size),
-  position: 'absolute',
-});
-
-/**
- * If mainnet asset is available, get the token under /ethereum/ (token) url.
- * Otherwise let it use whatever type it has
- * @param param0 - optional mainnetAddress, address and network
- * @returns a proper type and address to use for the url
- */
-function resolveChainIdAndAddress({ address, mainnetAddress }: { mainnetAddress?: string; address: string }) {
-  if (mainnetAddress) {
-    return {
-      resolvedAddress: mainnetAddress,
-    };
-  }
-
-  return {
-    resolvedAddress: address,
-  };
-}
-
-export const SwapCoinIcon = React.memo(function FeedCoinIcon({
-  address,
-  color,
-  iconUrl,
-  disableShadow = true,
-  forceDarkMode,
-  mainnetAddress,
-  chainId,
-  symbol,
-  size = 32,
-  chainSize,
-}: {
-  address: string;
-  color?: string;
-  iconUrl?: string;
-  disableShadow?: boolean;
-  forceDarkMode?: boolean;
-  mainnetAddress?: string;
-  chainId: ChainId;
-  symbol: string;
-  size?: number;
-  chainSize?: number;
-}) {
-  const theme = useTheme();
-
-  const { resolvedAddress } = resolveChainIdAndAddress({
-    address,
-    mainnetAddress,
-  });
-
-  const fallbackIconColor = color ?? theme.colors.purpleUniswap;
-  const shadowColor = theme.isDarkMode || forceDarkMode ? theme.colors.shadow : color || fallbackIconColor;
-  const eth = isETH(resolvedAddress);
-
-  return (
-    <View style={[styles.container(size), { height: size }]}>
-      {eth ? (
-        <Animated.View
-          key={`${resolvedAddress}-${eth}`}
-          style={[sx.reactCoinIconContainer, styles.coinIcon(size), !disableShadow && sx.withShadow, { shadowColor }]}
-        >
-          <FastImage source={EthIcon as Source} style={styles.coinIcon(size)} />
-        </Animated.View>
-      ) : (
-        <FastFallbackCoinIconImage size={size} icon={iconUrl} shadowColor={shadowColor} symbol={symbol} theme={theme}>
-          {() => (
-            <CoinIconTextFallback
-              color={color}
-              height={size}
-              style={fallbackIconStyle(size)}
-              symbol={symbol}
-              textStyles={fallbackTextStyles}
-              width={size}
-            />
-          )}
-        </FastFallbackCoinIconImage>
-      )}
-
-      {chainId && chainId !== ChainId.mainnet && size > 16 && (
-        <View style={sx.badge}>
-          <ChainImage chainId={chainId} size={chainSize ?? 16} />
-        </View>
-      )}
-    </View>
-  );
-});
-
-const styles = {
-  container: (size: number) => ({
-    elevation: 6,
-    height: size,
-    overflow: 'visible' as const,
-  }),
-  coinIcon: (size: number) => ({
-    borderRadius: size / 2,
-    height: size,
-    width: size,
-    overflow: 'visible' as const,
-  }),
-};
-
-const sx = StyleSheet.create({
-  badge: {
-    bottom: -0,
-    left: -8,
-    position: 'absolute',
-    shadowColor: globalColors.grey100,
-    shadowOffset: {
-      height: 4,
-      width: 0,
-    },
-    shadowRadius: 6,
-    shadowOpacity: 0.2,
-  },
-  reactCoinIconContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  withShadow: {
-    elevation: 6,
-    shadowOffset: {
-      height: 4,
-      width: 0,
-    },
-    shadowOpacity: 0.2,
-    shadowRadius: 6,
-  },
-});
diff --git a/src/components/Discover/TrendingTokens.tsx b/src/components/Discover/TrendingTokens.tsx
index 223a8041981..64dc6922791 100644
--- a/src/components/Discover/TrendingTokens.tsx
+++ b/src/components/Discover/TrendingTokens.tsx
@@ -2,7 +2,7 @@ import { DropdownMenu } from '@/components/DropdownMenu';
 import { globalColors, Text, TextIcon, useBackgroundColor, useColorMode } from '@/design-system';
 import { useForegroundColor } from '@/design-system/color/useForegroundColor';
 
-import { SwapCoinIcon } from '@/__swaps__/screens/Swap/components/SwapCoinIcon';
+import RainbowCoinIcon from '@/components/coin-icon/RainbowCoinIcon';
 import { analyticsV2 } from '@/analytics';
 import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
 import { ChainId } from '@/state/backendNetworks/types';
@@ -401,14 +401,15 @@ function TrendingTokenRow({ token }: { token: TrendingToken }) {
   return (
     <ButtonPressAnimation onPress={handleNavigateToToken} scaleTo={0.94}>
       <View style={{ height: 48, overflow: 'visible', flexDirection: 'row', gap: 12, alignItems: 'center' }}>
-        <SwapCoinIcon
-          iconUrl={token.icon_url}
+        <RainbowCoinIcon
+          icon={token.icon_url}
           color={token.colors.primary}
           chainId={token.chainId}
-          address={token.address}
           symbol={token.symbol}
-          size={40}
-          chainSize={20}
+          chainBadgePosition={{
+            x: -12,
+            y: -6,
+          }}
         />
 
         <View style={{ gap: 12, flex: 1 }}>
diff --git a/src/components/coin-row/FastTransactionCoinRow.tsx b/src/components/coin-row/FastTransactionCoinRow.tsx
index d89198dd9d0..02695cb71d2 100644
--- a/src/components/coin-row/FastTransactionCoinRow.tsx
+++ b/src/components/coin-row/FastTransactionCoinRow.tsx
@@ -296,7 +296,13 @@ export const ActivityIcon = ({
             }}
           />
         </View>
-        <ChainImage showBadge={badge && transaction.chainId !== ChainId.mainnet} chainId={transaction.chainId} size={32} />
+        <ChainImage
+          showBadge={badge && transaction.chainId !== ChainId.mainnet}
+          chainId={transaction.chainId}
+          size={32}
+          badgeYPosition={-10}
+          badgeXPosition={-14}
+        />
       </View>
     );
   }
@@ -369,7 +375,13 @@ export const ActivityIcon = ({
             </Box>
           )}
         </View>
-        <ChainImage showBadge={badge && transaction.chainId !== ChainId.mainnet} chainId={transaction.chainId} size={32} />
+        <ChainImage
+          showBadge={badge && transaction.chainId !== ChainId.mainnet}
+          chainId={transaction.chainId}
+          size={32}
+          badgeYPosition={-10}
+          badgeXPosition={-14}
+        />
       </View>
     );
   }
@@ -381,7 +393,10 @@ export const ActivityIcon = ({
         chainId={transaction?.asset?.chainId || ChainId.mainnet}
         symbol={transaction?.asset?.symbol || ''}
         color={transaction?.asset?.colors?.primary || transaction?.asset?.colors?.fallback || undefined}
-        showBadge={false}
+        chainBadgePosition={{
+          x: -12,
+          y: -6,
+        }}
       />
     </View>
   );
diff --git a/src/components/expanded-state/AvailableNetworksv2.tsx b/src/components/expanded-state/AvailableNetworksv2.tsx
index 027e4bb7d66..12dd2385122 100644
--- a/src/components/expanded-state/AvailableNetworksv2.tsx
+++ b/src/components/expanded-state/AvailableNetworksv2.tsx
@@ -3,7 +3,7 @@ import React, { useCallback, useMemo } from 'react';
 import RadialGradient from 'react-native-radial-gradient';
 import Divider from '../Divider';
 import { ChainImage } from '@/components/coin-icon/ChainImage';
-import { Box, Inline, Text } from '@/design-system';
+import { Box, Column, Columns, Inline, Text } from '@/design-system';
 import { useNavigation } from '@/navigation';
 import Routes from '@/navigation/routesNames';
 import { colors, position } from '@/styles';
@@ -158,7 +158,7 @@ const AvailableNetworksv2 = ({
         marginHorizontal={{ custom: marginHorizontal }}
         testID={'available-networks-v2'}
       >
-        <Box borderRadius={99} paddingVertical="8px" paddingHorizontal="12px" justifyContent="center">
+        <Box borderRadius={99} paddingVertical="8px" paddingHorizontal="12px" justifyContent="center" alignItems="stretch">
           <RadialGradient
             {...radialGradientProps}
             // @ts-ignore overloaded props
@@ -167,40 +167,67 @@ const AvailableNetworksv2 = ({
           />
           <Inline alignVertical="center" alignHorizontal="justify">
             <Inline alignVertical="center">
-              <Box style={{ flexDirection: 'row' }}>
-                {availableChainIds?.map((chainId, index) => {
-                  return (
-                    <Box
-                      background="body (Deprecated)"
-                      key={`availableNetwork-${chainId}`}
-                      marginLeft="-4px"
-                      style={{
-                        backgroundColor: colors.transparent,
-                        zIndex: availableChainIds?.length - index,
-                        borderRadius: 30,
-                      }}
-                    >
-                      <ChainImage chainId={chainId} size={20} />
-                    </Box>
-                  );
-                })}
-              </Box>
-
-              <Box paddingLeft="6px">
-                <Text color="secondary60 (Deprecated)" size="14px / 19px (Deprecated)" weight="semibold" numberOfLines={2}>
-                  {availableChainIds?.length > 1
-                    ? lang.t('expanded_state.asset.available_networks', {
-                        availableNetworks: availableChainIds?.length,
-                      })
-                    : lang.t('expanded_state.asset.available_networkv2', {
-                        availableNetwork: useBackendNetworksStore.getState().getChainsName()[availableChainIds[0]],
+              <Columns>
+                <Column style={{ justifyContent: 'center' }} width={availableChainIds.length > 1 ? 'content' : undefined}>
+                  <Box style={{ flexDirection: 'row', gap: 4, alignItems: 'center' }}>
+                    <Box style={{ flexDirection: 'row', alignItems: 'center' }}>
+                      {availableChainIds.slice(0, 6).map((chainId, index) => {
+                        return (
+                          <Box
+                            background="body (Deprecated)"
+                            key={`availableNetwork-${chainId}`}
+                            marginLeft="-4px"
+                            style={{
+                              backgroundColor: colors.transparent,
+                              zIndex: availableChainIds?.length - index,
+                              borderRadius: 30,
+                            }}
+                          >
+                            <ChainImage chainId={chainId} size={20} />
+                          </Box>
+                        );
                       })}
-                </Text>
-              </Box>
+                    </Box>
+                    {availableChainIds.length > 6 && (
+                      <Text color="labelSecondary" size="13pt" weight="semibold" numberOfLines={2}>
+                        +{availableChainIds.length - 6}
+                      </Text>
+                    )}
+                  </Box>
+                </Column>
+                <Column style={{ justifyContent: 'center', flex: 1 }}>
+                  <Box
+                    style={{
+                      flexDirection: 'row',
+                      gap: 8,
+                      alignItems: 'center',
+                      justifyContent: availableChainIds.length > 1 ? 'flex-end' : 'space-between',
+                    }}
+                    paddingLeft="6px"
+                  >
+                    <Text
+                      color="secondary60 (Deprecated)"
+                      size="14px / 19px (Deprecated)"
+                      weight="semibold"
+                      numberOfLines={1}
+                      align="right"
+                    >
+                      {availableChainIds?.length > 1
+                        ? lang.t('expanded_state.asset.available_networks', {
+                            availableNetworks: availableChainIds?.length,
+                          })
+                        : lang.t('expanded_state.asset.available_networkv2', {
+                            availableNetwork: useBackendNetworksStore.getState().getChainsName()[availableChainIds[0]],
+                          })}
+                    </Text>
+
+                    <Text align="center" color="secondary40 (Deprecated)" size="14px / 19px (Deprecated)" weight="semibold">
+                      {availableChainIds?.length > 1 ? '􀁱' : '􀯻'}
+                    </Text>
+                  </Box>
+                </Column>
+              </Columns>
             </Inline>
-            <Text align="center" color="secondary40 (Deprecated)" size="14px / 19px (Deprecated)" weight="semibold">
-              {availableChainIds?.length > 1 ? '􀁱' : '􀯻'}
-            </Text>
           </Inline>
         </Box>
       </Box>
diff --git a/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx b/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx
index 927fa08219d..269b06e176c 100644
--- a/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx
+++ b/src/screens/transaction-details/components/TransactionDetailsValueAndFeeSection.tsx
@@ -82,7 +82,13 @@ export const TransactionDetailsValueAndFeeSection: React.FC<Props> = ({ transact
                         }}
                       />
                     </View>
-                    <ChainImage showBadge={transaction.chainId !== ChainId.mainnet} chainId={transaction.chainId} badgeYPosition={10} />
+                    <ChainImage
+                      showBadge={transaction.chainId !== ChainId.mainnet}
+                      chainId={transaction.chainId}
+                      size={32}
+                      badgeYPosition={0}
+                      badgeXPosition={-12}
+                    />
                   </View>
                 ) : (
                   <RainbowCoinIcon