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

# Show token logos in a crypto wallet

> Make balances, trades, and portfolios easy to scan. Put the right token logo next to every symbol from one image URL per token.

export const CryptoWalletDemo = () => {
  const TOKEN = "live_6a1a28fd-6420-4492-aeb0-b297461d9de2";
  const HOLDINGS = [{
    symbol: "BTC",
    name: "Bitcoin",
    amount: 0.4821,
    value: 31240.55
  }, {
    symbol: "ETH",
    name: "Ethereum",
    amount: 5.12,
    value: 17652.3
  }, {
    symbol: "SOL",
    name: "Solana",
    amount: 48.3,
    value: 7198.12
  }, {
    symbol: "USDC",
    name: "USD Coin",
    amount: 2500,
    value: 2500
  }, {
    symbol: "DOGE",
    name: "Dogecoin",
    amount: 3100,
    value: 496.0
  }];
  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">
        {HOLDINGS.map(h => <li className="flex items-center gap-3 py-3" key={h.symbol}>
            <img alt={`${h.name} logo`} className="h-10 w-10 rounded-full object-contain" height="40" loading="lazy" src={`https://img.logo.dev/crypto/${h.symbol}?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">
                {h.name}
              </div>
              <div className="truncate text-xs tabular-nums text-zinc-500 dark:text-zinc-400">
                {h.amount.toLocaleString("en-US")} {h.symbol}
              </div>
            </div>
            <div className="ml-auto text-sm font-medium tabular-nums text-zinc-950 dark:text-white">
              {usd.format(h.value)}
            </div>
          </li>)}
      </ul>
    </div>;
};

<CryptoWalletDemo />

```text Use case prompt wrap theme={null}
Build a token list with crypto logos, following https://www.logo.dev/docs/use-cases/crypto-wallet-logos.md

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

Each row shows the token logo, the token name, the balance, and the value. Build each logo URL from the token symbol. A token with no logo keeps the generated monogram, so every row has the same shape. If the app needs a token's name, description, or colors, look the token up on the server with the Brand API, and allow for a token with no domain.

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

Wallets, exchanges, and portfolio trackers show dozens of tokens on one screen. A logo next to each symbol lets people find a holding before they read its ticker. Your app decides which symbol each asset uses and what a row without a logo looks like.

## Choose the lookup from the data you have

* **You have the token symbol.** Build a [crypto logo](/docs/logo-images/crypto) URL from the symbol.
* **You need the token's name, description, or colors.** Look the token up by symbol with the [Brand API](/docs/brand/introduction) on your server. Some tokens have no website, so allow for a `null` domain.

## Render the list

Each row is one image next to the balances you already have. A token with no logo shows the [generated monogram](/docs/logo-images/introduction#fallback-images), so every row keeps the same shape:

<CodeGroup>
  ```tsx TokenList.tsx expandable theme={null}
  type Holding = {
    symbol: string;
    name: string;
    amount: number;
    value: number;
  };

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

  export function TokenList({
    token,
    holdings,
  }: {
    token: string;
    holdings: Holding[];
  }) {
    return (
      <ul className="max-w-md divide-y divide-zinc-950/5 dark:divide-white/5">
        {holdings.map((h) => (
          <li className="flex items-center gap-3 py-3" key={h.symbol}>
            <img
              alt={`${h.name} logo`}
              className="h-10 w-10 rounded-full object-contain"
              height={40}
              loading="lazy"
              src={`https://img.logo.dev/crypto/${encodeURIComponent(h.symbol)}?token=${token}&format=webp&retina=true&size=40`}
              width={40}
            />
            <div className="min-w-0">
              <div className="text-sm font-semibold">{h.name}</div>
              <div className="text-xs tabular-nums text-zinc-500">
                {h.amount.toLocaleString("en-US")} {h.symbol}
              </div>
            </div>
            <div className="ml-auto text-sm font-medium tabular-nums">
              {usd.format(h.value)}
            </div>
          </li>
        ))}
      </ul>
    );
  }
  ```

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

  export function Wallet() {
    return (
      <TokenList
        holdings={[
          { symbol: "BTC", name: "Bitcoin", amount: 0.4821, value: 31240.55 },
          { symbol: "ETH", name: "Ethereum", amount: 5.12, value: 17652.3 },
          { symbol: "USDC", name: "USD Coin", amount: 2500, value: 2500 },
        ]}
        token="LOGO_DEV_PUBLISHABLE_KEY"
      />
    );
  }
  ```
</CodeGroup>

## Test the list

Test with a major token such as `BTC`, a stablecoin such as `USDC`, a lowercase symbol such as `eth`, and a symbol that has no logo. Check that every row keeps its size while images load.

<CardGroup cols={2}>
  <Card title="Crypto logos" icon="bitcoin-sign" href="/docs/logo-images/crypto">
    Look up token logos by symbol.
  </Card>

  <Card title="Stock watchlists" icon="chart-line" href="/docs/use-cases/stock-ticker-logos">
    Build the same row pattern for stocks.
  </Card>
</CardGroup>


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