A size cheat sheet for crypto icons
Common pixel sizes for crypto icons in interfaces, favicons, home screen and PWA icons, with notes on device pixel ratio and touch target sizes.
5 min read
What size should a token logo be? It depends on where it sits, and the same few sizes come up again and again across wallets, exchanges and dashboards. This page collects them in one place, with notes on the platform icons that have fixed sizes and on what screen density means for each.
All interface sizes below are in CSS pixels, the unit you write in your CSS. How many physical pixels that means depends on the screen, which is covered further down.
Interface sizes
| Size | Typical use | Notes |
|---|---|---|
| 12 px | Chain badges on 32 px token icons, status marks | Too small for most full logos; simple marks or mono only |
| 16 px | Logos inline in text, dense tables, tags and chips | Pairs with 12 to 14 px text; detailed logos lose their features |
| 20 px | Table rows, compact lists, buttons with 14 px labels | A common size for markets tables and network switcher buttons |
| 24 px | Standard list rows, menus, navigation, token selector pills | The most common grid for icon sets |
| 32 px | Wallet balance rows, token picker rows | Matches two lines of small text |
| 40 px | Roomier two-line rows, compact cards | Good for mobile lists with large touch rows |
| 48 px | Card headers, the selected asset on a send screen | Detail is fully visible |
| 64 px | Token detail page headers, empty states | Often the largest size in a product UI |
| 128 to 256 px | Marketing pages, hero sections, press material | Only for logos drawn with enough detail |
These are common choices, not standards. The rule underneath them is to size the icon from the text next to it, roughly 1.15 to 1.5 times the font size for a single line; the lists and tables guide explains how to derive sizes for your own type scale.
For badges overlapping a larger icon, a badge around a third of the main icon's width works: 12 px on 32 px, 16 px on 48 px. Smaller, and the chain logo is unrecognizable; larger, and it competes with the token.
Platform icons with fixed sizes
Some icons have sizes set by browsers and operating systems rather than by your design.
| Asset | Size | Format |
|---|---|---|
| Favicon for browser tabs | 16 and 32 px, in one .ico file |
ICO, which holds several sizes in one file |
| SVG favicon | Any; it scales | SVG, supported by most current browsers |
| Apple touch icon (iOS home screen) | 180 by 180 px | PNG, no transparency |
| Web app manifest icons | 192 by 192 and 512 by 512 px | PNG |
| Maskable manifest icon | 512 by 512 px, with a safe zone | PNG |
A typical setup in the document <head>:
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.webmanifest" />
And the icons part of the manifest:
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]
}
A few details trip people up. iOS fills transparent areas of the touch icon with black, so give it a solid background. A maskable icon can be cropped to a circle, a rounded square or another shape by the platform, so keep everything important inside the safe zone: a centered circle with a radius of 40% of the icon's width, which is 205 px of radius on a 512 px icon. And a 16 px favicon is a design problem of its own; a detailed logo scaled down to 16 px usually becomes a blur. The SVG favicons guide covers the SVG option, including dark mode.
Device pixel ratio
A CSS pixel is not a screen pixel. The device pixel ratio, available in JavaScript as window.devicePixelRatio, says how many physical pixels make up one CSS pixel across:
| Ratio | Typical screens | A 24 px icon is drawn with |
|---|---|---|
| 1x | Many desktop monitors | 24 by 24 physical pixels |
| 1.25x, 1.5x | Windows laptops with display scaling | 30 or 36 physical pixels across |
| 2x | High-density laptop screens, many phones | 48 by 48 |
| 3x | Many recent phones | 72 by 72 |
Three practical consequences:
- SVG covers every ratio with one file. It is rendered at the screen's density, so a 24 px SVG is sharp at 1x, 2x and 3x.
- Raster images need a file per density. A PNG shown at 24 CSS px needs 24, 48 and 72 px versions to be sharp everywhere, served with
srcset. Render each one from the SVG rather than resizing a single PNG. - 1x screens are the hard case for small icons. With only 16 or 24 physical pixels, lines that fall between pixels blur. Icons drawn on a pixel grid hold up better, as the pixel snapping guide explains. Fractional ratios such as 1.25x make exact snapping impossible, which is one more reason to keep small icons simple.
Export sizes on Web3 Icons
Each icon on Web3 Icons can be exported at 16, 24, 32, 48, 64, 128 or 256 px. Because the download is an SVG, the export size sets the width and height written into the file, not the quality. The drawing scales cleanly either way.
Pick the size you will display most often, so the file drops into a design tool or a page at the right size without resizing. For in-between sizes like 20 or 40 px, export the nearest size and set the final dimensions in your HTML or CSS.
Icon size is not target size
A 16 px icon can be part of a much larger clickable area, and it should be. WCAG 2.5.8 Target Size (Minimum), level AA in WCAG 2.2, asks for targets of at least 24 by 24 CSS pixels, with exceptions such as enough spacing around smaller targets. The level AAA criterion, 2.5.5 Target Size (Enhanced), asks for 44 by 44.
In practice: a 20 px network icon in the header sits inside a 36 to 44 px button, and a 32 px logo in a balances list sits inside a row that is entirely clickable and 56 px or more tall. The icon size comes from the tables above; the target size comes from the target size guide.