onchain-uiNetwork logo
Displays a network or chain logo from an EVM chain id.
Pass a supported chainId to NetworkLogo to show its built-in logo. Use showTooltip to display the network name on hover.
network-logo.tsxShow code
import { NetworkLogo } from "@/components/ui/network-logo"export function NetworkLogoDemo() { return <NetworkLogo chainId={8453} showTooltip />}Installation
npx shadcn add @onchain-ui/network-logoRequirements
This component uses the shadcn tooltip. The install adds components/ui/tooltip.tsx if it is missing, or uses your existing file. Wrap your app with TooltipProvider to enable tooltips.
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.
Without a logo, the component uses the symbol, name, or chain ID as fallback text, in that order. A chain ID must fit in full. The limit is 3 characters at xs and sm, and 4 at larger sizes. Longer IDs show ? because truncating an ID could identify a different chain. Pass fallback to supply your own content or showTooltip to show 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 lookup order and fallback rules.
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
The examples show how the size limit affects unknown chain IDs. 5315 fits at md but shows ? at xs and sm. 42220 shows ? at every size.
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 |