Get a company logo from a domain

Use case prompt

Build a reusable company logo component, following https://www.logo.dev/docs/use-cases/logo-from-domain.md

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

The component takes a bare domain and renders the company logo at a fixed size. It follows the user's color scheme, or a fixed theme on a surface that is always light or always dark. When a domain has no logo, it shows an initials avatar at the same size, and a new domain tries the lookup again.

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

CRM rows, vendor dashboards, and customer directories are easier to scan when each company has its logo. Your app stores the domain, picks the theme for each surface, and decides what a company with no logo shows.

Store the bare domain

Store the domain, such as github.com, with no protocol or path. Put it in a Logo.dev CDN URL with your publishable key. The component below sets the image parameters.

Choose the theme and the fallback

Theme. Follow the user’s color scheme by default. On a surface that is always dark, such as a sidebar, force theme=dark so that dark marks like GitHub’s stay visible.
No logo. Keep the generated monogram when a lettermark is enough. When your design has its own placeholder, add fallback=404 and show your avatar.

Render the component

This component shows an initials avatar when a domain has no logo:

import { useState, type ReactNode } from "react";

type CompanyLogoProps = {
  domain: string;
  token: string;
  /** Rendered size in px. The URL asks for 2x pixels for retina screens. */
  size?: number;
  /** Display name for alt text and the default initials fallback. */
  name?: string;
  /** "auto" follows the user's color scheme. Force "light" or "dark" to match a fixed surface. */
  theme?: "auto" | "light" | "dark";
  greyscale?: boolean;
  /** Custom fallback UI. Defaults to an initials avatar. */
  fallback?: ReactNode;
  className?: string;
};

export function CompanyLogo({
  domain,
  token,
  size = 40,
  name,
  theme = "auto",
  greyscale = false,
  fallback,
  className = "",
}: CompanyLogoProps) {
  // Track which domain failed, so a new domain retries the lookup.
  const [failedDomain, setFailedDomain] = useState<string | null>(null);
  const label = name ?? domain;

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

  const src = (t: "light" | "dark") =>
    `https://img.logo.dev/${domain}?token=${token}&size=${size}&retina=true&format=webp&theme=${t}${
      greyscale ? "&greyscale=true" : ""
    }&fallback=404`;

  const img = (
    <img
      alt={`${label} logo`}
      className={`object-contain ${className}`}
      decoding="async"
      height={size}
      loading="lazy"
      onError={() => setFailedDomain(domain)}
      src={src(theme === "dark" ? "dark" : "light")}
      width={size}
    />
  );

  if (theme !== "auto") {
    return img;
  }

  // theme="auto": the browser picks the source from the user's color scheme.
  return (
    <picture>
      <source media="(prefers-color-scheme: dark)" srcSet={src("dark")} />
      {img}
    </picture>
  );
}

import { CompanyLogo } from "./CompanyLogo";

export function CompanyList() {
  return (
    <div>
      <CompanyLogo
        domain="github.com"
        name="GitHub"
        size={40}
        token="LOGO_DEV_PUBLISHABLE_KEY"
      />
      {/* Fixed dark surface, such as a sidebar or a footer: */}
      <CompanyLogo
        domain="github.com"
        theme="dark"
        token="LOGO_DEV_PUBLISHABLE_KEY"
      />
      {/* Custom fallback instead of the initials avatar: */}
      <CompanyLogo
        domain="made-up-startup.io"
        fallback={<span className="inline-block h-10 w-10 rounded-lg bg-zinc-200" />}
        token="LOGO_DEV_PUBLISHABLE_KEY"
      />
    </div>
  );
}

If your data has company names but no domains, use a name lookup.

Test the component

Render github.com on a light and a dark surface, and check that the mark stays visible on both. Then render made-up-startup.io, and check that the initials avatar appears at the same size. Change the domain back, and check that the logo returns.

Logo.dev CDN by domain

Every parameter the domain URL accepts.

Logo from a name

Render logos from company names when your lists have no domains.

Start simple

Fintech

CRM and sales

Marketing and onboarding

Marketplaces

Branded content

Get a company logo from a domain

Store the bare domain

Choose the theme and the fallback

Render the component

Test the component

Logo.dev CDN by domain

Logo from a name

​Store the bare domain

​Choose the theme and the fallback

​Render the component

​Test the component

Logo.dev CDN by domain

Logo from a name

Store the bare domain

Choose the theme and the fallback

Render the component

Test the component