# Token icon sizes, shapes and the four ways they break Source: https://flexdger.com/blog/token-icons-sizes-shapes-traps Updated: 2026-09-28 Published: 2026-09-01 Topic: Crypto wallet mockups (https://flexdger.com/blog/crypto-wallets) > Crypto icons as PNG or SVG: the official sources for each mark, 32 to 40 pt rows, 96 to 120 px at 3x, the circle rule and the alpha and monochrome traps. Pick the size once, mask it with a circle, then check the four things that make a logo disappear, warp or go blank on a dark screen. **Short answer:** Token logos come from each project's own brand or press page, as PNG or SVG; for a wallet list, draw them at 32 to 40 pt (96 to 120 px at 3×) inside a circle. Put a plate behind any monochrome mark, because near-black logos vanish on a dark screen. ## Settle the size before touching a logo Icon trouble usually starts when three screens were drawn by three people and ended up with three sizes. Choose one size for list rows and one for detail headers, then stop. The rest is multiplication: a size in points times the device's scale factor gives pixels. - **Compact row in a secondary list:** 28 pt, so 56 px at 2× and 84 px at 3×. - **Standard token row:** 32 pt, so 64 px at 2× and 96 px at 3×. - **Roomy token row:** 40 pt, so 80 px at 2× and 120 px at 3×. - **Detail screen header:** 48 pt, so 96 px at 2× and 144 px at 3×. - **Master file on disk:** 256 px square. Watch two side effects. The icon is not the row height: a 40 pt icon in a 44 pt tappable row leaves just 2 pt around it, which is cramped, so shrink the icon or lengthen the row. And the icon does not dictate vertical rhythm. The two lines of text beside it do, and the icon is cut to match their combined height. Full row geometry lives in our [anatomy of a wallet portfolio screen](https://flexdger.com/guides/crypto-wallet-ui-anatomy). ## Why the mask is a circle Lists of tokens use circles nearly everywhere, and the cause is practical, not decorative. Logos from different projects come in every proportion with every amount of internal margin. A circle makes their visual weight predictable whatever sits inside. A square mask would make a logo with tight padding look 20 % bigger than its neighbour with generous padding. - **One shape per list.** Circles for tokens with a few squircles for “app-like” rows looks like a layout mistake, not variety. - **An app icon is neither a circle nor a plain rounded rectangle.** Apple's icon shape is a superellipse with continuous curvature. A circular-arc stand-in at about 22 % of the width is only an approximation, and the corner reads as subtly off next to a genuine icon. Supply the square master and let the platform add its mask. ## Sourcing the marks Take logos from the project's own brand or press page, as PNG or SVG. Not from a file pulled out of a wallet screenshot, and not from an icon site that says downloads carry no usage rights: only the project can say what its mark may be used for. Terms differ per page, so read them before using a file. This is what each page offered when we read it on 1 November 2026: - **Solana (SOL).** The brand and press page has a logomark, and its guidelines rule out shadows, outlines, stretching and low-contrast backgrounds. Master at 256 px square. The mark is a purple-to-green gradient and needs no plate, though it should stay off low-contrast backgrounds. - **Ethereum (ETH).** The assets page has the diamond as PNG and SVG in glyph, gray, color and purple versions, and states no license or usage terms. Master at 256 px square. On a dark screen the gray or glyph versions need a plate, so check the contrast. - **Bitcoin (BTC).** According to bitcoin.design there are no official brand style guidelines; it links an SVG and a PNG of the symbol, and the orange is #F7931A. Master at 256 px square. The orange disc acts as its own plate. - **USDC.** Circle's press room offers a logo download with versions for light and dark backgrounds. Its rules: do not alter, stretch or modify the files, and keep the token logo at least 32 px tall. Master at 256 px square. Choose the version made for your background and no plate is needed. - **Hyperliquid (HYPE).** The docs have a brand kit page with file attachments but no stated formats or terms. Master at 256 px square. Inspect whatever you download. Wherever the mark appears in your own page or video, add “not affiliated with” and the project's name. The wallet [draws these marks for you](https://flexdger.com/demo), so you never place a token icon by hand; for a whole screen around them, start from the [crypto wallet template](https://flexdger.com/blog/crypto-wallet-template). ## Preparing a source file ### Pad it to a square Community-made assets turn up as wordmarks, tall symbols, and SVGs whose viewBox disagrees with the artwork. Dropped into a square slot, they stretch or sit off to one side. Put each source on a square canvas first and centre the mark by eye, not by bounding box: a triangle centred mathematically always looks low. For SVG, convert strokes to outlines. Unconverted strokes scale unpredictably, and a width that is fine at 256 px turns into a hairline at 32 pt. ### Give monochrome marks a plate Plenty of major token marks are pure black, pure white or one flat colour. On a dark interface the black ones become a hole and the white ones a glaring disc that dominates the row. Resizing cannot repair either. What scales is a plate: fill the circle with the brand colour or a neutral surface, then set the mark on top with consistent padding. That also settles the padding question, because the mark now takes a fixed share of the circle instead of whatever the source happened to leave. ## Shipping the set ### Bundle every icon locally Fetching icons from a remote host when the screen renders gives blank circles on a slow network, offline, and on the day the host reshapes its URLs. A strict Content Security Policy may block them completely. That is why **Flexdger Wallet** bundles every icon itself, a restriction that proved to be the correct design anyway. ### Alpha: needed in the app, forbidden in the store image Icons need transparency inside the app, but a store screenshot must not have it: App Store Connect rejects a PNG with an alpha channel even if nothing looks transparent. Flatten once, as the very last export step, and keep the transparent masters. The other export rules are in [App Store screenshot sizes](https://flexdger.com/guides/app-store-screenshot-sizes). ## The network badge and contrast A small badge for the chain usually sits at the icon's bottom-right. Three rules, none relying on invented numbers: - Surround it with a ring in the row's background colour, so it detaches from the token icon. - Size it so that its content is still recognisable. A badge too small to read costs pixels and says nothing. - Never make it the sole carrier of the network. What a 12-pixel glyph conveys must also appear as text somewhere on the path. An icon that identifies something is a graphical object, so the parts carrying the meaning need 3:1 against their background under WCAG. That catches dark logos on dark plates and pale ones on pale plates, the same two pairings that look poor anyway. Here, fixing contrast and fixing appearance are one edit, which is not always the case. ## Quick reference: four failures - **Monochrome logo:** the icon vanishes on one theme. Add a circular plate. - **Alpha channel:** the store upload is rejected. Flatten for export only. - **Non-square source:** the icon is squashed or off-centre. Pad to square before masking. - **Remote icon URL:** blank circles on load or offline. Bundle the set locally. ## Checklist before export - One logical size per context, exported at 2× and 3×. - 256 px square masters, transparent, under version control. - Circular mask, even padding, optical centring. - A plate behind every monochrome mark. - Strokes outlined, sources padded to square. - Icons bundled, never fetched at render time. - Flattening only at export, and only for the store. ## What a wallet mockup draws Flexdger Wallet draws five marks: Solana, Ethereum, Bitcoin, Hyperliquid and USDC. They were vectorised from real screenshots, with contours traced and colours sampled instead of recreated from memory, and their prices are live. A mark that is almost right looks wrong at once, since the eye has met these five at 16 pixels a thousand times. Any other token is an uploaded square image, or a generated letter badge on a disc in a colour you choose, with a price you type. Real wallets do the same for tokens lacking artwork, so a badge is no stand-in: it is what the genuine screen would show. On a Solana screen, where most tokens have no drawn mark, [the Solana wallet simulator](https://flexdger.com/blog/solana-wallet-simulator) shows what a typed price does on video. Typed tokens bring one trap of their own: the length of the symbol. Three or four characters is normal, and the layout expects it. With seven, the quantity can push into the value column on a narrow screen, which you want to see before the listing image is made, not afterwards. ## Questions ### How big should a token icon be in a wallet list? Pick one logical size, 32 to 40 pt in a list row, which is 96 to 120 px at 3×, clip it to a circle, and keep a 256 px square master of every asset. ### Why are token icons round? A circular mask evens out logos that arrive with different padding and proportions, so each row carries the same visual weight. Do not mix circles and squares in one list. ### Can I put a token logo in my own video or app? Only on the terms of that project's brand page, and those differ: Ethereum's assets page states none, while Circle's press room says not to alter or stretch the USDC files. Write 'not affiliated with' plus the project's name wherever the mark shows. ### Why does a token logo sometimes vanish? Near-black marks disappear on a dark screen and near-white marks disappear on a light one. A monochrome logo needs a plate behind it. ### What if my mockup needs a token that has no drawn mark? Flexdger Wallet takes an uploaded square image or a generated letter badge in your token's colours. The row looks the same either way; only the mark changes.