Sizing token icons in lists, tables and inputs

A token list can have perfect data and still look off: logos that dwarf their labels, tickers that sit a pixel below the icon's center, amounts that jitter as prices update. Almost all of it comes down to sizing the icon from the text around it, and aligning both on purpose.

This guide gives working size pairings for the places token icons appear most, then covers alignment, number columns and the CSS that keeps rows from shifting.

Size the icon from the text

Icons that sit beside a single line of text look balanced at roughly 1.15 to 1.5 times the font size. Smaller, and the logo turns into a dot no one can identify. Larger, and it pulls attention away from the name and amount, which are what people actually read.

These pairings are common starting points in wallets, exchanges and dashboards:

Treat them as defaults, not rules. A 16 px logo next to 14 px text is common in market tables, but many logos lose detail at that size; the 16 px design guide explains why some marks survive it and others don't. The size cheat sheet lists sizes for favicons, app icons and other places outside lists.

Two-line rows

Balances lists often stack the token name above a secondary line: the amount, the network, or the fiat value. Size the icon to the combined height of those lines. With a 16 px name on a 20 px line height and a 13 px subtitle on an 18 px line height, the text block is 38 px tall, so a 36 to 40 px icon lines up with its top and bottom. A 24 px icon in the same row looks lost, and a 48 px one makes the row feel like a card.

Alignment

For a single line, flexbox with align-items: center puts the icon's center on the center of the line box:

.row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.row img {
  flex: none;
}

This usually looks right for icons near the sizes above. If an icon looks slightly high next to lowercase-heavy text, it's an optical effect: the visual center of a word sits near the middle of its lowercase letters, a bit below the line box center. Nudge with margin-top: 1px rather than switching alignment modes.

For a two-line row, center the icon against the whole text block, not against the first line. Wrap the two lines in one element so flexbox centers the icon against both.

For icons inside running text, such as "Swap 0.5 ETH for USDC" with logos inline, flexbox isn't available. Size in em and shift down slightly:

.inline-token {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
}

The negative vertical-align drops the icon's bottom edge below the baseline, so the icon centers on the letters instead of sitting on the baseline and looking too high. Values between -0.125em and -0.25em are typical; check at the font sizes you actually use, since every typeface sits differently.

Gaps matter as much as sizes. An 8 px gap suits icons up to 24 px; 12 px suits 32 to 40 px icons. Equal gaps across all rows keep the names in a clean vertical line, which is what makes a long list scannable.

Tables and number columns

In a market table, the token column is read left to right and the number columns are compared top to bottom. Set them up differently.

/* a wrapper div inside the first cell; display: flex on the td itself breaks table layout */
.markets .asset {
  display: flex;
  align-items: center;
  gap: 8px;
}
.markets td.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

tabular-nums gives every digit the same width, so 1,111.11 and 8,888.88 take the same space, decimal points line up when the column is right-aligned, and live prices don't shift sideways each time they update. Most interface typefaces support it; if yours doesn't, the property has no effect, so test with digits that differ in width, like 1 and 0.

A few more rules keep tables readable:

• Give the icon the same size in every row, even when a logo looks visually smaller. Resizing individual logos to look even is a job for the artwork, not for the table.
• Keep the ticker in the same column as the icon. A ticker separated from its logo by a wide gap reads as two unrelated values.
• Show the same number of decimals within a column. The token amounts guide covers how to choose that number for assets with very different prices.
• Put units either in the header or in every cell, never in some cells only.

Inputs and token selectors

Swap and send forms put a token selector next to an amount input. The amount is the focus, so it gets the big type, often 24 to 36 px. The selector is a pill or button with a 20 to 24 px icon, the ticker at 16 px, and a chevron:

<div class="amount-field">
  <input inputmode="decimal" autocomplete="off" aria-label="Amount to pay" placeholder="0" />
  <button type="button" class="token-pill">
    <img src="/icons/tokens/USDC.svg" width="24" height="24" alt="" />
    USDC
  </button>
</div>

The alt is empty because the button's visible text already names the token. Keep the icon inside the button, not inside the input: an icon drawn into the input's padding is easy to get wrong and is not part of the control people expect to tap.

Resist making the selector icon as large as the amount text. A 36 px logo beside a 36 px number competes with it, and on a narrow screen it pushes the amount into truncation.

Keep rows from shifting

Two small habits prevent most layout problems.

Reserve the icon's space. Set width and height attributes on every <img>, so the browser lays out the row before the file arrives. Without them, a list renders, then jumps as each logo loads.

Stop icons from shrinking. In a flex row, a long token name can squeeze the icon below its set size. flex: none on the icon prevents it. On the text, min-width: 0 together with overflow: hidden, white-space: nowrap and text-overflow: ellipsis lets the name truncate instead.

Finally, remember that the icon size is not the tap size. A 20 px icon can sit inside a 48 px tall row whose entire area is clickable. The row is the target; the target size guide covers the minimums.