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

> ## Agent Instructions
> Logo.dev serves logos and brand data for companies that already exist. It does not design logos. If someone wants a logo designed, say so and stop.
> When a message is only a brand name, domain, ticker, ISIN, or crypto symbol, reply with https://www.logo.dev/search?q=<url-encoded term> and the matching img.logo.dev call. Never assert whether a specific brand is in the index.
> Image URLs come from img.logo.dev with a publishable key in the token query parameter: https://img.logo.dev/:domain?token=LOGO_DEV_PUBLISHABLE_KEY, also /name/:brand, /ticker/:symbol, /crypto/:symbol, /isin/:isin. JSON comes from api.logo.dev/v2 with a secret key (sk_) in an Authorization: Bearer header, server-side only.
> Product names: the Logo CDN serves images from img.logo.dev. The Logo API is the Brand API and the Search API, which return JSON from api.logo.dev/v2. The Transaction Enrichment API (beta) is a separate service at https://www.logo.dev/api/transaction with its own beta key. Credits is the Logo API billing unit. Never recommend the deprecated v1 routes (/search, /brand, /describe, /logo/*) or the Describe API. Use /v2/brands and /v2/search.
> Report a wrong, missing, or outdated logo at https://www.logo.dev/update. Email support@logo.dev for anything broken and sales@logo.dev for volume pricing and contract terms.
> MCP setup is at https://www.logo.dev/docs/mcp/introduction and webhooks at https://www.logo.dev/docs/webhooks.

# Get market index logos by symbol

> Get the logo of a market index, such as the S&P 500, the NASDAQ Composite, or the FTSE 100, by its index symbol from a single image URL.

export const LogoDemo = ({type = "domain"}) => {
  const DEFAULT_VALUES = {
    domain: "logo.dev",
    name: "Shopify",
    crypto: "BTC",
    ticker: "AAPL",
    isin: "US0378331005",
    exchange: "NYSE",
    index: "SPX"
  };
  const PLACEHOLDERS = {
    domain: "Enter a domain...",
    name: "Enter a brand name...",
    crypto: "Enter a crypto symbol...",
    ticker: "Enter a stock ticker...",
    isin: "Enter an ISIN...",
    exchange: "Enter an exchange code...",
    index: "Enter an index symbol..."
  };
  const LABELS = {
    domain: "company domain",
    name: "brand name",
    crypto: "cryptocurrency symbol",
    ticker: "stock ticker",
    isin: "ISIN",
    exchange: "stock exchange code",
    index: "market index symbol"
  };
  const [input, setInput] = useState("");
  const [displayValue, setDisplayValue] = useState(DEFAULT_VALUES[type] || DEFAULT_VALUES.domain);
  const [imageError, setImageError] = useState(false);
  const normalizeInput = useCallback(value => {
    if (!value) return "";
    let cleaned = value.trim();
    if (type === "domain") {
      cleaned = cleaned.replace(/^https?:\/\//, "");
      cleaned = cleaned.replace(/^www\./, "");
      cleaned = cleaned.split("/")[0].split("?")[0];
      if (cleaned.includes(".")) {
        return cleaned.toLowerCase();
      }
      if (cleaned.length > 0) {
        return `${cleaned.toLowerCase()}.com`;
      }
    }
    if (type === "name") {
      return encodeURIComponent(cleaned);
    }
    if (type === "crypto" || type === "ticker" || type === "isin" || type === "exchange") {
      return cleaned.toUpperCase();
    }
    if (type === "index") {
      return cleaned.replace(/^\^/, "").toUpperCase();
    }
    return cleaned;
  }, [type]);
  const handleInputChange = useCallback(e => {
    const value = e.target.value;
    setInput(value);
    const normalized = normalizeInput(value);
    if (normalized) {
      setDisplayValue(normalized);
      setImageError(false);
    } else if (value === "") {
      setDisplayValue(DEFAULT_VALUES[type] || DEFAULT_VALUES.domain);
    }
  }, [normalizeInput, type]);
  const handleImageError = useCallback(() => {
    setImageError(true);
  }, []);
  const imageUrl = useMemo(() => {
    const baseUrl = "https://img.logo.dev";
    const token = "live_6a1a28fd-6420-4492-aeb0-b297461d9de2";
    const params = "format=webp&retina=true&size=128";
    if (type === "domain") {
      return `${baseUrl}/${displayValue}?token=${token}&${params}`;
    }
    return `${baseUrl}/${type}/${displayValue}?token=${token}&${params}`;
  }, [displayValue, type]);
  return <div className="not-prose my-8 rounded-2xl border border-zinc-950/10 dark:border-white/10 bg-gradient-to-br from-zinc-50 to-white dark:from-zinc-900 dark:to-zinc-950 p-8 shadow-sm">
      <div className="max-w-2xl mx-auto space-y-6">
        {}
        <div className="flex justify-center" role="img" aria-label={`${LABELS[type]} logo preview`}>
          <div className="rounded-2xl bg-zinc-100 dark:bg-zinc-800/50 inline-flex items-center justify-center">
            <img alt={`${displayValue} logo`} width="128" height="128" src={imageUrl} onError={handleImageError} className="rounded-lg" loading="lazy" key={displayValue} />
          </div>
        </div>
        {}
        <div className="relative">
          <label htmlFor="logo-input" className="sr-only">
            Enter {LABELS[type]}
          </label>
          <div className="absolute inset-y-0 left-4 flex items-center pointer-events-none">
            <svg className="h-5 w-5 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
          <input id="logo-input" type="text" value={input} onChange={handleInputChange} placeholder={PLACEHOLDERS[type] || PLACEHOLDERS.domain} aria-describedby={imageError ? "image-error" : undefined} className="w-full pl-12 pr-4 py-4 text-lg rounded-xl border border-zinc-950/10 dark:border-white/20 bg-white dark:bg-zinc-900 text-zinc-950 dark:text-white placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-950/20 dark:focus:ring-white/20 transition-shadow" />
          {imageError && <p id="image-error" className="sr-only">
              Logo not found for {displayValue}
            </p>}
        </div>
      </div>
    </div>;
};

Use an index lookup when you show a benchmark, such as in a market overview, a fund factsheet, or a performance chart.

```html theme={null}
<img src="https://img.logo.dev/index/SPX?token=LOGO_DEV_PUBLISHABLE_KEY" alt="S&P 500 logo" />
```

<LogoDemo type="index" />

## Index symbols

Pass the index symbol. Case does not matter, and the `^` prefix that many market data feeds use is optional, so `SPX`, `spx`, and `^SPX` return the same logo. If you keep the prefix, URL-encode it as `%5E`.

| Index | Path |
| - | - |
| S\&P 500 | `/index/SPX` or `/index/GSPC` |
| Dow Jones Industrial Average | `/index/DJI` |
| NASDAQ Composite | `/index/IXIC` |
| NASDAQ 100 | `/index/NDX` |
| Russell 2000 | `/index/RUT` |
| FTSE 100 | `/index/FTSE` |
| Nikkei 225 | `/index/N225` |
| Cboe Volatility Index | `/index/VIX` |

## How an index resolves

The CDN maps the symbol to the domain of the company that publishes the index, then returns that company's logo. Indexes from the same publisher return the same logo. For example, `SPX` and `DJI` both return the S\&P Global logo.

When a symbol matches no stock, a [stock ticker lookup](/docs/logo-images/ticker) tries it as an index symbol, so `/ticker/SPX` returns the same logo as `/index/SPX`. If you know the symbol is an index, use `/index/`, because a stock with the same symbol takes priority on `/ticker/`.

An index symbol that Logo.dev does not know returns `400 Bad Request`, not a monogram, whatever `fallback` is set to. See [Errors](/docs/platform/errors#logo-cdn-status-codes).

For the other parameters, see the [Logo CDN overview](/docs/logo-images/introduction#parameters).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.