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

# Get company logos by domain

> Get any company's logo by domain from a single image URL. Full reference for the size, format (PNG/JPG/WebP), theme, greyscale, retina, and fallback parameters.

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>;
};

Request a company's logo by passing its domain to `img.logo.dev`. Append your [publishable key](/docs/platform/api-keys) as the `token` parameter, then use the URL anywhere you can use an image.

## Try it yourself

Enter any domain below to fetch its logo.

<LogoDemo type="domain" />

```html theme={null}
<img
  src="https://img.logo.dev/stripe.com?token=LOGO_DEV_PUBLISHABLE_KEY"
  alt="Stripe logo"
/>
```

<Tip>
  The default format is `jpg`, which has no transparency, so the logo sits on a
  white box. For a transparent logo, add `format=png`, plus `theme=dark` on dark
  backgrounds. See [troubleshooting](/docs/platform/troubleshooting) for other common
  display issues.
</Tip>

## Parameters

<ParamField path="token" type="string" required>
  Your publishable key. Get it from the
  [dashboard](https://www.logo.dev/dashboard/api-keys).
</ParamField>

<ParamField path="size" type="integer" default="128">
  The desired width and height of the logo in pixels (max 800). The image will
  maintain its aspect ratio.
</ParamField>

<ParamField path="width" type="integer">
  Target width in pixels (max 800). Use with `height` to control exact
  dimensions. When set, `width`/`height` take precedence over `size`. Short
  alias: `w`.
</ParamField>

<ParamField path="height" type="integer">
  Target height in pixels (max 800). Use with `width` to control exact
  dimensions. When set, `width`/`height` take precedence over `size`. Short
  alias: `h`.
</ParamField>

<ParamField path="format" type="string" default="jpg">
  The image format to return.

  <Expandable title="formats">
    <ResponseField name="jpg">
      Smaller file size without transparency
    </ResponseField>

    <ResponseField name="png">
      Highest quality with transparency support
    </ResponseField>

    <ResponseField name="webp">
      Modern format with optimal compression
    </ResponseField>

    <ResponseField name="svg">
      Vector format for infinite scaling. **Enterprise plans only.**
    </ResponseField>
  </Expandable>
</ParamField>

<ParamField path="greyscale" type="boolean" default="false">
  Returns a black and white version of the logo.
</ParamField>

<ParamField path="theme" type="string" default="auto">
  Adjusts logo colors for light or dark backgrounds. Only works on images with
  transparency.

  <Expandable title="options">
    <ResponseField name="auto">No color adjustment applied</ResponseField>

    <ResponseField name="light">
      Inverts logos with dominant light colors, so they stay visible on light backgrounds
    </ResponseField>

    <ResponseField name="dark">
      Inverts logos with dominant dark colors, so they stay visible on dark backgrounds
    </ResponseField>
  </Expandable>
</ParamField>

<ParamField path="retina" type="boolean" default="false">
  Returns a high-density image at 2x the requested size for sharp display on
  retina screens.
</ParamField>

<ParamField path="fallback" type="string" default="monogram">
  Returns a fallback image if the logo is not found.

  <Expandable title="options">
    <ResponseField name="monogram">
      Generates a monogram from the first letter of the domain
    </ResponseField>

    <ResponseField name="404">
      Returns a 404 error instead of an image. Use this to handle your own
      fallback in code—see [fallback
      images](/docs/logo-images/introduction#fallback-images).
    </ResponseField>
  </Expandable>

  Only `monogram` and `404` are accepted. Custom fallback image URLs are not
  supported.
</ParamField>