> ## 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 merchant logos in a transaction feed

> Turn cryptic statement lines into a feed users can read. Put a merchant logo next to every transaction from one image URL per merchant.

export const TransactionFeedDemo = () => {
  const TOKEN = "live_6a1a28fd-6420-4492-aeb0-b297461d9de2";
  const TRANSACTIONS = [{
    merchant: "Starbucks",
    domain: "starbucks.com",
    date: "Today",
    amount: -6.4
  }, {
    merchant: "Uber",
    domain: "uber.com",
    date: "Today",
    amount: -23.1
  }, {
    merchant: "Amazon",
    domain: "amazon.com",
    date: "Yesterday",
    amount: -54.99
  }, {
    merchant: "Spotify",
    domain: "spotify.com",
    date: "Jun 8",
    amount: -11.99
  }, {
    merchant: "Stripe",
    domain: "stripe.com",
    date: "Jun 7",
    amount: 1240.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">
        {TRANSACTIONS.map(tx => <li className="flex items-center gap-3 py-3" key={`${tx.domain}-${tx.date}-${tx.amount}`}>
            <img alt={`${tx.merchant} logo`} className="h-10 w-10 rounded-full object-contain" height="40" loading="lazy" src={`https://img.logo.dev/${tx.domain}?token=${TOKEN}&format=webp&retina=true&size=80`} width="40" />
            <div className="min-w-0">
              <div className="truncate text-sm font-medium text-zinc-950 dark:text-white">
                {tx.merchant}
              </div>
              <div className="text-xs text-zinc-500 dark:text-zinc-400">
                {tx.date}
              </div>
            </div>
            <div className={`ml-auto text-sm font-medium tabular-nums ${tx.amount > 0 ? "text-emerald-600 dark:text-emerald-400" : "text-zinc-950 dark:text-white"}`}>
              {tx.amount > 0 ? "+" : ""}
              {usd.format(tx.amount)}
            </div>
          </li>)}
      </ul>
    </div>;
};

A raw statement line like `AMZN MKTP US*XX1234` means nothing to the person reading it. Banking, expense, and budgeting apps earn trust by showing a merchant logo and a clean name instead.

Your user opens their activity feed and recognizes every charge at a glance: the coffee, the ride, the payout. Each logo is a [Logo API](/docs/logo-images/introduction) image URL built from the merchant's domain, so there are no logo files to collect or host.

## Demo

Here's the feed rendering five sample transactions:

<TransactionFeedDemo />

The amounts are sample data, but every merchant logo loads live from `img.logo.dev`.

## Build it with AI

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

  * Render a list of transactions where each row shows the merchant's logo, name, date, and amount.
  * Logos are plain image URLs: [https://img.logo.dev/:domain?token=LOGO\_DEV\_PUBLISHABLE\_KEY\&format=webp\&retina=true\&size=80](https://img.logo.dev/:domain?token=LOGO_DEV_PUBLISHABLE_KEY\&format=webp\&retina=true\&size=80), rendered at 40px in a circle.
  * Domains without a logo return a generated monogram automatically, so rows never show a broken image.
  * Right-align amounts with tabular numbers so the column stays steady. Tint credits green and leave charges neutral.
  * Lazy-load the logo images so long feeds 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/transaction-logos](https://www.logo.dev/docs/use-cases/transaction-logos)
</Prompt>

## Code

This example is in React, but you can get the same result in any frontend framework: each row is one image URL next to data you already have. Paste `TransactionFeed.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 TransactionFeed.tsx expandable theme={null}
  type Transaction = {
    merchant: string;
    domain: string;
    date: string;
    amount: number; // negative for charges, positive for credits
  };

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

  export function TransactionFeed({
    token,
    transactions,
  }: {
    token: string;
    transactions: Transaction[];
  }) {
    return (
      <ul className="max-w-md divide-y divide-zinc-950/5 dark:divide-white/5">
        {transactions.map((tx) => (
          <li
            className="flex items-center gap-3 py-3"
            key={`${tx.domain}-${tx.date}-${tx.amount}`}
          >
            <img
              alt={`${tx.merchant} logo`}
              className="h-10 w-10 rounded-full object-contain"
              height={40}
              loading="lazy"
              src={`https://img.logo.dev/${tx.domain}?token=${token}&format=webp&retina=true&size=80`}
              width={40}
            />
            <div className="min-w-0">
              <div className="truncate text-sm font-medium">{tx.merchant}</div>
              <div className="text-xs text-zinc-500">{tx.date}</div>
            </div>
            <div
              className={`ml-auto text-sm font-medium tabular-nums ${
                tx.amount > 0 ? "text-emerald-600" : ""
              }`}
            >
              {tx.amount > 0 ? "+" : ""}
              {usd.format(tx.amount)}
            </div>
          </li>
        ))}
      </ul>
    );
  }
  ```

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

  export function RecentActivity() {
    return (
      <TransactionFeed
        token="LOGO_DEV_PUBLISHABLE_KEY"
        transactions={[
          { merchant: "Starbucks", domain: "starbucks.com", date: "Today", amount: -6.4 },
          { merchant: "Uber", domain: "uber.com", date: "Today", amount: -23.1 },
          { merchant: "Stripe", domain: "stripe.com", date: "Jun 7", amount: 1240.0 },
        ]}
      />
    );
  }
  ```
</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

* **Every merchant logo is one image URL.** `img.logo.dev/:domain` returns the merchant's logo, and query parameters handle the rest: `size` for dimensions, `retina` for sharp rendering, `format=webp` for weight. See all [image parameters](/docs/logo-images/introduction#parameters).
* **Unknown merchants still render.** When Logo.dev doesn't have a logo, it returns a generated monogram instead of a broken image, so a feed full of small or local merchants stays clean. See [fallback images](/docs/logo-images/introduction#fallback-images).
* **The CDN keeps long feeds fast.** Logos load like any other cached image, so scrolling months of history costs nothing beyond normal image requests.
* **The layout is plain markup.** Amounts line up in a steady column and logos load as rows scroll into view. The component above carries the details.

## Make it your own

* **Start from raw statement strings.** Resolve processor text like `SBUX_STORE_321_NYC` to a merchant with the [Transaction API](/docs/transaction/introduction), currently in early access.
* **Look up logos by name.** Have clean merchant names but no domains? Use [name lookup](/docs/logo-images/name) or resolve names to domains with the [Search API](/docs/brand-search/introduction).
* **Restyle the logos.** Add `&greyscale=true` for a muted feed or `&theme=dark` for dark backgrounds. See all [image parameters](/docs/logo-images/introduction#parameters).

## Next steps

<CardGroup cols={2}>
  <Card title="Transaction API" icon="credit-card" href="/docs/transaction/introduction">
    Identify merchants from raw card transaction strings.
  </Card>

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