Stroke weight consistency across an icon set

Picture a token list with ten rows. Seven icons look about the same, two look bold enough to be highlighted, and one is so light it seems disabled. Nothing is selected or disabled; the logos were just drawn by different teams with different ideas of how heavy a mark should be. People read that weight as meaning, and in a product that's misleading.

With your own interface icons, the fix is simple: pick one stroke weight and draw everything to it. With third-party logos you can't redraw, so you need other levers. This guide covers what visual weight is made of, how to measure it, what you can adjust without touching the brand's shapes, and where to stop.

What makes a logo look heavy

Visual weight isn't one property. Four things contribute.

Line and feature thickness. A mark built from 3-unit-wide shapes looks bolder than one built from 1-unit lines at the same size. This is the closest thing logos have to a stroke weight.

Ink coverage. The share of the icon area that's actually filled. A solid disc with a small knockout covers most of its live area; an open line drawing covers a fraction of it.

Tonal darkness. On a light background, dark and saturated colors look heavier than pale ones. A navy mark and a pale yellow mark with identical shapes don't weigh the same. On a dark background the effect flips.

Fill versus outline. A filled shape reads as heavier than the same shape drawn as an outline, even when the outline's line weight matches the rest of the set.

In a branded set, all four vary from logo to logo. In a mono set, tonal darkness drops out because every icon is one color, which is one reason mono icons look calmer in dense views.

Measuring weight

Your eye is the final judge, but a number helps you find outliers in a set of hundreds. Ink coverage is easy to measure in the browser: draw the icon to a canvas and add up the alpha of every pixel.

async function inkCoverage(url, size = 96) {
  const img = new Image()
  img.src = url
  await img.decode()

  const canvas = document.createElement('canvas')
  canvas.width = canvas.height = size
  const ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0, size, size)

  const { data } = ctx.getImageData(0, 0, size, size)
  let ink = 0
  for (let i = 3; i < data.length; i += 4) ink += data[i] / 255
  return ink / (size * size)
}

const files = ['/icons/token-a.svg', '/icons/token-b.svg', '/icons/token-c.svg']
for (const file of files) {
  console.log(file, (await inkCoverage(file)).toFixed(2))
}

Run it in the console of a page served from the same origin as the files; a cross-origin image makes the canvas unreadable unless the server sends CORS headers and you set img.crossOrigin = 'anonymous' before src. Use files with transparent backgrounds, branded or mono. Tile-style icons are fully covered by definition.

There's no correct coverage value. What matters is the spread. Sort the results, look at the top and bottom few, and put those icons in a row with some from the middle. The numbers tell you where to look; the row tells you whether there's a problem. To include tonal darkness in the comparison, view the same row with a CSS filter: grayscale(1).

Evening out weight without redrawing

None of these changes touch the shapes of the brand's mark.

Size is the most precise lever. A solid coin that touches its 18-unit keyline next to a hollow line mark at the same size will look larger and heavier. Pulling the solid one in to about 17 units, or letting the line mark reach slightly past its keyline, often evens the row. Change in small steps and compare at the size you ship, not at the zoom level you edit in. Optical balance covers the related shape-based corrections, and keylines explained the template these adjustments start from.

Your own glyphs are the easy part

Logos rarely appear alone. Around them sit your own interface icons: the swap arrow between two token icons, the chevron on a selector, the copy button next to an address, the external-link arrow on an explorer link. Those you control fully, and they should be perfectly consistent.

• Pick one stroke weight. On a 24-unit canvas, 1.5 and 2 units are the common choices. At 16 px, a 1.5-unit stroke renders as exactly 1 px.
• Match the details. Use the same line caps and joins, rounded or square, and the same corner radius across the set.
• Keep the weight across sizes deliberately. By default a stroke scales with the icon, so a 2-unit stroke is 2 px at 24 px and about 1.3 px at 16. vector-effect="non-scaling-stroke" keeps the stroke at the same screen width at every size instead, which makes small icons relatively heavier. Choose one behavior for the whole set.

A clean, consistent set of interface glyphs makes uneven logos look less uneven, because the eye has a steady reference running through the layout.

Where normalization stops

There's a limit, and it arrives quickly. A logo drawn as fine line art will never match a solid disc in weight without thickening its lines, and thickening the lines is redrawing the brand. The same goes for filling in an outline mark, opening up a dense one or changing colors to equalize tone. Brand guidelines often prohibit exactly these kinds of edits; see can you modify a brand's logo? for the general picture.

When you hit that limit, you have three honest options. Accept some variation, since a set of different brands is supposed to look like different brands. Use a container or the tile style for that view, so the container sets the weight. Or contact the project and ask whether they have a version intended for small sizes.

Uniformity isn't the goal in itself. A set where every logo has been flattened to the same weight and density gets harder to scan, because the differences between marks are what people recognize. The goal is narrower: no icon should look emphasized, or disabled, for reasons that have nothing to do with the data in its row. When you want to check a whole set for this and other drift, auditing an icon set for consistency gives you a process.