Skip to main content
Reps recognize a company’s logo faster than its name. Putting logos in the account list and on every record page turns a CRM from a wall of text into something a sales team can scan. In the list, each account gets a small icon next to its name. Open a record and the full logo sits in the header. Both come from the same Logo API URL, built from the domain already stored on the account.

Demo

Click an account to open its record: Every logo loads live from img.logo.dev: the list rows at size=20, the record header at size=56. The open record also shows a description and brand color, the kind of data the Describe API returns.

Build it with AI

Want logo-branded account lists and records in your app? This prompt gives your AI coding tool everything it needs to build it in your framework.

Open in Cursor

Code

This example is in React, but you can get the same result in any frontend framework: each logo is a plain image URL with a size parameter. AccountLogo.tsx holds the list row and the record header, and the Usage tab renders both with your publishable key.
const logoUrl = (domain: string, token: string, size: number) =>
  `https://img.logo.dev/${domain}?token=${token}&size=${size}&retina=true&format=webp`;

export function AccountRow({
  name,
  domain,
  token,
}: {
  name: string;
  domain: string;
  token: string;
}) {
  return (
    <div className="flex items-center gap-2.5 px-3 py-2.5">
      <img
        alt=""
        className="h-5 w-5 rounded object-contain"
        height={20}
        loading="lazy"
        src={logoUrl(domain, token, 20)}
        width={20}
      />
      <span className="text-sm font-medium">{name}</span>
    </div>
  );
}

export function AccountHeader({
  name,
  domain,
  token,
}: {
  name: string;
  domain: string;
  token: string;
}) {
  return (
    <div className="flex items-center gap-3">
      <img
        alt={`${name} logo`}
        className="h-14 w-14 rounded-xl object-contain"
        height={56}
        src={logoUrl(domain, token, 56)}
        width={56}
      />
      <div>
        <div className="text-base font-semibold">{name}</div>
        <div className="text-xs text-zinc-400">{domain}</div>
      </div>
    </div>
  );
}
Your publishable key is built for client-side code, so you can ship it in the browser as-is.

How it works

  • One image URL serves every size. img.logo.dev/:domain returns the company’s logo, and the size parameter scales it: 20 for table rows, 56 for the record header. retina=true keeps both crisp. See all image parameters.
  • Accounts without a logo still render. When Logo.dev doesn’t have a logo for a domain, it returns a generated monogram instead of a broken image, so sparse CRM data never shows a gap. See fallback images.
  • The domain is the key. Most CRMs already store a website on the account or derive one from contact emails, and that field is everything the logo needs.
  • Long lists stay cheap. Rows fetch their logos only when they scroll into view, so a thousand-row account table loads like a short one.

Make it your own

  • Attach companies with autocomplete. Use the company autocomplete when a rep creates an account, and store the returned domain.
  • Harden the record header. Swap the plain <img> for the logo from a domain component to handle companies without a logo.
  • Resolve names without domains. Use the logo from a name example for accounts that only have a company name.

Go further: enrich the account record

The same domain that loads a logo can pull a description, brand colors, and social profiles. Resolve the account once when a rep attaches it, then show that brand data on the record. You can turn a company name into full brand data with one server route. It calls the Search API to resolve the name to a domain, then the Describe API to read the description, brand colors, and social profiles. Both use your secret key and the Describe API needs a paid plan, so this code runs on your server and the browser only ever receives the finished result.
const BASE = "https://api.logo.dev";
const headers = { Authorization: `Bearer ${process.env.LOGO_DEV_SECRET_KEY}` };

// Resolve a typed company name to a domain, then enrich it with brand data.
export async function GET(request: Request) {
  const q = new URL(request.url).searchParams.get("q")?.trim();
  if (!q) {
    return Response.json(null);
  }

  // 1. Resolve the name to a domain with the Search API.
  const search = await fetch(`${BASE}/search?q=${encodeURIComponent(q)}`, {
    headers,
  });
  const [match] = search.ok ? await search.json() : [];
  if (!match) {
    return Response.json(null);
  }

  // 2. Enrich the domain with the Describe API.
  const res = await fetch(`${BASE}/describe/${match.domain}`, { headers });

  // Describe returns 202 while it indexes a domain for the first time. Pass that
  // signal through so the client can retry instead of caching empty brand data.
  if (res.status === 202) {
    return Response.json(
      { name: match.name, domain: match.domain, pending: true },
      { status: 202 }
    );
  }

  const brand = res.ok ? await res.json() : null;

  // A known domain can still come back sparse, so return the name and domain
  // either way and let the logo stand in until the rest fills in.
  return Response.json({
    name: match.name,
    domain: match.domain,
    description: brand?.description || null,
    colors: brand?.colors ?? [],
    socials: brand?.socials ?? {},
  });
}
The browser never sees your secret key. It calls /api/enrich-company?q=... and builds the logo URL from the returned domain with your publishable key. On the record, render the returned description under the header and the first saturated colors entry as a brand swatch. Describe orders colors by prominence and they often lead with black or white, so skip those and use the first saturated one (the brand colors example has the picker). Accounts with no brand data on file still show their logo and name.

Next steps

Logo API

See every size, format, and theme option for the image URL.

Company autocomplete

Capture a clean domain the moment a rep attaches a company.