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

# Stock ticker logos

> Show company logos in stock watchlists and portfolio cards using the Logo API's ticker route

export const TickerPortfolioCardDemo = () => <div className="w-full max-w-[280px] rounded-xl border border-[#63636333] bg-white dark:bg-[#1c1d1f] p-5">
    <div className="flex items-center gap-3">
      <img noZoom src="https://cdn.brandfetch.io/ticker/NVDA/w/88/h/88/fallback/lettermark?c=1bfwsmEH20zzEfSNTed" alt="NVIDIA logo" className="w-11 h-11 rounded-lg" />
      <div>
        <div className="font-bold">NVDA</div>
        <div className="text-[13px] text-[#6b7280]">NVIDIA Corp.</div>
      </div>
    </div>
    <div className="mt-4 text-2xl font-bold">$4,142.10</div>
    <div className="mt-1 text-sm font-medium text-[#16a34a]">▲ $103.50 (3.45%) today</div>
    <div className="mt-3 pt-3 border-t border-[#63636326] flex justify-between text-[13px] text-[#6b7280]">
      <span>30 shares</span>
      <span>Avg $130.24</span>
    </div>
  </div>;

export const TickerWatchlistDemo = () => {
  const holdings = [{
    symbol: "AAPL",
    name: "Apple Inc.",
    price: "227.52",
    change: "+1.24%",
    up: true
  }, {
    symbol: "NVDA",
    name: "NVIDIA Corp.",
    price: "138.07",
    change: "+3.45%",
    up: true
  }, {
    symbol: "TSLA",
    name: "Tesla, Inc.",
    price: "251.44",
    change: "-2.10%",
    up: false
  }, {
    symbol: "AMZN",
    name: "Amazon.com, Inc.",
    price: "201.16",
    change: "+0.62%",
    up: true
  }];
  return <div className="w-full max-w-[380px] flex flex-col gap-0.5">
      {holdings.map(h => <div key={h.symbol} className="flex items-center gap-3 py-2.5 px-3 rounded-[10px] cursor-pointer transition-colors duration-150 hover:bg-[#6363631f]">
          <img noZoom src={`https://cdn.brandfetch.io/ticker/${h.symbol}/w/80/h/80/fallback/lettermark?c=1bfwsmEH20zzEfSNTed`} alt={`${h.name} logo`} className="w-10 h-10 rounded-lg shrink-0" />
          <div className="flex-1 min-w-0">
            <div className="font-semibold text-[15px]">{h.symbol}</div>
            <div className="text-[#6b7280] text-[13px] truncate">{h.name}</div>
          </div>
          <div className="text-right shrink-0">
            <div className="font-semibold text-[15px]">${h.price}</div>
            <div className={`text-[13px] font-medium ${h.up ? "text-[#16a34a]" : "text-[#dc2626]"}`}>
              {h.change}
            </div>
          </div>
        </div>)}
    </div>;
};

export const Preview = ({children}) => <div className="relative rounded-xl border border-[#63636333] bg-[#6363630d] pt-12 px-8 pb-8 mt-4 mb-4 overflow-hidden">
    <style>{`
      .bf-preview-body img { margin: 0 !important; max-width: none; }
      .bf-preview-body ul, .bf-preview-body ol { margin: 0; padding: 0; }
      .bf-preview-body li { margin: 0 !important; padding-left: 0 !important; }
      .bf-preview-body li::before, .bf-preview-body li::marker { content: none !important; display: none !important; }
      .bf-preview-body p { margin: 0; }
    `}</style>
    <span className="absolute top-3.5 left-[18px] text-[11px] font-semibold tracking-[0.06em] uppercase text-[#636363b3]">
      Preview
    </span>
    <div className="bf-preview-body flex justify-center">{children}</div>
  </div>;

Investing apps feel instantly familiar when every holding shows the company's real logo. The [Logo API](/logo-api/overview) resolves a logo directly from a **stock or ETF ticker**, no separate ticker-to-domain mapping to build or maintain.

## Ticker watchlist

A ticker watchlist with logo, symbol, name, and a color-coded daily change, the core of any brokerage or portfolio screen.

<Tabs>
  <Tab title="Preview">
    <Preview>
      <TickerWatchlistDemo />
    </Preview>
  </Tab>

  <Tab title="Code">
    ```tsx TickerWatchlist.tsx theme={null}
    const CLIENT_ID = "YOUR_CLIENT_ID"; // free client ID from developers.brandfetch.com/register

    const HOLDINGS = [
      { symbol: "AAPL", name: "Apple Inc.", price: "227.52", change: "+1.24%", up: true },
      { symbol: "NVDA", name: "NVIDIA Corp.", price: "138.07", change: "+3.45%", up: true },
      { symbol: "TSLA", name: "Tesla, Inc.", price: "251.44", change: "-2.10%", up: false },
      { symbol: "AMZN", name: "Amazon.com, Inc.", price: "201.16", change: "+0.62%", up: true },
    ];

    export function TickerWatchlist() {
      return (
        <div className="flex w-full max-w-[380px] flex-col gap-0.5">
          {HOLDINGS.map((h) => (
            <div
              key={h.symbol}
              className="flex cursor-pointer items-center gap-3 rounded-[10px] px-3 py-2.5 transition-colors duration-150 hover:bg-[#6363631f]"
            >
              <img
                src={`https://cdn.brandfetch.io/ticker/${h.symbol}/w/80/h/80/fallback/lettermark?c=${CLIENT_ID}`}
                alt={`${h.name} logo`}
                className="h-10 w-10 shrink-0 rounded-lg"
              />
              <div className="min-w-0 flex-1">
                <div className="text-[15px] font-semibold">{h.symbol}</div>
                <div className="truncate text-[13px] text-[#6b7280]">{h.name}</div>
              </div>
              <div className="shrink-0 text-right">
                <div className="text-[15px] font-semibold">${h.price}</div>
                <div className={`text-[13px] font-medium ${h.up ? "text-[#16a34a]" : "text-[#dc2626]"}`}>
                  {h.change}
                </div>
              </div>
            </div>
          ))}
        </div>
      );
    }
    ```
  </Tab>
</Tabs>

<Prompt description="Want a logo-branded stock watchlist in your app? This prompt gives your AI coding tool everything it needs to build it in your framework." actions={["copy", "cursor"]}>
  Build a stock watchlist: a vertical list of rows, each showing the company's logo, its ticker symbol, company name, current price, and a color-coded daily change (green when up, red when down).

  Fetch each logo from Brandfetch's Logo API using the ticker route (get a free client ID at `https://developers.brandfetch.com/register`): `https://cdn.brandfetch.io/ticker/{SYMBOL}/w/40/h/40/fallback/lettermark?c=YOUR_CLIENT_ID`

  The ticker route maps a stock or ETF symbol (e.g. `AAPL`, `TSLA`, `QQQ`) straight to the company's logo, so no domain lookup is needed. Use `fallback/lettermark` so a row never shows a broken image. Add a subtle background highlight on row hover.

  Use the Logo API the intended way: hotlink the CDN URL directly in the image `src`, don't download, cache, or re-host the file. Requests are free with a client ID and always return the brand's current logo.
</Prompt>

## Portfolio holding card

A single holding rendered as a card, with the logo, position value, and daily change, for a portfolio or position-detail view.

<Tabs>
  <Tab title="Preview">
    <Preview>
      <TickerPortfolioCardDemo />
    </Preview>
  </Tab>

  <Tab title="Code">
    ```tsx TickerPortfolioCard.tsx theme={null}
    const CLIENT_ID = "YOUR_CLIENT_ID"; // free client ID from developers.brandfetch.com/register

    export function TickerPortfolioCard() {
      return (
        <div className="w-full max-w-[280px] rounded-xl border border-[#63636333] bg-white p-5 dark:bg-[#1c1d1f]">
          <div className="flex items-center gap-3">
            <img
              src={`https://cdn.brandfetch.io/ticker/NVDA/w/88/h/88/fallback/lettermark?c=${CLIENT_ID}`}
              alt="NVIDIA logo"
              className="h-11 w-11 rounded-lg"
            />
            <div>
              <div className="font-bold">NVDA</div>
              <div className="text-[13px] text-[#6b7280]">NVIDIA Corp.</div>
            </div>
          </div>
          <div className="mt-4 text-2xl font-bold">$4,142.10</div>
          <div className="mt-1 text-sm font-medium text-[#16a34a]">▲ $103.50 (3.45%) today</div>
          <div className="mt-3 flex justify-between border-t border-[#63636326] pt-3 text-[13px] text-[#6b7280]">
            <span>30 shares</span>
            <span>Avg $130.24</span>
          </div>
        </div>
      );
    }
    ```
  </Tab>
</Tabs>

<Prompt description="Want a portfolio holding card with the company's logo? This prompt gives your AI coding tool everything it needs to build it in your framework." actions={["copy", "cursor"]}>
  Build a portfolio holding card for a single position. Show the company's logo and ticker at the top, the current position value in large bold text, a color-coded daily change (green up / red down) with a directional arrow, and a footer row with shares held and average cost.

  Fetch the logo from Brandfetch's Logo API ticker route (get a free client ID at `https://developers.brandfetch.com/register`): `https://cdn.brandfetch.io/ticker/{SYMBOL}/w/44/h/44/fallback/lettermark?c=YOUR_CLIENT_ID`

  Use the Logo API the intended way: hotlink the CDN URL directly in the image `src`, don't download, cache, or re-host the file. Requests are free with a client ID and always return the brand's current logo.
</Prompt>

## Implementation

<Steps>
  <Step title="Get a free client ID">
    Register on the [Developer Portal](https://developers.brandfetch.com/register), the Logo API is free and requires no attribution.
  </Step>

  <Step title="Use the ticker route">
    Swap the usual `domain` segment for `ticker`, the CDN resolves the symbol to the company for you. The same route also accepts `isin/{ISIN}` and `crypto/{SYMBOL}`.

    ```text theme={null}
    https://cdn.brandfetch.io/ticker/{SYMBOL}/w/40/h/40/fallback/lettermark?c=YOUR_CLIENT_ID
    ```
  </Step>

  <Step title="Guarantee a fallback">
    Keep `fallback/lettermark` so delisted or unrecognized symbols still render a clean monogram instead of a broken image.
  </Step>
</Steps>

## Pricing

The Logo API is free, including the ticker, ISIN, and crypto routes. Create a client ID on the [Developer Portal](https://developers.brandfetch.com/register), no attribution required.

## Measuring impact

Logos on holdings are a recognition and trust signal, so watch for engagement lifts on list and detail screens: taps into holdings, watchlist adds, and time spent on portfolio views.

[GBM uses this pattern](https://brandfetch.com/developers/customers/gbm) across portfolios, watchlists, and trading screens.

## Going further

<CardGroup cols={3}>
  <Card title="Logo API parameters" icon="sliders" href="/logo-api/parameters">
    All identifier routes and sizing, type, and theme options.
  </Card>

  <Card title="Brand API by ticker" icon="code" href="/reference/brand-api-ticker">
    Company name, exchange, and sector alongside the logo.
  </Card>

  <Card title="Get started" icon="rocket" href="https://developers.brandfetch.com/register">
    Create a free account and start building.
  </Card>
</CardGroup>