Crypto icons

Token symbols are not unique. Use chainId and the contract address to identify a token when looking up its icon.

onchain-ui keeps token and network icon lookups in lib/onchain/crypto-icons.tsx. Edit this file to change the source used by TokenLogo and NetworkLogo.

The adapter

The file installs with TokenLogo and NetworkLogo and exports these functions:

export function getTokenIcon(query: {
  chainId?: number | null
  address?: string | null
  symbol?: string | null
}): CryptoIcon

export function getNetworkIcon(chainId?: number | null): CryptoIcon

Both may return:

• a string, treated as an image URL
• a ReactNode, rendered directly in place of the image
• null, which tells the component to use its fallback content

The component chooses an icon in this order:

1. src prop
2. Adapter result
3. fallback prop or text derived from the asset metadata

If an explicit src fails to load, the component shows fallback content without trying the adapter.

Default behavior

NetworkLogo uses built-in SVG logos for Ethereum, Optimism, Polygon, Base, and Arbitrum. These logos need no image request. For example, <NetworkLogo chainId={8453} /> shows the Base logo.

For token contracts, the adapter builds image URLs from chainId and address using the Trust Wallet assets repository. If an image fails to load, TokenLogo shows fallback text.

<TokenLogo
  chainId={8453}
  address="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  symbol="USDC"
/>

Change the icon source

Edit getTokenIcon to return URLs from your token list or indexer. You can also return React elements from an icon package.

This example uses @web3icons/react. It hardcodes Base for address lookups. Map chainId to the package's network identifier before using it for other chains.

import { TokenIcon, NetworkIcon } from "@web3icons/react"

export function getTokenIcon({ chainId, address, symbol }: TokenIconQuery): CryptoIcon {
  if (address) {
    return <TokenIcon address={address.toLowerCase()} network="base" size={32} variant="branded" />
  }
  if (symbol) {
    return <TokenIcon symbol={symbol} size={32} variant="branded" />
  }
  return null
}

To support more networks, add entries to the chain maps or return image URLs from getNetworkIcon.

Re-add the default

The adapter also has its own registry item. Use it to compare your file with the published version or restore the default:

npx shadcn add @onchain-ui/crypto-icons