Skip to main content
Tickers alone are hard to scan, even for people who watch them daily. A logo next to each symbol makes a watchlist readable at a glance, which is table stakes for trading and portfolio apps. Your user runs down the list and spots Apple or NVIDIA by mark before reading a single symbol. Each logo comes straight from the ticker endpoint, so you skip mapping symbols to domains.

​
Demo

Here’s the watchlist rendering five sample quotes: The prices are sample data, but every logo loads live from the ticker endpoint.

​
Build it with AI

Want logos in your stock watchlist? This prompt gives your AI coding tool everything it needs to build it in your framework.

Open in Cursor

​
Code

This example is in React, but you can get the same result in any frontend framework: each row is one ticker-keyed image URL next to your quote data. Paste Watchlist.tsx, then render it as the Usage tab shows. Logos render at 40px from an 80px source, so they stay sharp on retina screens. 
type Quote = {
  ticker: string;
  name: string;
  price: number;
  change: number; // percent, e.g. 1.2 or -2.1
};

const usd = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
});

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}>
          <img
            alt={`${quote.name} logo`}
            className="h-10 w-10 rounded-full object-contain"
            height={40}
            loading="lazy"
            src={`https://img.logo.dev/ticker/${quote.ticker}?token=${token}&format=webp&retina=true&size=80`}
            width={40}
          />
          <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">{usd.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>
  );
}
Your publishable key is built for client-side code, so you can ship it in the browser as-is.

​
How it works

  • Lookup is by ticker symbol, not domain. img.logo.dev/ticker/AAPL resolves the symbol to the company and serves its logo, so each row needs only the ticker you already have. See the ticker endpoint.
  • Query parameters handle the rendering. size sets dimensions, retina keeps marks sharp, and format=webp keeps files light. See all image parameters.
  • The CDN keeps refreshes cheap. Logos load like any other cached image, so re-rendering the list as prices move costs nothing beyond normal image requests.
  • The layout is plain markup. Prices stay aligned as values change and logos load as rows scroll into view. The component above carries the details.

​
Make it your own

  • Use other identifiers. Swap /ticker/ for ISIN (/isin/US0378331005) or crypto symbols (/crypto/BTC) and keep the same component.
  • Handle symbols outside coverage. Fall back to the company’s website with the logo from a domain pattern.
  • Restyle the logos. Add &greyscale=true for a muted list or &theme=dark for dark backgrounds. See all image parameters.

​
Next steps

Ticker lookup

Read the full reference for logos by stock ticker.

Transaction logos

Build the same row pattern for banking and expense apps.