Showing token logos in a wallet interface
Choose token logo sizes and styles for wallet balances, send, swap and activity screens, and handle unknown and spam tokens without cluttering the list.
6 min read
In a wallet, token logos do one job: help people find an asset faster than they could by reading. That job changes from screen to screen. On the balances list, a logo is a landmark to scan for. On a send confirmation, it is a check that the right asset is leaving. In the activity feed, it competes with the action that happened.
This guide goes screen by screen, then covers the tokens that shouldn't get a real logo at all.
The short version
| Screen | Icon size | Style | Always shown with |
|---|---|---|---|
| Balances list | 32 to 40 px | Branded | Name or ticker, amount, network if multichain |
| Send form | 40 to 48 px for the chosen asset | Branded | Ticker, available balance, network |
| Swap form | 20 to 24 px in the token pills | Branded | Ticker |
| Token picker | 32 px | Branded | Name, ticker, balance, contract hint for duplicates |
| Activity feed | 32 to 40 px | Branded, with an action badge | What happened, in words |
| Navigation and settings | 20 to 24 px | Mono | A text label |
The rest of this guide explains the reasoning, which matters more when your layout doesn't match these exactly.
Balances list
This is the screen people open most, so it gets the most care. Each row typically holds the logo, the token name with the network or ticker beneath it, and on the right the amount with its fiat value beneath. With two lines of text on each side, a 32 to 40 px logo matches the height of the text block. The sizing guide shows how to work that out from your type sizes.
Use branded logos here. People recognize assets by color and shape long before they read a ticker, and a column of mono icons in one color removes that shortcut.
Multichain wallets add a complication: the same token on several networks. USDC on Ethereum and USDC on Base are different contracts with the same logo. Two common patterns:
- One row per network, each with a small chain badge on the logo's lower corner and the network name in the subtitle.
- One grouped row showing the total, which expands to list each network.
Either way, the badge should be small, roughly a third of the logo's width, and backed by a ring in the background color so it reads as separate from the token. The network badges guide covers sizing and placement. Don't rely on the badge alone; put the network name in text too.
Sort by fiat value, largest first, so the assets people care about are at the top. Offer a toggle to hide zero and dust balances instead of deleting rows silently.
Send form
On a send screen, the chosen asset usually appears as a summary block near the top: a 40 to 48 px logo, the name, the network and the available balance. The logo is larger here because it confirms a choice rather than helping someone scan.
Don't let it dominate. The recipient address and the amount are what people need to check before sending, so the asset block should be clearly secondary to those fields. On the confirmation step, repeat the logo, ticker, network and amount together in one place. That is the moment to catch "I picked USDT instead of USDC," and the logo helps only if it sits right next to the words.
Swap form
A swap form has two token selectors, usually pills holding a 20 to 24 px logo, the ticker and a chevron. The amounts are the large type in the form; the pills stay compact so long numbers still fit on a phone.
The token picker that opens from a pill is a searchable list. Use 32 px logos with name, ticker and balance. When several tokens share a ticker, which happens often, the logo alone can't separate them, and a copied logo is cheap to make. Show a shortened contract address or the source list for those rows, and mark tokens that the user imported themselves rather than ones from a curated list.
Activity feed
In the activity feed, the most important information is the action: sent, received, swapped, approved, failed. Two patterns work:
- Token logo with an action badge. The logo identifies the asset; a small arrow or symbol in the corner shows direction. This suits wallets where most activity is transfers.
- Action icon with the token in text. A neutral circle with an arrow, and "Sent 120 USDC" as the label. This suits feeds dominated by contract interactions, where there may be no single token to show.
Swaps involve two tokens. Overlapping two logos, the sold one behind the bought one, is the common answer. Keep the overlap modest, around a quarter of the logo's width, so both stay recognizable.
Whatever you choose, the status must be in words. A red tint on a failed transaction's logo is lost on people who can't distinguish red, and easy to miss for everyone else. "Failed" as text next to the amount is not.
Unknown and spam tokens
Anyone can create a token and send it to any address. Wallets receive airdropped tokens with names that are URLs, tickers that copy popular assets, and logos chosen to look official. These are frequently bait: the token itself may be worthless, and interacting with the site it advertises can be harmful.
That changes how logos should be handled for tokens you can't vouch for:
- Don't load their logos. Fetching an image associated with an unknown token shows the sender's chosen artwork with your wallet's credibility, and can reveal users' IP addresses to whoever runs the server. Show a neutral fallback instead; the fallback icons guide shows how to generate one.
- Keep them out of the main list. Collapse them into a section such as "Hidden" or "Unverified", where people can still find them if they expect one.
- Show no fiat value unless you have a reliable price. A huge made-up dollar value is a common lure.
- Render names as plain text. Never turn a token name into a clickable link, and truncate long names.
- Show the contract address in the token's detail view, so someone can verify it against an official source.
A real logo is a trust signal. Reserve it for tokens on lists you have reviewed, and the fake tokens guide goes further into spoofing patterns.
Keeping the list scannable
Logos help scanning only when they are consistent. Mixed sources produce mixed results: one logo with a thick white border, one cropped to a square, one with a gradient background, all at slightly different sizes. A few rules prevent it:
- One container shape for every token, usually a circle, applied by your code with
border-radius: 50%rather than baked into some files and not others. - One size per screen, never adjusted per logo.
- Logos from one consistent source wherever possible, such as an icon library drawn to a single grid (the token logos on Web3 Icons are one example), with fallbacks for the rest.
- A text label on every row, every time. Logos speed up recognition; they don't replace the ticker.
- No more than one badge per logo.
A wallet that follows these rules lets people find their asset by glancing at a column of familiar shapes, then confirm it by reading one word.