Turning exchange wordmarks into compact icons

Many exchanges are known by their name, and their main logo is a wordmark: the name set in custom lettering, sometimes with a small symbol attached. That works on a website header. It fails in the places product designers actually need an exchange logo: the "Markets" table on a coin's price page, a deposit screen listing where you can buy, a portfolio that groups balances by exchange. All of them want a square icon at 20 to 24 px.

The math is unforgiving. A wordmark with a 5:1 aspect ratio, fitted into a 24 px square, comes out 24 px wide and under 5 px tall. The capital letters end up around 3 to 4 px high, which is not text anymore. This guide covers the options for getting to a square, in the order you should try them.

Look for the square the brand already made

Before deriving anything, check what the exchange publishes. Most centralized exchanges ship a mobile app, and an app needs a square icon, so the brand has usually designed its own compact form already. Press kits frequently include a symbol (also called a logomark) separately from the full logo, along with rules for when to use which. Press kits and brand guidelines covers where to find them.

The favicon is another clue: it's the brand's own answer to "what are we at 16 px". It is not a source file, though. Don't scale a 32 px favicon up to 48 px; find the vector version of the same mark.

If you only need common exchanges, browse the exchanges in the icon library. Comparing a few, such as Binance, Coinbase and Kraken, shows how differently brands handle the compact form.

Extract the symbol from a lockup

Often the symbol exists but only inside a lockup: one SVG containing the symbol on the left and the wordmark on the right. You can isolate the symbol in a text editor. Here is a simplified lockup:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 32">
  <circle cx="16" cy="16" r="16" fill="#2a64f6" />
  <path d="M44 8h6v16h-6z M56 8h6v16h-6z M68 8h20v6H68z" fill="#2a64f6" />
</svg>

The circle is the symbol, occupying x 0 to 32. Everything from x 44 onward is the wordmark. To make the icon, delete the wordmark's elements and shrink the viewBox to the symbol:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <circle cx="16" cy="16" r="16" fill="#2a64f6" />
</svg>

Delete the wordmark paths rather than only cropping them out of view. Hidden paths still add bytes, and anyone who later resets the viewBox gets the full lockup back in a square box.

Real symbols are rarely exactly square. To find the bounds, open the SVG in a browser and run document.querySelector('svg').getBBox() in the console, or check each element if the symbol is several paths. If the symbol is 26 units wide and 32 tall, starting at x 0, center it in a square viewBox by adding 3 units on each side: viewBox="-3 0 32 32". The guide on the SVG viewBox explains the four numbers if this is new.

When there is no symbol

Some exchanges have no symbol at all, only the wordmark. You have three options, in decreasing faithfulness to the brand.

1. A cropped letter from the official wordmark

Use the same viewBox technique on the first letter of the wordmark: frame the first glyph, delete the rest, pad to a square. The result keeps the brand's own letterform and color, so it's recognizable to people who know the logo.

It works when the first letter is distinctive, in a custom shape or with a notable detail. It works poorly when the lettering is a plain sans serif, because then it's just a letter. Be aware that you are creating a mark the brand didn't make. If the icon will appear in anything public, check the brand guidelines first; some brands explicitly allow or forbid derived marks. Can you modify a brand's logo? covers the general questions, which are not a substitute for legal advice.

2. A neutral monogram

Set the first letter in your own interface font on a neutral tile. A monogram doesn't pretend to be the brand's logo: it's clearly a placeholder in your product's style, which is exactly what you want when no official square form exists.

type MonogramProps = { name: string; size?: number }

export function Monogram({ name, size = 24 }: MonogramProps) {
  const letter = [...name.trim()][0]?.toUpperCase() ?? '?'

  return (
    <span
      aria-hidden="true"
      style={{
        display: 'inline-grid',
        placeItems: 'center',
        width: size,
        height: size,
        borderRadius: Math.round(size * 0.22),
        background: 'var(--monogram-bg)',
        color: 'var(--monogram-fg)',
        fontSize: Math.round(size * 0.5),
        fontWeight: 700,
        lineHeight: 1,
      }}
    >
      {letter}
    </span>
  )
}

Keep the tile neutral, in your interface grays. Tinting each monogram with the exchange's brand color is tempting, but it creates a pseudo-logo that looks official without being so.

The monogram is aria-hidden because it always sits next to the exchange name, which screen readers announce instead. Sighted users need that name too, because exchange names cluster on the same first letters. Binance, Bybit, Bitget, Bitfinex, Bitstamp and Bithumb all start with B, so a column of "B" tiles distinguishes nothing. The name does the identifying; the monogram only keeps the column aligned.

3. The wordmark in a wider slot

Sometimes the best answer is not to force a square. If the layout has room, show the wordmark at a fixed height in a wider slot:

.exchange-wordmark {
  height: 16px;
  width: auto;
  max-width: 88px;
  object-fit: contain;
  object-position: left center;
}

This suits "available on" strips, partner rows and footers, where the logo replaces the name instead of repeating it. It doesn't suit dense tables: rows of varying-width wordmarks make the text column ragged, and the wordmark duplicates the name column next to it. Fix the height, not the width, so every wordmark sits on the same baseline. Lowercase wordmarks often look smaller than all-caps ones at the same height, so you may need a pixel or two of difference to make them look equal.

Decentralized exchanges

DEXs often start with an advantage: many have a symbol at the center of their identity, such as Uniswap. The complication is elsewhere. A DEX's logo and its governance token's logo are frequently related or identical, so the same picture can appear in an exchanges table and in a token list with different meanings. Label clearly which one a row refers to, and don't reuse the exchange entry as the token's icon without checking that the brand uses the same artwork for both.

Keep the decision with the data

Whichever route you take for each exchange, record it next to the icon: official symbol, extracted from lockup, cropped letter, monogram or wordmark. When the exchange later publishes a proper symbol, that note tells you which icons to replace first. The same applies to markets tables, covered in exchange logos on price and market pages: a consistent, honest fallback beats a stretched favicon.