Circle or square? Container shapes for token icons

Open a token list in almost any wallet and you see a column of circles. Open the same wallet's "connect" screen and the dApps and wallets are rounded squares. Both conventions make sense on their own. The trouble starts on screens that show both at once: a portfolio with tokens next to the wallet that holds them, a search box that returns tokens, networks, wallets and exchanges in one list, a swap screen with a token and the aggregator that routes it.

This guide explains where the two shapes come from, what goes wrong when you mix them, and three ways to make a mixed list look deliberate.

Why tokens are round

Coins are round, and many token logos are literally drawn as coins: a filled disc with a symbol inside. Designers extended that to tokens whose logos aren't discs by placing them in a circle, and the circle became the shorthand for "an asset".

The circle also does practical work in a list. Every token gets the same silhouette, so the eye stops comparing outlines and moves to the ticker and the amount. A tall symbol and a wide symbol both become a circle of the same size. That uniformity is why a column of 40 token rows reads calmly even when the logos inside are wildly different.

Why wallets and exchanges are rounded squares

Wallets and exchanges are apps, and an app's most familiar picture of itself is its home screen icon. Phone operating systems display those icons in a rounded square or in a shape the device decides; browser extensions supply square images for the toolbar. People recognize a wallet by that app icon, so a dApp's wallet list shows it in the same shape. A wallet drawn in a circle looks slightly off to someone who sees its rounded square every day.

Exchanges add another twist: many are known by a wordmark rather than a symbol, so their square icon is often the app icon or a derived letter. Turning exchange wordmarks into compact icons covers that case.

What goes wrong side by side

Put a 32 px circle next to a 32 px square and the square looks bigger, because it is. A circle covers π/4 of its bounding box, about 78.5 percent: roughly 804 px² against the square's 1,024 px². A rounded square with an 8 px corner radius at 32 px still covers about 969 px², nearly 95 percent. Same box, about a fifth more ink.

In a mixed list this shows up as rows that look unevenly sized even though every icon has the same width and height. The circles look like they belong to a smaller tier. The guide on optical balance explains the effect and how icon designers correct it inside the artwork.

Three ways to mix shapes

The second option keeps both conventions and is often the most natural. A simple rule: render circles at 100 percent of the slot and rounded squares at about 92 percent, centered. At 32 px that means a 32 px circle beside a 29 or 30 px square. Check it by eye at your real sizes; the right number depends on your corner radius.

Masking logos into one container

When you go with one container, you have two ways to get each logo into it, and the right one depends on the artwork.

Clip the artwork with border-radius and overflow: hidden, or with clip-path: circle(50%). This works for logos that are already discs, and for full-bleed square app icons whose mark sits well inside the edges. It fails for anything with important content in the corners or along the edges, such as wordmarks and free-standing marks that touch their viewBox.

Inset the artwork on a container background. The logo is scaled to about two thirds of the container and centered on a neutral fill. This works for any logo, at the cost of making it smaller.

A small component can handle both, so the choice is made once per icon instead of once per screen:

type Shape = 'circle' | 'rounded'
type Fit = 'clip' | 'inset'

type IconAvatarProps = {
  src: string
  label: string
  size?: number
  shape?: Shape
  fit?: Fit
}

export function IconAvatar({ src, label, size = 32, shape = 'circle', fit = 'clip' }: IconAvatarProps) {
  const radius = shape === 'circle' ? '50%' : Math.round(size * 0.22)
  const inner = fit === 'clip' ? size : Math.round(size * 0.66)

  return (
    <span
      style={{
        display: 'inline-grid',
        placeItems: 'center',
        width: size,
        height: size,
        borderRadius: radius,
        overflow: 'hidden',
        background: fit === 'inset' ? 'var(--icon-backdrop)' : undefined,
      }}
    >
      <img src={src} alt={label} width={inner} height={inner} />
    </span>
  )
}

Store fit with each icon in your data instead of guessing at render time. A quick way to decide: view the logo clipped to a circle at 48 px. If anything that identifies it is cut off, it's an inset logo.

If the shape has to live inside an SVG, for example to build a composite with a badge, use a clipPath:

<svg viewBox="0 0 32 32" width="32" height="32">
  <clipPath id="avatar-disc">
    <circle cx="16" cy="16" r="16" />
  </clipPath>
  <image href="/icons/example-wallet.svg" width="32" height="32" clip-path="url(#avatar-disc)" />
</svg>

If you inline many of these on one page, give each clipPath a unique id; inline SVGs share the page's ID namespace, and duplicates can make every icon use the first one's clip. SVG ID collisions covers the fix.

Choosing a corner radius

For rounded squares, the radius decides whether the shape reads as an app icon or as a UI chip. A radius around 20 to 25 percent of the width looks like an app icon; around 10 to 15 percent looks like a card or a button. Pick one ratio and scale it with size, so a 24 px icon gets about 5 px and a 48 px icon about 11 px at 22 percent. Fixed radii, such as 8 px at every size, make small icons look like circles and large ones look sharp.

Phone operating systems draw app icons with a smoother corner curve than CSS border-radius produces. At list sizes the difference is hard to see, and it's not worth an SVG mask for every icon.

Where networks fit

Tokens are clearly assets and wallets clearly apps. Networks sit in between: a chain has a native token, which is round, and the chain itself is closer to a place or a platform. Chain logos come in every shape. Whatever you choose, make it a rule rather than a per-logo decision. A network switcher where some chains are circles and others squares looks broken even when each logo is correct on its own.

The decisions to write down, then, are short: which shape each category gets, how much smaller squares render next to circles, which logos are clipped and which are inset, and one corner-radius ratio. Once those exist, new icons slot in without anyone redesigning the list.