Exchange logos on price and market pages

Almost every token price page has a markets section: a table of the places where the token trades, with the exchange's logo, the pair, the price, the volume and often a link to trade. The logos make the table easier to scan, but they also carry weight. A logo next to a price can read as a recommendation, and a DEX listed like a centralized exchange can mislead people about what they're dealing with.

This guide covers the layout of logos in a markets table, how to make the centralized/decentralized distinction visible, and how to keep the page neutral.

The table

A markets table is compared row by row and column by column, so it should be a real HTML table with headers, not a grid of <div>s:

<table class="markets">
  <caption>ETH markets</caption>
  <thead>
    <tr>
      <th scope="col">Exchange</th>
      <th scope="col">Pair</th>
      <th scope="col" class="num">Price</th>
      <th scope="col" class="num" aria-sort="descending">24h volume</th>
      <th scope="col"><span class="visually-hidden">Link</span></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">
        <span class="venue">
          <img src="/logos/exchanges/kraken.svg" width="20" height="20" alt="" />
          Kraken
          <span class="tag">CEX</span>
        </span>
      </th>
      <td>ETH/USD</td>
      <td class="num">1,234.56</td>
      <td class="num">$1.23M</td>
      <td><a href="/out/kraken-eth-usd">Trade<span class="visually-hidden"> ETH/USD on Kraken</span></a></td>
    </tr>
  </tbody>
</table>

The exchange cell is a row header (<th scope="row">), so screen readers can announce "Kraken" as the row's header when moving across its cells. The logo has empty alt because the name is right next to it. The visually hidden text turns a row of identical "Trade" links into distinct ones, which WCAG 2.4.4 Link Purpose (In Context) is about. aria-sort on the sorted column tells assistive technology which way the table is ordered.

Logo size and alignment

Rows in a markets table are often 40 to 48 px tall with 13 to 14 px text, which suits a 20 px logo, or 24 px if the rows are roomier. Larger logos make the exchange column feel like an advertisement and push the numbers to the right.

Exchange logos are inconsistent sources. Some brands use a square app icon, some a circular mark, some only a wordmark. In a table, use the compact symbol, never the full wordmark: a wordmark at 20 px tall is unreadable, and wordmarks of different lengths break the column's left edge. If an exchange only has a wordmark, the exchange logo icons guide covers how compact versions are derived. The exchange logos on Web3 Icons, such as Binance, Coinbase and Kraken, are compact symbols drawn in a square 24 by 24 frame, which suits table rows.

Then make the column regular:

.markets .venue {
  display: flex;
  align-items: center;
  gap: 8px;
}
.markets .venue img {
  flex: none;
  border-radius: 6px;
}
.markets .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

A shared container shape, here a small corner radius applied by CSS, makes mixed logos look like one set. The fixed icon size plus a fixed gap puts every exchange name on the same vertical line, which is what the eye follows when scanning down the column. Numbers align right with tabular figures, so prices and volumes line up by decimal place. The sizing guide has more on these pairings.

Some brands run more than one product, for example an exchange and a wallet, and their logos for each may differ. Make sure the logo matches the product you're listing.

Centralized exchanges and DEXs

A centralized exchange and a decentralized exchange are different kinds of venue. On a centralized exchange, the platform holds users' funds and runs an order book; on a DEX, trades happen through smart contracts, often against a liquidity pool, from the user's own wallet. Prices, fees, available pairs and what "volume" measures can differ between the two.

Listing them in one undifferentiated table hides that. Make the distinction visible:

• A type tag or column. "CEX" and "DEX" as text tags, as in the table above, or a dedicated "Type" column that can be filtered.
• Separate tabs for centralized and decentralized markets, if your users tend to care about one or the other.
• The chain for DEX rows. A DEX such as Uniswap runs on several networks, and the same pair on two chains is two different markets. Show the chain's name, and optionally a small chain badge on the DEX logo.
• The pool, not just the pair, where it matters. Two pools for the same pair on the same DEX, with different fee tiers, can have very different liquidity.

Don't use color alone for the distinction, such as a blue tint for DEX rows. Text tags work for everyone and survive screenshots.

Don't imply endorsement

A row in your markets table, with a logo and a "Trade" button, looks like a suggestion. Keep the page's own position clear:

• Use a neutral, stated default sort. "Sorted by 24h volume" in the caption or header tells people why an exchange is on top. Reported volume can be inflated on some venues, so some sites sort by liquidity or depth instead; whichever you choose, say what it is.
• Give every row the same treatment. No larger logos, highlighted rows or "Recommended" badges for some exchanges unless the reason is stated.
• Label paid placements and affiliate links. If an exchange pays for its position or you earn a commission on sign-ups, say so in the row or next to the table. Rules on advertising disclosure vary by country, so check the ones that apply to you.
• Keep the logo factual. Showing an exchange's logo to identify where a token trades is a different use from presenting the exchange as a partner. Avoid wording like "Our partners" unless there is an actual agreement.

Exchange logos are trademarks of their owners. Using them to identify a trading venue in a factual table is common practice, but this is general information, not legal advice; the trademarks guide covers the basics, and the exchange's brand guidelines say how they want their logo shown.

When a market goes away

Markets come and go: pairs are delisted, exchanges pause deposits, pools drain. A logo in the table should never outlive the market behind it. Hide or mark inactive markets ("Trading paused", "Delisted") in text, and show when the data was last updated, so a stale row isn't mistaken for a live one.