Alt text for logos and token icons
How to write alt text for logos and token icons, when an icon beside visible text needs empty alt, and how to handle linked logos in lists and tables.
5 min read
Most token icons in a wallet or exchange interface should have empty alt text, because the token's name is printed right next to them. The icons that do need alt text are the ones that stand alone: a chain logo as the only content of a button, an exchange logo as the only content of a link, a pair of overlapping logos with no label.
When alt text is needed, it is almost always just the name. This guide covers how to decide, what to write, and the cases that trip people up in token lists, tables and logo rows.
The name, and nothing else
Alt text replaces the image for people who can't see it. A screen reader already announces that it's an image (usually as "image" or "graphic"), so the alt text only needs to say what the image stands for.
| Instead of | Write |
|---|---|
alt="Uniswap logo" |
alt="Uniswap" |
alt="Image of the Solana logo" |
alt="Solana" |
alt="Pink unicorn" |
alt="Uniswap" |
alt="btc.svg" |
alt="Bitcoin" |
Describing the artwork ("pink unicorn", "orange circle with a B") is almost never what someone needs. They need to know which asset, chain or company it is, the same way a sighted user recognizes the mark at a glance.
The exception is a page where the logo itself is the subject, such as an icon library page like the one for the Ethereum logo, a brand guidelines page, or a comparison of logo versions. There, "Ethereum logo, mono version" is the content, and saying so is correct.
Ticker, name or both
Tickers are compact for sighted readers but unpredictable when spoken. Screen readers decide for themselves whether to pronounce "SOL" or "ETH" as a word or spell out the letters, and the result varies between screen readers and voices. Full names are pronounced more reliably.
A few practical rules:
- If the icon stands in for visible text that's missing, use whatever your interface would normally show. If your token rows lead with tickers, an icon-only chip can use the ticker too. Consistency matters more than the choice.
- For a standalone logo with no surrounding context, lean toward the full name. "Solana" is clearer than "SOL" when it's the only word, while a token best known by its ticker, such as USDC, can keep the ticker.
- Keep tokens and networks distinct. ETH is the asset and Ethereum is the network, although many interfaces use "Ethereum" for both. The same applies to stablecoins issued on several chains. If the logo means "USDC on Base", the alt text should say that.
Next to visible text, use alt=""
Here is a typical token row. The ticker and full name are right there as text, so the logo adds nothing for a screen reader user. With alt text it would be read twice: "USDC, image, USDC, USD Coin, 1,204.33".
type Token = { symbol: string; name: string; logo: string; balance: string }
export function TokenRow({ token }: { token: Token }) {
return (
<li className="token-row">
<img src={token.logo} alt="" width={32} height={32} />
<span className="symbol">{token.symbol}</span>
<span className="name">{token.name}</span>
<span className="balance">{token.balance}</span>
</li>
)
}
The empty alt="" matters. Leaving the attribute out entirely is different: some screen readers then fall back to reading the file name or URL, which for a token list logo can be a long CDN path or a contract address. Always include the attribute, even when it's empty. The reasoning behind this split is covered in more depth in decorative or informative icons.
Logos inside links and buttons
When an image is the only content of a link or button, its alt text becomes the name of that link or button. That makes it the most important alt text on the page, because a link with no name is announced as just "link", or as its URL.
<a href="/partners/kraken">
<img src="/logos/kraken.svg" alt="Kraken" width="96" height="32">
</a>
<a href="/partners/kraken">
<img src="/logos/kraken.svg" alt="" width="24" height="24">
Kraken
</a>
In the first link the logo is the only content, so it carries the name. In the second, the visible word does that job and the logo gets empty alt.
For linked logos, write alt text that makes sense as a link name. The site logo in your header is usually the product name ("Acme Wallet"), and some teams add "home" because the link goes to the home page. On a row of exchange logos that link out, the exchange name is enough; the destination is obvious. Logo walls of partners and integrations are a common place for empty-alt links, since the images tend to be added in bulk; partner and integration logo walls covers that layout.
Examples from crypto interfaces
| Situation | Alt text | Reason |
|---|---|---|
| Token selector row with logo, ticker and name | alt="" |
The name is visible |
| Balances table, logo in the first column next to the ticker | alt="" |
The ticker cell names the row |
| Pair icon (two overlapping logos) followed by "ETH / USDC" | alt="" on both |
The pair is written out |
| Pair icon alone on a compact position card | Wrap both images in an element with role="img" and aria-label="ETH and USDC", images alt="" |
One name for one visual unit |
| Token logo with a chain badge, chain not written anywhere | Badge alt="on Arbitrum One", placed after the token name in the markup |
The chain is information that exists only in the badge |
| Icon-only network switcher button | Image alt="", button labeled "Network: Base" with aria-label or visually hidden text |
Name the control, not the picture |
| "Trade on" row of exchange logos, each a link | alt="Binance", alt="Coinbase" |
Each alt is the link name |
| Hero illustration of floating coins | alt="" |
Decoration |
When things go wrong
Broken images. Token logos often come from a token list's logoURI or a third-party CDN, and those URLs fail. Many browsers render the alt text in place of a broken image, which is fine for "Kraken" in a link but can spill a long name into a 24px slot. Empty alt usually shows nothing, which is what you want for a decorative row icon, provided you swap in a placeholder. See fallback icons for unknown tokens for that pattern.
Untrusted names. If you generate alt text from token metadata, remember that anyone can deploy a token named "USDC" with a copied logo. Alt text should repeat what the interface shows, including any "unverified" label, and never add reassurance the visual design doesn't give. Fake tokens and spoofed logos goes into the design side.
Text baked into images. A wordmark logo that includes a tagline doesn't need the tagline in its alt text unless the tagline matters on that page. The name is enough.