> ## Documentation Index
> Fetch the complete documentation index at: https://www.logo.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Logo.dev is the logo API for any company

> Get any company's logo by domain, stock ticker, ISIN, or crypto symbol, or enrich a domain into a full brand profile with one API.

export const LogoDemo = ({type = "domain"}) => {
  const DEFAULT_VALUES = {
    domain: "logo.dev",
    name: "Shopify",
    crypto: "BTC",
    ticker: "AAPL",
    isin: "US0378331005"
  };
  const PLACEHOLDERS = {
    domain: "Enter a domain...",
    name: "Enter a brand name...",
    crypto: "Enter a crypto symbol...",
    ticker: "Enter a stock ticker...",
    isin: "Enter an ISIN..."
  };
  const LABELS = {
    domain: "company domain",
    name: "brand name",
    crypto: "cryptocurrency symbol",
    ticker: "stock ticker",
    isin: "ISIN"
  };
  const [input, setInput] = useState("");
  const [displayValue, setDisplayValue] = useState(DEFAULT_VALUES[type] || DEFAULT_VALUES.domain);
  const [imageError, setImageError] = useState(false);
  const normalizeInput = useCallback(value => {
    if (!value) return "";
    let cleaned = value.trim();
    if (type === "domain") {
      cleaned = cleaned.replace(/^https?:\/\//, "");
      cleaned = cleaned.replace(/^www\./, "");
      cleaned = cleaned.split("/")[0].split("?")[0];
      if (cleaned.includes(".")) {
        return cleaned.toLowerCase();
      }
      if (cleaned.length > 0) {
        return `${cleaned.toLowerCase()}.com`;
      }
    }
    if (type === "name") {
      return encodeURIComponent(cleaned);
    }
    if (type === "crypto" || type === "ticker" || type === "isin") {
      return cleaned.toUpperCase();
    }
    return cleaned;
  }, [type]);
  const handleInputChange = useCallback(e => {
    const value = e.target.value;
    setInput(value);
    const normalized = normalizeInput(value);
    if (normalized) {
      setDisplayValue(normalized);
      setImageError(false);
    } else if (value === "") {
      setDisplayValue(DEFAULT_VALUES[type] || DEFAULT_VALUES.domain);
    }
  }, [normalizeInput, type]);
  const handleImageError = useCallback(() => {
    setImageError(true);
  }, []);
  const imageUrl = useMemo(() => {
    const baseUrl = "https://img.logo.dev";
    const token = "live_6a1a28fd-6420-4492-aeb0-b297461d9de2";
    const params = "format=webp&retina=true&size=128";
    if (type === "domain") {
      return `${baseUrl}/${displayValue}?token=${token}&${params}`;
    }
    return `${baseUrl}/${type}/${displayValue}?token=${token}&${params}`;
  }, [displayValue, type]);
  return <div className="not-prose my-8 rounded-2xl border border-zinc-950/10 dark:border-white/10 bg-gradient-to-br from-zinc-50 to-white dark:from-zinc-900 dark:to-zinc-950 p-8 shadow-sm">
      <div className="max-w-2xl mx-auto space-y-6">
        {}
        <div className="flex justify-center" role="img" aria-label={`${LABELS[type]} logo preview`}>
          <div className="rounded-2xl bg-zinc-100 dark:bg-zinc-800/50 inline-flex items-center justify-center">
            <img alt={`${displayValue} logo`} width="128" height="128" src={imageUrl} onError={handleImageError} className="rounded-lg" loading="lazy" key={displayValue} />
          </div>
        </div>
        {}
        <div className="relative">
          <label htmlFor="logo-input" className="sr-only">
            Enter {LABELS[type]}
          </label>
          <div className="absolute inset-y-0 left-4 flex items-center pointer-events-none">
            <svg className="h-5 w-5 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
          <input id="logo-input" type="text" value={input} onChange={handleInputChange} placeholder={PLACEHOLDERS[type] || PLACEHOLDERS.domain} aria-describedby={imageError ? "image-error" : undefined} className="w-full pl-12 pr-4 py-4 text-lg rounded-xl border border-zinc-950/10 dark:border-white/20 bg-white dark:bg-zinc-900 text-zinc-950 dark:text-white placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-950/20 dark:focus:ring-white/20 transition-shadow" />
          {imageError && <p id="image-error" className="sr-only">
              Logo not found for {displayValue}
            </p>}
        </div>
      </div>
    </div>;
};

Turn any domain, stock ticker, ISIN, or crypto symbol into a company logo, or any domain into a full brand profile. There's no SDK to install and no logo files to host. New here? [What is Logo.dev?](/what-is-logo-dev) explains the platform.

## Try it yourself

Enter any domain to fetch its logo from a database of 18M+ companies:

<LogoDemo />

## Our APIs

<CardGroup cols={2}>
  <Card title="Logo API" icon="image" href="/logo-images/introduction">
    Add company logos to your app or site by domain, stock ticker, ISIN, or crypto symbol.
  </Card>

  <Card title="Search API" icon="magnifying-glass" href="/brand-search/introduction">
    Resolve a company name to its domain, with typeahead autocomplete.
  </Card>

  <Card title="Describe API" icon="sparkles" href="/describe/introduction">
    Turn any domain into structured company data: name, description, colors, and socials.
  </Card>

  <Card title="Brand API" icon="swatchbook" href="/brand/introduction">
    Get a domain's full brand profile: logo, brandmark, social banners, and colors.
  </Card>

  <Card title="Transaction API" icon="credit-card" href="/transaction/introduction">
    Identify a merchant from a raw card transaction and show its logo (early access).
  </Card>
</CardGroup>

## Use cases

See your use case running before you build it. Every page pairs a live demo with working code and a prompt for your AI coding tool:

* **[Transaction feeds](/use-cases/transaction-logos)**: merchant logos next to charges, the way banking apps do it.
* **[CRM records](/use-cases/crm-logos)**: tiny logos in the account list and the full logo on the record.
* **[Onboarding](/use-cases/onboarding-personalization)**: signup flows that brand themselves from a work email.
* **[Logo walls](/use-cases/animated-logo-wall)**: customer and integration grids with no logo files to collect.

Browse all of them in [Use cases](/use-cases/introduction).

## Quickstart

Add your [publishable key](/platform/api-keys) as the `token` parameter and the URL works anywhere an image does:

<CodeGroup>
  ```html HTML theme={null}
  <img
    src="https://img.logo.dev/nike.com?token=LOGO_DEV_PUBLISHABLE_KEY"
    alt="Nike logo"
  />
  ```

  ```jsx React theme={null}
  function CompanyLogo({ domain }) {
    return (
      <img
        src={`https://img.logo.dev/${domain}?token=LOGO_DEV_PUBLISHABLE_KEY`}
        alt={`${domain} logo`}
      />
    );
  }
  ```

  ```tsx Next.js theme={null}
  // Add img.logo.dev to your next.config.js:
  // module.exports = {
  //   images: {
  //     remotePatterns: [
  //       {
  //         protocol: 'https',
  //         hostname: 'img.logo.dev',
  //       },
  //     ],
  //   },
  // };

  import Image from "next/image";

  function CompanyLogo({ domain }: { domain: string }) {
    return (
      <Image
        src={`https://img.logo.dev/${domain}?token=${process.env.NEXT_PUBLIC_LOGO_DEV_PUBLISHABLE_KEY}`}
        alt={`${domain} logo`}
        width={128}
        height={128}
      />
    );
  }
  ```

  ```vue Vue theme={null}
  <template>
    <img
      :src="`https://img.logo.dev/${domain}?token=LOGO_DEV_PUBLISHABLE_KEY`"
      :alt="`${domain} logo`"
    />
  </template>

  <script>
  export default {
    props: ["domain"],
  };
  </script>
  ```

  ```python Python theme={null}
  logo_url = f"https://img.logo.dev/nike.com?token=LOGO_DEV_PUBLISHABLE_KEY&size=256&format=png"
  ```

  ```ruby Ruby theme={null}
  logo_url = "https://img.logo.dev/nike.com?token=LOGO_DEV_PUBLISHABLE_KEY&size=256&format=png"
  ```

  ```php PHP theme={null}
  $logoUrl = "https://img.logo.dev/nike.com?token=LOGO_DEV_PUBLISHABLE_KEY&size=256&format=png";
  ```

  ```java Android theme={null}
  import android.widget.ImageView;
  import com.squareup.picasso.Picasso;

  public void loadCompanyLogo(String domain, ImageView imageView) {
      String url = "https://img.logo.dev/" + domain + "?token=LOGO_DEV_PUBLISHABLE_KEY";
      Picasso.get()
          .load(url)
          .placeholder(R.drawable.logo_placeholder)
          .error(R.drawable.logo_error)
          .into(imageView);
  }
  ```

  ```swift iOS theme={null}
  import SwiftUI

  struct CompanyLogo: View {
      let domain: String

      var body: some View {
          AsyncImage(url: URL(string: "https://img.logo.dev/\(domain)?token=LOGO_DEV_PUBLISHABLE_KEY")) { image in
              image
                  .resizable()
                  .aspectRatio(contentMode: .fit)
          } placeholder: {
              ProgressView()
          }
          .frame(width: 128, height: 128)
      }
  }
  ```
</CodeGroup>

The [quickstart](/quickstart) gets you from signup to a rendered logo in three steps.