> ## 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 logos by brand name

> Get brand logos by company name when you don't have a domain. Returns the top Brand Search match with all standard logo size, format, and theme 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>;
};

Get brand logos when you only have a brand name, not a domain.

Perfect for customer lists, spreadsheets, or user input where domains aren't available.

## Try it yourself

Enter any brand name below to see how the name lookup works. The API automatically finds the best match and returns the logo.

<LogoDemo type="name" />

***

### How to use name logos

Access any brand logo by name with your publishable key from the [Logo.dev dashboard](https://www.logo.dev/dashboard).

<Frame caption="https://img.logo.dev/name/shopify?token=LOGO_DEV_PUBLISHABLE_KEY">
  <img alt="Shopify Logo" width="100" height="100" src="https://img.logo.dev/name/shopify?token=live_6a1a28fd-6420-4492-aeb0-b297461d9de2&size=200" />
</Frame>

Here's how to display a brand logo by name:

<CodeGroup>
  ```html Example theme={null}
  <img src="https://img.logo.dev/name/shopify?token=LOGO_DEV_PUBLISHABLE_KEY" alt="Shopify logo" />
  ```

  ```html Format theme={null}
  <img
    src="https://img.logo.dev/name/:brand?token=LOGO_DEV_PUBLISHABLE_KEY"
    alt="Brand logo by name"
  />
  ```
</CodeGroup>

Use name logos anywhere you can use an image URL (spreadsheets, dashboards, or customer lists):

<CodeGroup>
  ```html Example theme={null}
  https://img.logo.dev/name/shopify?token=LOGO_DEV_PUBLISHABLE_KEY
  ```

  ```html Format theme={null}
  https://img.logo.dev/name/:brand?token=LOGO_DEV_PUBLISHABLE_KEY
  ```
</CodeGroup>

<Note>
  The `name` mode is a convenient wrapper over our [Search
  API](/docs/brand-search/introduction) that returns the first result (like "I'm
  Feeling Lucky" for brand logos). It uses the same search index to find
  the best match for your query.
</Note>

### URL-encode brand names

Brand names with spaces or special characters must be URL-encoded.

<CodeGroup>
  ```html Spaces theme={null}
  trader joes → trader%20joes
  https://img.logo.dev/name/trader%20joes?token=LOGO_DEV_PUBLISHABLE_KEY
  ```

  ```html Special characters theme={null}
  AT&T → AT%26T https://img.logo.dev/name/AT%26T?token=LOGO_DEV_PUBLISHABLE_KEY
  ```

  ```html Multiple words theme={null}
  The Home Depot → The%20Home%20Depot
  https://img.logo.dev/name/The%20Home%20Depot?token=LOGO_DEV_PUBLISHABLE_KEY
  ```
</CodeGroup>

In JavaScript, use `encodeURIComponent()` to handle encoding automatically:

```javascript theme={null}
const brandName = "american express";
const encodedName = encodeURIComponent(brandName);
const logoUrl = `https://img.logo.dev/name/${encodedName}?token=${apiKey}`;
```

### Parameters

The name endpoint supports all the same parameters as the [standard logo endpoint](/docs/logo-images/get):

* `size` - Resize logos (default: 128px)
* `format` - Choose png, jpg, or webp
* `theme` - Optimize for light or dark backgrounds
* `greyscale` - Convert to greyscale
* `fallback` - Control fallback behavior

<CodeGroup>
  ```html Custom size theme={null}
  <img src="https://img.logo.dev/name/shopify?token=LOGO_DEV_PUBLISHABLE_KEY&size=256" />
  ```

  ```html PNG format theme={null}
  <img
    src="https://img.logo.dev/name/shopify?token=LOGO_DEV_PUBLISHABLE_KEY&format=png"
  />
  ```

  ```html Dark theme theme={null}
  <img
    src="https://img.logo.dev/name/shopify?token=LOGO_DEV_PUBLISHABLE_KEY&theme=dark&format=png"
  />
  ```
</CodeGroup>

### How name lookup works

When you request a logo by name, we:

1. Search our Brand Search index for the best match
2. Return the logo for the top result's domain
3. Apply any parameters (size, format, etc.)

This is equivalent to calling the Search API and using the first result's domain with the logo endpoint.

### FAQs

<AccordionGroup>
  <Accordion title="When should I use name lookup vs domain lookup?">
    Use name lookup when you only have brand names (customer lists, user input,
    spreadsheets). Use domain lookup when you have verified domains. Domain
    lookup is faster and more accurate.
  </Accordion>

  <Accordion title="What happens if the name doesn't match any brand?">
    We return a generated monogram fallback, just like the standard logo
    endpoint. Use `fallback=404` to get a 404 response instead.
  </Accordion>

  <Accordion title="How accurate is the name matching?">
    Name lookup uses the same Brand Search index that powers our search API. It
    returns the most popular match for your query. For ambiguous names, use the
    [Search API](/docs/brand-search/introduction) to see all matches and choose
    the right one.
  </Accordion>

  <Accordion title="Can I customize the logo appearance?">
    Yes. All parameters from the [logo endpoint](/docs/logo-images/get) work with
    name lookup (size, format, theme, greyscale, and more).
  </Accordion>

  <Accordion title="Do I need to URL-encode single-word names?">
    No. Single words without special characters don't need encoding. It's safe
    to always encode though. `encodeURIComponent("shopify")` still returns
    `"shopify"`.
  </Accordion>

  <Accordion title="What if I find a wrong match?">
    Report issues at [logo.dev/update](https://www.logo.dev/update) or from the
    dashboard. We continuously improve our Brand Search index based on feedback.
  </Accordion>
</AccordionGroup>