> ## Documentation Index
> Fetch the complete documentation index at: https://www.logo.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Show stock logos by ticker symbol

> Make watchlists scannable at a glance. Each row gets a company logo looked up straight from the ticker symbol, without mapping tickers to domains.

export const StockWatchlistDemo = () => {
  const TOKEN = "live_6a1a28fd-6420-4492-aeb0-b297461d9de2";
  const STOCKS = [{
    ticker: "AAPL",
    name: "Apple",
    price: 214.3,
    change: 1.2
  }, {
    ticker: "NVDA",
    name: "NVIDIA",
    price: 128.44,
    change: 3.8
  }, {
    ticker: "MSFT",
    name: "Microsoft",
    price: 448.91,
    change: 0.6
  }, {
    ticker: "TSLA",
    name: "Tesla",
    price: 182.1,
    change: -2.1
  }, {
    ticker: "AMZN",
    name: "Amazon",
    price: 186.54,
    change: -0.4
  }];
  const usd = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD"
  });
  return <div className="not-prose my-8 rounded-2xl border border-zinc-950/10 bg-gradient-to-br from-zinc-50 to-white p-6 shadow-sm sm:p-8 dark:border-white/10 dark:from-zinc-900 dark:to-zinc-950">
      <ul className="mx-auto max-w-md divide-y divide-zinc-950/5 dark:divide-white/5">
        {STOCKS.map(stock => <li className="flex items-center gap-3 py-3" key={stock.ticker}>
            <img alt={`${stock.name} logo`} className="h-10 w-10 rounded-full object-contain" height="40" loading="lazy" src={`https://img.logo.dev/ticker/${stock.ticker}?token=${TOKEN}&format=webp&retina=true&size=80`} width="40" />
            <div className="min-w-0">
              <div className="text-sm font-semibold text-zinc-950 dark:text-white">
                {stock.ticker}
              </div>
              <div className="truncate text-xs text-zinc-500 dark:text-zinc-400">
                {stock.name}
              </div>
            </div>
            <div className="ml-auto text-right tabular-nums">
              <div className="text-sm font-medium text-zinc-950 dark:text-white">
                {usd.format(stock.price)}
              </div>
              <div className={`text-xs font-medium ${stock.change >= 0 ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400"}`}>
                {stock.change >= 0 ? "+" : ""}
                {stock.change.toFixed(1)}%
              </div>
            </div>
          </li>)}
      </ul>
    </div>;
};

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](/docs/logo-images/ticker), so you skip mapping symbols to domains.

## Demo

Here's the watchlist rendering five sample quotes:

<StockWatchlistDemo />

The prices are sample data, but every logo loads live from the ticker endpoint.

## Build it with AI

<Prompt description="Want logos in your stock watchlist? This prompt gives your AI coding tool everything it needs to build it in your framework." actions={["copy", "cursor"]}>
  Build a stock watchlist with company logos using Logo.dev.

  * Render a list of quotes where each row shows the company's logo, ticker, name, price, and percent change.
  * Logos load by ticker symbol, with no domain needed: [https://img.logo.dev/ticker/:symbol?token=LOGO\_DEV\_PUBLISHABLE\_KEY\&format=webp\&retina=true\&size=80](https://img.logo.dev/ticker/:symbol?token=LOGO_DEV_PUBLISHABLE_KEY\&format=webp\&retina=true\&size=80), rendered at 40px in a circle.
  * Right-align prices and changes with tabular numbers so the columns stay steady. Color gains green and losses red.
  * Lazy-load the logo images so long watchlists stay cheap.
  * Use a Logo.dev publishable key (safe in client code), never a secret key.
  * Reference implementation: [https://www.logo.dev/docs/use-cases/stock-ticker-logos](https://www.logo.dev/docs/use-cases/stock-ticker-logos)
</Prompt>

## 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.

<CodeGroup>
  ```tsx Watchlist.tsx expandable theme={null}
  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>
    );
  }
  ```

  ```tsx Usage theme={null}
  import { Watchlist } from "./Watchlist";

  export function Markets() {
    return (
      <Watchlist
        token="LOGO_DEV_PUBLISHABLE_KEY"
        quotes={[
          { ticker: "AAPL", name: "Apple", price: 214.3, change: 1.2 },
          { ticker: "NVDA", name: "NVIDIA", price: 128.44, change: 3.8 },
          { ticker: "TSLA", name: "Tesla", price: 182.1, change: -2.1 },
        ]}
      />
    );
  }
  ```
</CodeGroup>

<Note>
  Your [publishable key](/docs/platform/api-keys) is built for client-side code, so
  you can ship it in the browser as-is.
</Note>

## 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](/docs/logo-images/ticker).
* **Query parameters handle the rendering.** `size` sets dimensions, `retina` keeps marks sharp, and `format=webp` keeps files light. See all [image parameters](/docs/logo-images/introduction#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](/docs/logo-images/isin) (`/isin/US0378331005`) or [crypto symbols](/docs/logo-images/crypto) (`/crypto/BTC`) and keep the same component.
* **Handle symbols outside coverage.** Fall back to the company's website with the [logo from a domain](/docs/use-cases/logo-from-domain) pattern.
* **Restyle the logos.** Add `&greyscale=true` for a muted list or `&theme=dark` for dark backgrounds. See all [image parameters](/docs/logo-images/introduction#parameters).

## Next steps

<CardGroup cols={2}>
  <Card title="Ticker lookup" icon="chart-line" href="/docs/logo-images/ticker">
    Read the full reference for logos by stock ticker.
  </Card>

  <Card title="Transaction logos" icon="credit-card" href="/docs/use-cases/transaction-logos">
    Build the same row pattern for banking and expense apps.
  </Card>
</CardGroup>