Designing token icons that survive at 16px

Sixteen pixels is the size where token icons break. It's also a size they're asked to work at all the time: inline in a transaction description, as the chain badge on another icon, in a dense markets table, in a dropdown, in a browser tab. A logo that looks sharp at 48 px can turn into a colored smudge at 16.

This guide explains what physically happens at that size, gives you minimum feature sizes to design against, shows how to test on both standard and high-density screens, and helps you decide which details to give up.

What 16 pixels actually gives you

On a standard 1x display, a 16 px icon is a 16 by 16 grid: 256 pixels in total. If the icon is drawn on a 24-unit canvas with a 3-unit margin, the mark itself lives in a 12 by 12 pixel area. That's 144 pixels for an entire logo, color and all.

On a 2x screen, the same icon gets 32 by 32 device pixels and a 24 by 24 live area, four times as many pixels. This is why icons that look fine on a designer's laptop can fall apart on an office monitor or a budget Windows laptop, which often run at 1x or 1.25x scaling.

Each unit of a 24-unit drawing becomes two-thirds of a pixel at 16 px. Nothing in the drawing is smaller than it was; there just aren't enough pixels to show it.

What breaks first

Thin strokes. A 1-unit line renders 0.67 px wide. The screen can't light two-thirds of a pixel, so anti-aliasing draws a pale line instead, either one pixel at partial strength or two pixels at lower strength. On a dark theme, a thin light line becomes a faint gray smear; on a light theme, a thin dark line goes gray.

Gaps and counters. The space between two shapes fails before the shapes do, because the blur eats into it from both sides. A 1-unit gap between a coin's rim and its inner disc, or the hole in a letter like B, fills in and the two parts merge.

Text. A ticker printed on the face of a coin might end up 4 or 5 px tall. Pixel fonts can manage letters that small with hand-placed pixels; scaled vector text can't. It becomes a texture, not a word. The label next to the icon already says the ticker, so the icon doesn't need to.

Gradients and effects. Over 12 pixels, a gradient reads as roughly one in-between color, often duller than either end. A drop shadow turns into a dark fringe on one side. A glossy highlight becomes a random light pixel.

Small separate pieces. Sparkles, dots and tiny orbiting shapes either vanish or turn into single stray pixels that look like rendering errors.

Minimum feature sizes

A practical rule: anything that must stay visible should be at least one device pixel wide at 1x, and gaps should be a bit wider than strokes because they lose more to blur. On a 24-unit canvas, that translates to:

So for an icon that has to work at 16 px, treat 1.5 units as the floor for strokes, and aim for 2 units or more on the features that carry recognition. Give gaps 2 units where you can. If you control the artwork, putting important straight edges on multiples of 3 units makes them land exactly on pixel boundaries at 16 px; why icons are drawn on a 24 × 24 grid shows the math, and pixel snapping covers the alignment itself.

Test at 1x and 2x

If you design on a high-density screen, you're not seeing what many of your users see. Test both ways.

Set the device pixel ratio. The responsive or device mode in Chrome, Edge and Firefox DevTools lets you choose a device pixel ratio. Set it to 1, check, then set it to 2. Menu names and locations change between browser versions, so look for a "DPR" or "device pixel ratio" option.

Use a test strip. Put the icon in realistic rows, at real sizes, on both of your backgrounds, with a label beside it:

<style>
  .strip { display: flex; gap: 16px; padding: 16px; font: 14px/20px system-ui, sans-serif; }
  .strip span { display: flex; align-items: center; gap: 6px; }
  .light { background: #fff; color: #111; }
  .dark { background: #111; color: #eee; }
</style>

<div class="strip light">
  <span><img src="token.svg" width="16" height="16" alt=""> ABC</span>
  <span><img src="token.svg" width="20" height="20" alt=""> ABC</span>
  <span><img src="token.svg" width="24" height="24" alt=""> ABC</span>
</div>
<div class="strip dark">
  <span><img src="token.svg" width="16" height="16" alt=""> ABC</span>
  <span><img src="token.svg" width="20" height="20" alt=""> ABC</span>
  <span><img src="token.svg" width="24" height="24" alt=""> ABC</span>
</div>

Look at real pixels. Take a screenshot at a device pixel ratio of 1 and enlarge it with smoothing turned off (nearest-neighbor scaling). Many image viewers smooth by default, which hides the very blur you're looking for.

Test with neighbors. An icon that's legible alone can still be confused with the icon in the next row. Put it among the tokens it usually appears with.

Deciding what to drop

At 16 px something has to go. Rank the parts of the mark by how much recognition they carry, keep from the top and drop from the bottom:

1. The outer silhouette
2. The single interior feature that identifies it, such as a letter or symbol
3. The main brand color
4. Secondary interior shapes
5. Rims, outlines and inner borders
6. Gradients, shadows and highlights
7. Text

Remove one level at a time and retest. Stop as soon as the icon reads. Then strengthen what's left: thicken the key feature toward 2 units and open the gaps around it.

Here's how that plays out on a typical coin: a disc with a thin outer rim, a soft radial gradient, a bold central glyph and the ticker set small along the bottom edge. At 16 px, the ticker goes first. The gradient flattens to its dominant color. The rim becomes a gray ring, so it goes next, or merges into the disc edge. The glyph gets a slightly heavier weight and a little more space around it. What's left, a solid disc with a clear glyph, is what people recognized all along.

When the icon isn't yours

For your own product's icons, you can draw a dedicated 16 px version and change whatever you need. For someone else's logo, the changes above should stay on the subtracting side: dropping effects, text and secondary detail, opening gaps slightly. Reshaping the main symbol is redrawing the brand. Check first whether the project publishes a favicon or small-size version, because that's their own answer to this exact problem. Simplifying a complex crypto logo goes through the full process, including what you may and may not change.