.

package.json

@@ -201,6 +201,7 @@
     "qs": "6.9.7",
     "querystring-es3": "0.2.1",
     "react": "17.0.2",
+    "react-coin-icon": "rainbow-me/react-coin-icon#06464588a3d986f6ef3a7d7341b2d7ea0c5ac50b",
     "react-fast-compare": "2.0.4",
     "react-flatten-children": "1.1.2",
     "react-native": "rainbow-me/react-native#e4199f33b90914aeefcb638e02285711f45e422e",

src/components/asset-list/RecyclerAssetList2/FastComponents/FastCoinIcon.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+// @ts-expect-error // no declaration for this yet
+import * as CoinIconsImages from 'react-coin-icon/lib/pngs';
 import { Image, StyleSheet, View } from 'react-native';
 import { FastChainBadge } from './FastCoinBadge';
 import { FastFallbackCoinIconImage } from './FastFallbackCoinIconImage';
@@ -27,6 +29,12 @@ const fallbackIconStyle = {
   position: 'absolute',
 };
 
+function formatSymbol(symbol: string) {
+  return symbol
+    ? symbol.charAt(0).toUpperCase() + symbol.slice(1).toLowerCase()
+    : '';
+}
+
 /**
  * If mainnet asset is available, get the token under /ethereum/ (token) url.
  * Otherwise let it use whatever type it has
@@ -89,6 +97,11 @@ export default React.memo(function FastCoinIcon({
 
   const eth = isETH(resolvedAddress);
 
+  const formattedSymbol = formatSymbol(symbol);
+
+  const shouldRenderFallback = !eth && !tokenMetadata;
+  const shouldRenderLocalCoinIconImage =
+    !shouldRenderFallback && !!CoinIconsImages[formattedSymbol];
   const shouldRenderContract = symbol === 'contract';
 
   return (
@@ -104,6 +117,21 @@ export default React.memo(function FastCoinIcon({
         >
           <Image source={EthIcon} style={sx.coinIconFallback} />
         </View>
+      ) : shouldRenderLocalCoinIconImage ? (
+        <View
+          style={[
+            sx.coinIconFallback,
+            sx.reactCoinIconContainer,
+            sx.withShadow,
+            { shadowColor },
+          ]}
+        >
+          <Image
+            resizeMode="contain"
+            source={CoinIconsImages[formattedSymbol]}
+            style={sx.reactCoinIconImage}
+          />
+        </View>
       ) : shouldRenderContract ? (
         <Image source={ContractInteraction} style={sx.contract} />
       ) : (

src/utils/CoinIcons/CoinIcon.js

@@ -1,5 +1,7 @@
 /* eslint-disable import/namespace */
 import React, { useMemo } from 'react';
+import * as CoinIconsImages from 'react-coin-icon/lib/pngs';
+import { Image } from 'react-native';
 import { StyleSheet, View } from 'react-primitives';
 import FallbackIcon from './FallbackIcon';
 
@@ -56,6 +58,18 @@ const CoinIcon = ({
     };
   }, [color, shadowColor, size]);
 
+  if (!forceFallback && CoinIconsImages[formattedSymbol]) {
+    return (
+      <View {...circleProps} {...shadowProps} style={[sx.container, style]}>
+        <Image
+          resizeMode="contain"
+          source={CoinIconsImages[formattedSymbol]}
+          style={sx.image}
+        />
+      </View>
+    );
+  }
+
   return (
     <View {...circleProps} style={[sx.container, style]}>
       <Fallback