Token icons: sizes, shapes and the traps

What size to draw them, why the circle is not really negotiable, and the four things that break a token icon on a dark screen.

Published: 27 August 2026

One size, decided once

The single most common mistake is having three icon sizes because three screens were designed by three people. Pick one size for list rows, one for detail headers, and stop. Everything else is arithmetic: a logical size in points multiplied by the device scale factor.

Context	Logical size	At 2×	At 3×
Compact row, secondary list	28 pt	56 px	84 px
Standard token row	32 pt	64 px	96 px
Roomy token row	40 pt	80 px	120 px
Detail screen header	48 pt	96 px	144 px
Master asset on file	—	—	256 px square

Two consequences worth stating plainly. First, the icon is not the row height: a 40 pt icon inside a 44 pt tappable row leaves 2 pt of breathing space, which is too tight — either the icon shrinks or the row grows. Second, the icon does not set the vertical rhythm. The two stacked text lines beside it do, and the icon is sized to match their combined height rather than the other way round. The full row geometry is in our anatomy of a wallet portfolio screen.

Circle, squircle or square

Token icons in lists are circles almost universally, and the reason is mechanical rather than aesthetic. Source logos arrive in every proportion and with every amount of internal padding. A circular mask normalises them: the visual weight of a circle is predictable regardless of what is inside it, whereas a square mask makes a logo with tight padding look 20 % larger than its neighbour with generous padding.

Two shape notes that cost time when you get them wrong:

• Do not mix shapes in one list. Circles for tokens, squircles for a couple of "app-like" entries — the eye reads it as misalignment, not variety.
• An app icon is not a circle and not a rounded rectangle. Apple's icon shape is a superellipse with continuous curvature. The usual circular-arc approximation is around 22 % of the width, and it is only an approximation — the corner will look subtly wrong beside a real icon. Ship the square master and let the platform apply its own mask.

The four traps

Trap	Symptom	Fix
Monochrome logo	Icon vanishes on one theme	Circular plate behind it
Alpha channel	Store upload rejected	Flatten for export only
Non-square source	Icon squashed or off-centre	Pad to square before masking
Remote icon URL	Blank circles on load or offline	Bundle the set locally

1. Monochrome logos

A meaningful share of major token marks are pure black, pure white, or a single flat colour. On a dark interface the black ones become a hole and the white ones become a bright disc that outshouts everything around it. Neither is fixable by resizing.

The fix that scales is a plate: fill the circular mask with the brand colour, or a neutral surface, and place the mark on top with consistent internal padding. It also solves the padding problem in one move, since the mark now occupies a fixed fraction of the circle rather than whatever the source file decided.

2. Alpha, which you need and cannot ship

Icons need transparency in the app and must not have it in a store screenshot — a PNG with an alpha channel is rejected by App Store Connect even when nothing visibly appears transparent. Flatten at export, once, as the last step, and keep the transparent masters. The rest of the export rules are in App Store screenshot sizes.

3. Sources that are not square

Community assets arrive as wordmarks, as tall symbols, as SVGs with a viewBox that does not match the artwork. Dropping one into a square slot either distorts it or off-centres it. Pad every source to a square canvas first, with the mark optically centred rather than mathematically centred — a triangle centred by its bounding box always looks low.

On SVG specifically: strokes that are not converted to outlines scale incorrectly, and a stroke width that looks right at 256 px becomes a hairline at 32 pt. Outline the strokes.

4. Icons loaded from somewhere else

Pulling icons from a remote host at render time gives you blank circles on a slow connection, blank circles offline, and blank circles the day the host changes its URL scheme. A strict Content Security Policy will refuse them outright, which is how we ended up bundling every icon locally in My Larp Wallet — a constraint that turned out to be the right design anyway.

The chain badge

A small badge indicating the network usually sits at the bottom-right of the icon. Three rules, no invented numbers:

• Give it a ring in the row's background colour, so it separates from the token icon rather than blending into it.
• Size it so its own content is still identifiable — a badge too small to read is decoration that costs pixels.
• Never let it be the only indicator of the network. Any information carried by a 12-pixel glyph must also exist as text somewhere on the path.

Contrast still applies

An icon that identifies something is a graphical object, and the parts that carry the meaning need 3:1 against their background under WCAG. In practice this catches dark logos on dark plates and pale logos on pale plates — the two cases that also look bad. Fixing the contrast and fixing the appearance are the same edit here, which is not always true.

A short checklist

• One logical size per context, exported at 2× and 3×.
• 256 px square masters, transparent, kept in version control.
• Circular mask, consistent internal padding, optically centred.
• Plate behind every monochrome mark.
• Strokes outlined, sources padded to square.
• Bundled locally, never fetched at render time.
• Flattened only at export, and only for the store.