Show stock logos by ticker symbol

Use case prompt

Build a stock watchlist with company logos, following https://www.logo.dev/docs/use-cases/stock-ticker-logos.md

Read that page and inspect this project's stack. Use this project's existing conventions.

Each row shows the company logo, the ticker, the company name, the price in its own currency, and the percent change. Build each logo URL from the identifier the market data already has: a ticker with its exchange suffix outside the US, an ISIN, or a crypto symbol. When a symbol has no logo, show a text badge with the ticker.

For API details, read https://www.logo.dev/docs/logo-images/ticker.md, https://www.logo.dev/docs/logo-images/isin.md, https://www.logo.dev/docs/logo-images/crypto.md, and https://www.logo.dev/docs/logo-images/introduction.md

A ticker such as 7974.T is hard to read, even for people who watch the market every day. A company logo next to each symbol makes a watchlist, a portfolio, or a screener easy to scan. Your app keeps the quotes, and it decides what a symbol with no logo shows.

Build the URL from the identifier you have

Use the identifier that is already in your market data:

You have	Lookup	Example
A US ticker	Ticker	`/ticker/AAPL`
A ticker on another exchange	Ticker with an exchange suffix	`/ticker/SHOP.TO`, `/ticker/7974.T`
An ISIN	ISIN	`/isin/US0378331005`
A crypto symbol	Crypto	`/crypto/BTC`

Store the ticker with its suffix, so that each row keeps its market.

Show a badge for a symbol with no logo

A text badge with the ticker fits a watchlist better than a lettermark, so the component below adds fallback=404 and shows the badge on error. Keep the generated monogram if a lettermark is enough.

Render the watchlist

A watchlist mixes exchanges, so each price uses its own currency:

import { useState } from "react";

type Quote = {
  ticker: string; // with the exchange suffix outside the US, e.g. "SHOP.TO"
  name: string;
  price: number;
  currency: string; // ISO 4217 code, e.g. "USD", "CAD", "JPY"
  change: number; // percent, e.g. 1.2 or -2.1
};

function TickerLogo({ ticker, name, token }: { ticker: string; name: string; token: string }) {
  // Track which ticker failed, so a new ticker retries the lookup.
  const [failedTicker, setFailedTicker] = useState<string | null>(null);

  if (failedTicker === ticker) {
    return (
      <span
        aria-label={`${name} ticker badge`}
        className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-zinc-100 text-[10px] font-semibold text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300"
        role="img"
      >
        {ticker.split(".")[0].slice(0, 4)}
      </span>
    );
  }

  return (
    <img
      alt={`${name} logo`}
      className="h-10 w-10 shrink-0 rounded-full object-contain"
      height={40}
      loading="lazy"
      onError={() => setFailedTicker(ticker)}
      src={`https://img.logo.dev/ticker/${encodeURIComponent(ticker)}?token=${token}&format=webp&retina=true&size=40&fallback=404`}
      width={40}
    />
  );
}

export function Watchlist({ token, quotes }: { token: string; quotes: Quote[] }) {
  return (
    <ul className="max-w-md divide-y divide-zinc-950/5 dark:divide-white/5">
      {quotes.map((quote) => (
        <li className="flex items-center gap-3 py-3" key={quote.ticker}>
          <TickerLogo name={quote.name} ticker={quote.ticker} token={token} />
          <div className="min-w-0">
            <div className="text-sm font-semibold">{quote.ticker}</div>
            <div className="truncate text-xs text-zinc-500">{quote.name}</div>
          </div>
          <div className="ml-auto text-right tabular-nums">
            <div className="text-sm font-medium">
              {new Intl.NumberFormat("en-US", {
                style: "currency",
                currency: quote.currency,
              }).format(quote.price)}
            </div>
            <div
              className={`text-xs font-medium ${
                quote.change >= 0 ? "text-emerald-600" : "text-red-600"
              }`}
            >
              {quote.change >= 0 ? "+" : ""}
              {quote.change.toFixed(1)}%
            </div>
          </div>
        </li>
      ))}
    </ul>
  );
}

import { Watchlist } from "./Watchlist";

export function Markets() {
  return (
    <Watchlist
      quotes={[
        { ticker: "AAPL", name: "Apple", price: 214.3, currency: "USD", change: 1.2 },
        { ticker: "SHOP.TO", name: "Shopify", price: 148.2, currency: "CAD", change: 2.4 },
        { ticker: "7974.T", name: "Nintendo", price: 8420, currency: "JPY", change: -0.8 },
        { ticker: "ADS.DE", name: "adidas", price: 214.5, currency: "EUR", change: 0.5 },
        { ticker: "NVDA", name: "NVIDIA", price: 128.44, currency: "USD", change: 3.8 },
      ]}
      token="LOGO_DEV_PUBLISHABLE_KEY"
    />
  );
}

Test the watchlist

Test with a US ticker such as AAPL, suffixed tickers such as SHOP.TO and 7974.T, and a made-up symbol. Check that the made-up symbol shows its ticker badge, and that each price shows its own currency.

Logo.dev CDN by ticker

Exchange suffixes and parameters for ticker lookups.

Transaction feeds

Build the same row pattern for banking and expense apps.

Start simple

Fintech

CRM and sales

Marketing and onboarding

Marketplaces

Branded content

Show stock logos by ticker symbol

Build the URL from the identifier you have

Show a badge for a symbol with no logo

Render the watchlist

Test the watchlist

Logo.dev CDN by ticker

Transaction feeds

​Build the URL from the identifier you have

​Show a badge for a symbol with no logo

​Render the watchlist

​Test the watchlist

Logo.dev CDN by ticker

Transaction feeds

Build the URL from the identifier you have

Show a badge for a symbol with no logo

Render the watchlist

Test the watchlist