Build a customer logo wall with wordmarks

Use case prompt

Build a trusted-by wall of customer wordmarks, following https://www.logo.dev/docs/use-cases/customer-logo-wall.md

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

At build time or on a schedule, look up the brandmark for each customer domain on the server. Download a light and a dark variant of each one, host the files with the site, and save each etag so a later run downloads only changed images. If a lookup fails, keep the last good copy. If a customer has no brandmark, or a file fails to load, show the square logo instead. Give each mark its own optical height, and show a skeleton until it loads.

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

A trusted-by wall needs the wide wordmark of each customer, not the square icon. A row of square icons looks like an app grid, and visitors recognize the wide lockups. Logo.dev supplies each customer’s brandmark from a domain. Your app decides which customers to show, where to host the files, and how tall each mark renders so that the row reads evenly.

Download the brandmarks at build time

A marketing wall is static, so download each brandmark once and host it with your site. Don’t put the lookup url in your page. Keep the etag with your copy, and download again only when the etag changes. See images for how the url and etag work. This script runs on your server or in CI. It downloads a light and a dark variant of each brandmark and writes a manifest for the wall:

fetch-brandmarks.ts

import { mkdir, readFile, writeFile } from "node:fs/promises";

type Customer = { name: string; domain: string; height: number };
type WallEntry = Customer & {
  etag: string | null;
  light: string | null;
  dark: string | null;
};

// Optical heights are tuned by eye. All-caps marks need less height.
const CUSTOMERS: Customer[] = [
  { name: "Stripe", domain: "stripe.com", height: 26 },
  { name: "Twilio", domain: "twilio.com", height: 26 },
  { name: "DoorDash", domain: "doordash.com", height: 20 },
  { name: "Vercel", domain: "vercel.com", height: 22 },
  { name: "Discord", domain: "discord.com", height: 24 },
  { name: "Airbnb", domain: "airbnb.com", height: 25 },
  { name: "Spotify", domain: "spotify.com", height: 26 },
  { name: "Datadog", domain: "datadoghq.com", height: 19 },
];

const OUT_DIR = "public/logo-wall";
const MANIFEST = `${OUT_DIR}/manifest.json`;

const sleep = (seconds: number) =>
  new Promise((resolve) => setTimeout(resolve, seconds * 1000));

async function lookupBrandmark(domain: string) {
  const url = new URL("https://api.logo.dev/v2/brands/brandmark");
  url.searchParams.set("domain", domain);
  // Retry a 202 (still indexing) until its retry window ends:
  // https://www.logo.dev/docs/platform/errors#not-found-vs-still-indexing-202
  let deadline = 0;
  while (deadline === 0 || Date.now() < deadline) {
    const res = await fetch(url, {
      headers: { Authorization: `Bearer ${process.env.LOGO_DEV_SECRET_KEY}` },
      signal: AbortSignal.timeout(15_000),
    });
    if (res.status === 202) {
      const { metadata } = await res.json();
      deadline ||= Date.now() + metadata.pending.expires_in_seconds * 1000;
      await sleep(Number(res.headers.get("Retry-After")) || metadata.pending.retry_after_seconds);
      continue;
    }
    if (res.status === 404) {
      return null; // No brand, or the brand has no brandmark.
    }
    if (!res.ok) {
      throw new Error(`${domain}: HTTP ${res.status}`);
    }
    const { data }: { data: { url: string; etag: string } } = await res.json();
    return data;
  }
  throw new Error(`${domain}: still indexing`);
}

async function download(signedUrl: string, theme: "light" | "dark", file: string) {
  // Send no key with the signed URL: https://www.logo.dev/docs/brand/introduction#images
  const url = new URL(signedUrl);
  url.searchParams.set("size", "320");
  url.searchParams.set("format", "webp");
  url.searchParams.set("theme", theme);
  const res = await fetch(url);
  if (!res.ok) {
    throw new Error(`${file}: HTTP ${res.status}`);
  }
  await writeFile(`${OUT_DIR}/${file}`, Buffer.from(await res.arrayBuffer()));
  return `/logo-wall/${file}`;
}

async function main() {
  await mkdir(OUT_DIR, { recursive: true });
  const previous: WallEntry[] = JSON.parse(
    await readFile(MANIFEST, "utf8").catch(() => "[]")
  );

  const entries: WallEntry[] = [];
  for (const customer of CUSTOMERS) {
    const old = previous.find((e) => e.domain === customer.domain);
    try {
      const mark = await lookupBrandmark(customer.domain);
      if (!mark) {
        entries.push({ ...customer, etag: null, light: null, dark: null });
      } else if (old?.etag === mark.etag && old.light && old.dark) {
        entries.push({ ...old, ...customer });
      } else {
        const slug = customer.domain.replace(/\W/g, "-");
        entries.push({
          ...customer,
          etag: mark.etag,
          light: await download(mark.url, "light", `${slug}-light.webp`),
          dark: await download(mark.url, "dark", `${slug}-dark.webp`),
        });
      }
    } catch (err) {
      // Keep the last good copy, so one failed lookup never empties a slot.
      console.error(err);
      entries.push(old ?? { ...customer, etag: null, light: null, dark: null });
    }
  }
  await writeFile(MANIFEST, JSON.stringify(entries, null, 2));
}

main();

Run the script on deploy or on a schedule, not on each page view.

Handle every brandmark result

Result	Save	Show
New brandmark	The light and dark files and the `etag`	The brandmark for the current theme
Same `etag` as the last run	Nothing new	The files you already host
Still indexing, or the request failed	Nothing new	The last good copy, or the square logo
No brand, or no brandmark	A `null` brandmark	The square logo from the Logo.dev CDN

Some well-known brands have no brandmark, so the wall always needs the square logo as a fallback. Check each brandmark by eye before you ship. Some marks are white or very light, and they disappear on a light surface.

Render the wall

The wall reads the manifest and shows the light or dark file for your theme:

import { useState } from "react";

type WallEntry = {
  name: string;
  domain: string;
  /** Optical height in px, tuned by eye. */
  height: number;
  light: string | null;
  dark: string | null;
};

function WallLogo({
  entry,
  dark,
  token,
}: {
  entry: WallEntry;
  dark: boolean;
  token: string;
}) {
  const brandmark = dark ? entry.dark : entry.light;
  const [state, setState] = useState<"loading" | "loaded" | "failed">(
    brandmark ? "loading" : "failed"
  );

  // No brandmark, or the file failed to load: show the square logo.
  // Fallbacks: https://www.logo.dev/docs/logo-images/introduction#fallback-images
  if (state === "failed" || !brandmark) {
    return (
      <img
        alt={`${entry.name} logo`}
        className="h-6 w-6 rounded-md object-contain"
        height={24}
        src={`https://img.logo.dev/${entry.domain}?token=${token}&size=24&retina=true&format=webp&theme=${dark ? "dark" : "light"}`}
        width={24}
      />
    );
  }

  return (
    <>
      {state === "loading" && (
        <span
          aria-hidden="true"
          className="h-5 w-24 animate-pulse rounded bg-zinc-200 motion-reduce:animate-none dark:bg-zinc-800"
        />
      )}
      <img
        alt={`${entry.name} logo`}
        className={`w-auto max-w-full object-contain transition-opacity duration-300 motion-reduce:transition-none ${
          state === "loaded" ? "opacity-100" : "absolute opacity-0"
        }`}
        loading="lazy"
        onError={() => setState("failed")}
        onLoad={() => setState("loaded")}
        ref={(el) => {
          // A cached image can finish before onLoad is attached.
          if (el?.complete && el.naturalWidth > 0) {
            setState("loaded");
          }
        }}
        src={brandmark}
        style={{ height: entry.height }}
      />
    </>
  );
}

export function LogoWall({
  entries,
  dark = false,
  token,
}: {
  entries: WallEntry[];
  dark?: boolean;
  token: string;
}) {
  return (
    <ul className="grid grid-cols-2 items-center gap-x-10 gap-y-9 sm:grid-cols-4">
      {entries.map((entry) => (
        <li
          className="relative flex h-8 items-center justify-center"
          key={`${entry.domain}-${dark ? "dark" : "light"}`}
        >
          <WallLogo dark={dark} entry={entry} token={token} />
        </li>
      ))}
    </ul>
  );
}

import { LogoWall } from "./LogoWall";

// Read these entries from public/logo-wall/manifest.json.
const entries = [
  { name: "Stripe", domain: "stripe.com", height: 26, light: "/logo-wall/stripe-com-light.webp", dark: "/logo-wall/stripe-com-dark.webp" },
  { name: "DoorDash", domain: "doordash.com", height: 20, light: "/logo-wall/doordash-com-light.webp", dark: "/logo-wall/doordash-com-dark.webp" },
];

export function TrustedBy() {
  return <LogoWall entries={entries} token="LOGO_DEV_PUBLISHABLE_KEY" />;
}

Test the wall

Load the wall in light and dark mode, and check that every mark is legible in both. Add made-up-startup.io, which has no brand. Rename one hosted file to force a load error. Both slots must show the square logo. Run the script twice, and check that the second run downloads nothing new.

Brand

Look up a brandmark, and read how image downloads and etags work.

Animated logo wall

Swap square logos over time in a compact grid.

Start simple

Fintech

CRM and sales

Marketing and onboarding

Marketplaces

Branded content

Build a customer logo wall with wordmarks

Download the brandmarks at build time

Handle every brandmark result

Render the wall

Test the wall

Brand

Animated logo wall

​Download the brandmarks at build time

​Handle every brandmark result

​Render the wall

​Test the wall

Brand

Animated logo wall

Download the brandmarks at build time

Handle every brandmark result

Render the wall

Test the wall