Optical balance: making a circle and a square look the same size

Draw a circle and a square with exactly the same 24 px bounding box and put them side by side. Most people see the circle as smaller. The drawing is correct; the eye simply doesn't measure bounding boxes. It judges size by mass, edges and corners.

Crypto interfaces run into this constantly, because many token logos are round coins while a lot of wallet and exchange logos are squares or app-style tiles. This guide explains the illusion, gives you numbers to correct it, and shows how to handle mixed lists when you can't redraw the artwork.

Why the circle looks smaller

Three effects add up.

Less area. A circle covers π/4 of its bounding square, about 78.5%. The square covers all of it. With the same width, the square simply has more ink.

Empty corners. The circle touches its box at only four points. The four corners, where the eye looks for the extent of a shape, are empty.

Edges read as boundaries. A straight edge running along the full side of the box marks the size clearly. A curve is moving away from the boundary almost everywhere, so the circle's size feels like it sits somewhere inside its box.

Pointed shapes have it worse. A diamond, meaning a square rotated 45 degrees, and an upright triangle each cover only half of their bounding box, and their extent is defined by single points.

Overshoot: the type designer's fix

Type designers deal with this in every font. Round letters such as O, C and S extend slightly above the cap height and below the baseline, and pointed letters such as A and V reach past them too. The amount is small, a few percent of the letter height, but without it an O looks like it's sinking below its neighbors and an A looks short.

Icons use the same principle, called overshoot: round and pointed shapes extend a little beyond where a flat-edged shape would stop. On a 24-unit canvas, a circle typically runs half a unit to a unit past the edges of the square it should match, and pointed shapes run further.

Putting numbers on it

A useful starting point is to match areas. A square with the same area as a circle of diameter d has a side of d × √π / 2, about 0.886 × d. Turned around, a circle that matches a square of side s has a diameter of about 1.128 × s.

Equal area is a starting point, not a rule. The common keyline pairing of a 20-unit circle with an 18-unit square is a touch more generous than the 17.7 the formula gives. Treat the formula as the first guess, then adjust by eye. Keylines explained turns these proportions into a reusable template.

Pointed shapes and the optical center

For pointed shapes, let the points reach the edge of the live area, or slightly past it, rather than sizing the shape by its box. A diamond that's as wide as the circle beside it looks much smaller; one that pokes past the circle's edges looks about right.

Position needs the same treatment as size. Centering by bounding box puts the geometric center in the middle, but a shape with more mass on one side looks off-center. The classic example is a play triangle: centered by its box, it looks shifted toward its flat side, so designers nudge it toward the point. Logos with a heavy base, a tall spike on one side or an asymmetric swoosh need the same kind of nudge. Center by mass, then check.

Coins next to wallets and exchanges

Mixed shapes turn up in specific places in crypto products:

• Funding screens, where tokens (round) sit beside exchange accounts and wallets (often square) as sources of funds.
• Portfolios grouped by venue, where an exchange row with a square logo heads a list of round token logos.
• Wallet connection modals, where some wallets use square app icons and others use free-standing marks.
• Activity feeds, where a swap row shows a protocol logo next to two token logos.

There are three ways to handle them.

Put everything in one container. Place every mark on the same circle or tile, as a tile-style icon does. The container's shape dominates and the differences between marks mostly disappear. The cost is heavier icons and some loss of recognition for marks that rely on their outline. Circle or square containers covers that choice in depth.

Size by shape. Keep the marks free-standing and give squares a smaller footprint than circles, following the table above.

Use artwork that's already balanced. If your icons were drawn to keylines, the correction is in the files. Don't apply it a second time in code, or square marks will look too small.

Fixing mixed artwork in code

Logos collected from different sources, such as logoURI entries in token lists, often fill their whole image edge to edge, with no padding. If you know which ones are square, you can scale those down inside a fixed slot. Keep the inset a whole number of pixels on each side, so the image isn't pushed onto a half pixel and blurred:

type Shape = 'circle' | 'square'

// starting points from equal area; adjust after looking at real rows
const FACTOR: Record<Shape, number> = { circle: 1, square: 0.89 }

export function BalancedLogo({ src, shape, slot = 24 }: { src: string; shape: Shape; slot?: number }) {
  const inset = Math.round((slot * (1 - FACTOR[shape])) / 2)
  const size = slot - inset * 2

  return (
    <span style={{ display: 'inline-grid', placeItems: 'center', width: slot, height: slot }}>
      <img src={src} width={size} height={size} alt="" />
    </span>
  )
}

With those factors, a square logo renders at 14 px in a 16 px slot, 18 in 20, 22 in 24, 28 in 32 and 42 in 48. The slot stays the same size for every row, so text alignment doesn't shift. The empty alt assumes the asset's name is shown next to the icon; if it isn't, put the name in alt. Where the shape data comes from is up to you: a field in your asset metadata, or a short hand-maintained list of the square marks you display. Token lists and logoURI explains where those logo files typically come from.

Checking the result

Equal size is a perception, so the final check is visual:

1. Put a real row together: three or four coins, one or two square marks, one pointed mark.
2. View it at the size you ship, then at 400% zoom.
3. Squint, or blur the screenshot slightly. Any icon that stands out as bigger or smaller needs adjusting.
4. Check it on both your light and dark backgrounds, since a light-colored square on a dark surface looks larger than the same square in a dark color.

When nothing jumps out in the squint test, the row is balanced, even if the bounding boxes no longer match.