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.

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

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