Token Logo

Use TokenLogo anywhere you need a compact token identity: tables, swap rows, portfolio cards, asset selectors, and token stacks.

token-logo.tsxShow code

import { TokenLogo } from "@/components/ui/token-logo"export function TokenLogoDemo() {  return (    <TokenLogo      src="https://assets.coingecko.com/coins/images/279/large/ethereum.png"      symbol="ETH"      name="Ethereum"    />  )}

Tooltips compose the standard shadcn tooltip. The install adds it if your app does not already have components/ui/tooltip.tsx; if you do, your existing (possibly customized) tooltip is used as-is. Wrap your app with TooltipProvider if you have not already.

Usage

import { TokenLogo } from "@/components/ui/token-logo"

<TokenLogo
  src="https://assets.coingecko.com/coins/images/279/large/ethereum.png"
  symbol="ETH"
  name="Ethereum"
/>

TokenLogo uses a plain img element for portability. It does not require Next.js image configuration and works with arbitrary token image URLs from APIs, indexers, and token lists.

See Icon Resolution for the full network and token icon strategy.

Examples

Automatic Icons

Without a src, TokenLogo asks the crypto-icons adapter to resolve an icon from chainId + address. The default adapter uses the community Trust Wallet assets CDN, and misses degrade to the initials fallback.

token-logo-inferred.tsxShow code

import { TokenLogo } from "@/components/ui/token-logo"export function TokenLogoInferred() {  return (    <TokenLogo      chainId={8453}      address="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"      symbol="USDC"      name="USD Coin"    />  )}

The default adapter is great for demos and prototypes. In production, prefer explicit src from your token metadata, or edit lib/onchain/crypto-icons.tsx to point at your own token list or CDN.

Fallback

When src is missing or the image fails to load, the component falls back to the token symbol, name, address, or ?.

USDC

token-logo-fallback.tsxShow code

import { TokenLogo } from "@/components/ui/token-logo"export function TokenLogoFallback() {  return <TokenLogo symbol="USDC" name="USD Coin" />}

Sizes

Use size tokens for predictable layout in tables and dense controls.

ETHETHETHETHETH

token-logo-sizes.tsxShow code

import { TokenLogo } from "@/components/ui/token-logo"export function TokenLogoSizes() {  return (    <div className="flex items-center gap-3">      <TokenLogo symbol="ETH" size="xs" />      <TokenLogo symbol="ETH" size="sm" />      <TokenLogo symbol="ETH" size="md" />      <TokenLogo symbol="ETH" size="lg" />      <TokenLogo symbol="ETH" size="xl" />    </div>  )}

Custom Fallback

Pass fallback content and classes when your product has a preferred token treatment.

token-logo-custom-fallback.tsxShow code

import { TokenLogo } from "@/components/ui/token-logo"export function TokenLogoCustomFallback() {  return (    <TokenLogo      symbol="WETH"      fallback="Ξ"      className="border-blue-500/30 bg-blue-500/10 text-blue-600 dark:text-blue-300"    />  )}

Enable an animated tooltip when the logo appears without nearby token text.

token-logo-tooltip.tsxShow code

import { TokenLogo } from "@/components/ui/token-logo"export function TokenLogoTooltip() {  return (    <TokenLogo      src="https://assets.coingecko.com/coins/images/279/large/ethereum.png"      symbol="ETH"      name="Ethereum"      showTooltip    />  )}

Props

Prop	Type	Default	Description
`src`	`string \| null`	-	Token image URL
`symbol`	`string \| null`	-	Token symbol, used for alt text and fallback
`name`	`string \| null`	-	Token name, used for alt text and fallback
`address`	`string \| null`	-	Token contract address, used for icon inference and as a fallback label
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Visual size
`fallback`	`ReactNode`	Symbol/name/address fallback	Custom fallback content
`chainId`	`number \| null`	-	EVM chain id, used with `address` to infer an icon
`showTooltip`	`boolean`	`false`	Show an animated tooltip
`tooltipContent`	`ReactNode`	Name, symbol, then address	Tooltip content
`className`	`string`	-	Applied to the root wrapper
`imageClassName`	`string`	-	Applied to the image
`fallbackClassName`	`string`	-	Applied to the fallback

Installation

Requirements