Network Logo

Use NetworkLogo for chain selectors, token badges, bridge routes, wallet rows, and cross-chain asset views. Pass a supported chainId and the matching network logo renders automatically.

network-logo.tsxShow code

import { NetworkLogo } from "@/components/ui/network-logo"export function NetworkLogoDemo() {  return <NetworkLogo chainId={8453} showTooltip />}

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 { NetworkLogo } from "@/components/ui/network-logo"

<NetworkLogo chainId={8453} />

NetworkLogo ships with built-in logos for common EVM networks. Use src only when you need to override a logo or support a chain that is not built in yet.

For a chain with no built-in logo, the fallback is the symbol, then the name, then the chain id — but only when the chain id fits inside the circle whole (3 characters at xs and sm, 4 from md up). A longer id renders ? instead: a truncated chain id reads as a different, real chain, which is worse than admitting the network is unrecognised. Pass fallback for a mark of your own, or showTooltip to surface the full id on hover.

Names and symbols for common networks are built in. Anything else comes from the chains in Configuration, so a chain you added to your wagmi config renders with its name here too.

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

Supported Chains

Chain	`chainId`
Ethereum	`1`
Optimism	`10`
Polygon	`137`
Base	`8453`
Arbitrum One	`42161`

Examples

Networks

network-logo-networks.tsxShow code

import { NetworkLogo } from "@/components/ui/network-logo"export function NetworkLogoNetworks() {  return (    <div className="flex items-center gap-3">      <NetworkLogo chainId={1} />      <NetworkLogo chainId={8453} />      <NetworkLogo chainId={10} />      <NetworkLogo chainId={42161} />      <NetworkLogo chainId={137} />    </div>  )}

Sizes

network-logo-sizes.tsxShow code

import { NetworkLogo } from "@/components/ui/network-logo"export function NetworkLogoSizes() {  return (    <div className="flex items-center gap-3">      <NetworkLogo chainId={8453} size="xs" />      <NetworkLogo chainId={8453} size="sm" />      <NetworkLogo chainId={8453} size="md" />      <NetworkLogo chainId={8453} size="lg" />      <NetworkLogo chainId={8453} size="xl" />    </div>  )}

Unknown Networks

A wallet can report any chain id. Four digits fit from md up; five never fit, at any size. Rather than clip the text against the border, the id is dropped.

??5315??

network-logo-unknown.tsxShow code

import { NetworkLogo } from "@/components/ui/network-logo"export function NetworkLogoUnknown() {  return (    <div className="flex items-center gap-3">      <NetworkLogo chainId={5315} size="xs" />      <NetworkLogo chainId={5315} size="sm" />      <NetworkLogo chainId={5315} size="md" />      <NetworkLogo chainId={42220} size="md" />      <NetworkLogo chainId={42220} size="xl" />    </div>  )}

Custom Network

network-logo-custom.tsxShow code

import { NetworkLogo } from "@/components/ui/network-logo"export function NetworkLogoCustom() {  return (    <NetworkLogo      name="Zora"      symbol="ZORA"      fallback="Z"      className="border-foreground/20 bg-foreground text-background"      showTooltip    />  )}

Props

Prop	Type	Default	Description
`chainId`	`number \| null`	-	EVM chain id
`src`	`string \| null`	Built-in chain logo	Network image URL override
`name`	`string \| null`	Built-in network name	Network name
`symbol`	`string \| null`	Built-in network symbol	Short symbol for fallback
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Visual size
`fallback`	`ReactNode`	Symbol/name/chain fallback	Custom fallback for unsupported chains
`showTooltip`	`boolean`	`false`	Show an animated tooltip
`tooltipContent`	`ReactNode`	Name, symbol, then chain id	Tooltip content
`className`	`string`	-	Applied to the root wrapper
`imageClassName`	`string`	-	Applied to the image
`fallbackClassName`	`string`	-	Applied to the fallback

Installation

Requirements