Get a company logo from a name

Use case prompt

Build a company list that shows a logo next to each company name, following https://www.logo.dev/docs/use-cases/logo-from-name.md

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

The data has company names but no domains. If the app only shows the logo, build a Logo.dev CDN name URL from the encoded name. If the app must store which company a name means, resolve the name once on the server with the Logo.dev Search endpoint, save the domain, and render the logo from the domain. Show an initials avatar when no company matches. Store user corrections separately, and apply them before any lookup result.

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

Customer lists, CRM exports, and form input give you names like “The Home Depot”, not domains. A logo next to each name makes the list easy to scan, and you do not maintain a name-to-domain table. Your app decides how far to trust a match, what an unmatched name shows, and whether to store the domain.

Choose how to resolve the name

You only show the logo. Build a name lookup URL from the encoded name. Your app stores nothing.
You must know which company a name means. Send the name to Search from your server, once per name. Save the domain of the best candidate, and render the logo with a domain lookup.
A person enters the name. Let them pick from suggestions with the company autocomplete.

This server route resolves one name to its best candidate:

api/resolve-company.ts

type Candidate = { name: string; domain: string };

// GET /api/resolve-company?name=The%20Home%20Depot
export async function GET(request: Request) {
  const name = new URL(request.url).searchParams.get("name")?.trim();
  if (!name) {
    return Response.json({ error: "name is required" }, { status: 400 });
  }

  const url = new URL("https://api.logo.dev/v2/search");
  url.searchParams.set("q", name);
  url.searchParams.set("method", "match");
  url.searchParams.set("limit", "1");

  // Secret key, server only: https://www.logo.dev/docs/platform/api-keys
  const res = await fetch(url, {
    headers: { Authorization: `Bearer ${process.env.LOGO_DEV_SECRET_KEY}` },
  });
  if (!res.ok) {
    // Keep the name on screen and retry later. Pass the status through.
    return Response.json({ status: "error" }, { status: res.status });
  }

  const body: { data: Candidate[] } = await res.json();
  const [match] = body.data;
  if (!match) {
    // An empty array means no brand matches the name.
    return Response.json({ status: "unmatched", name });
  }
  return Response.json({ status: "matched", name: match.name, domain: match.domain });
}

Handle every name state

With Search, save the result with the record, and render from it:

Result	Save	Show
`matched`	Name, domain, lookup time	The logo from the domain
`unmatched`	The name, marked unmatched	An initials avatar. Don’t guess a logo.
Request failed	The attempt time	The name with a placeholder. Retry later with backoff.
User correction	Domain, in a separate table	The correction, before any lookup result

A wrong match still returns a real logo, so a status check cannot catch it. Let users correct the company.

Render the list

This component shows an initials avatar when no company matches the name. Without fallback=404, the URL returns a generated monogram instead:

import { useState } from "react";

export function logoUrlFromName(name: string, token: string, size = 40) {
  // Encode spaces, ampersands, and punctuation so the name survives the path.
  return `https://img.logo.dev/name/${encodeURIComponent(name)}?token=${token}&size=${size}&retina=true&format=webp&fallback=404`;
}

export function NameLogo({
  name,
  token,
  size = 40,
}: {
  name: string;
  token: string;
  size?: number;
}) {
  // Track which name failed, so a new name retries the lookup.
  const [failedName, setFailedName] = useState<string | null>(null);

  if (failedName === name) {
    return (
      <span
        aria-label={`${name} initials avatar`}
        className="inline-flex items-center justify-center rounded-md bg-zinc-200 font-semibold text-zinc-600 dark:bg-zinc-700 dark:text-zinc-200"
        role="img"
        style={{ width: size, height: size, fontSize: size * 0.45 }}
      >
        {name.charAt(0).toUpperCase()}
      </span>
    );
  }

  return (
    <img
      alt={`${name} logo`}
      className="rounded-md object-contain"
      height={size}
      loading="lazy"
      onError={() => setFailedName(name)}
      src={logoUrlFromName(name, token, size)}
      width={size}
    />
  );
}

import { NameLogo } from "./NameLogo";

const CUSTOMERS = ["The Home Depot", "American Express", "Trader Joes"];

export function CustomerList() {
  return (
    <ul>
      {CUSTOMERS.map((name) => (
        <li className="flex items-center gap-3" key={name}>
          <NameLogo name={name} token="LOGO_DEV_PUBLISHABLE_KEY" />
          {name}
        </li>
      ))}
    </ul>
  );
}

If you saved a domain with Search, render the logo from the domain, not from the name.

Test the list

Test with a multi-word name such as “The Home Depot”, a name with & such as “AT&T”, and a spelling that misses, such as “Sweet Green”. Check that the miss shows the initials avatar. Make a search fail, and check that the name stays on screen. Then check that a corrected row keeps its correction.

Logo.dev CDN by name

Encoding rules, parameters, and matching for name URLs.

Company autocomplete

Let people pick the right company while they type.

Start simple

Fintech

CRM and sales

Marketing and onboarding

Marketplaces

Branded content

Get a company logo from a name

Choose how to resolve the name

Handle every name state

Render the list

Test the list

Logo.dev CDN by name

Company autocomplete

​Choose how to resolve the name

​Handle every name state

​Render the list

​Test the list

Logo.dev CDN by name

Company autocomplete

Choose how to resolve the name

Handle every name state

Render the list

Test the list