> ## 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 a company logo from a name

> Turn company names into logos with one image URL each. Customer lists, CSVs, and user input render without scraping or a name-to-domain table.

export const NameLogoDemo = () => {
  const TOKEN = "live_6a1a28fd-6420-4492-aeb0-b297461d9de2";
  const NAMES = ["The Home Depot", "American Express", "Goldman Sachs", "Trader Joes", "The Browser Company"];
  const [input, setInput] = useState("");
  const custom = input.trim();
  const logoSrc = name => `https://img.logo.dev/name/${encodeURIComponent(name)}?token=${TOKEN}&format=webp&retina=true&size=40`;
  return <div className="not-prose my-8 rounded-2xl border border-zinc-950/10 bg-gradient-to-br from-zinc-50 to-white p-6 shadow-sm sm:p-8 dark:border-white/10 dark:from-zinc-900 dark:to-zinc-950">
      <div className="mx-auto max-w-md">
        <ul className="divide-y divide-zinc-950/5 dark:divide-white/5">
          {NAMES.map(name => <li className="flex items-center gap-3 py-2.5" key={name}>
              <span className="w-44 truncate font-mono text-xs text-zinc-500 dark:text-zinc-400">
                "{name}"
              </span>
              <span aria-hidden="true" className="text-zinc-300 dark:text-zinc-600">
                →
              </span>
              <img alt={`${name} logo`} className="h-8 w-8 rounded-md object-contain" height="32" loading="lazy" src={logoSrc(name)} width="32" />
            </li>)}
          <li className="flex items-center gap-3 py-2.5">
            <label className="sr-only" htmlFor="name-logo-input">
              Try a company name
            </label>
            <input className="w-44 rounded-lg border border-zinc-950/10 bg-white px-2.5 py-2 font-mono text-base text-zinc-950 placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-950/20 sm:text-xs dark:border-white/20 dark:bg-zinc-900 dark:text-white dark:focus:ring-white/20" id="name-logo-input" onChange={e => setInput(e.target.value)} placeholder="Try any name…" type="text" value={input} />
            <span aria-hidden="true" className="text-zinc-300 dark:text-zinc-600">
              →
            </span>
            {custom ? <img alt={`${custom} logo`} className="h-8 w-8 rounded-md object-contain" height="32" key={custom} src={logoSrc(custom)} width="32" /> : <div className="h-8 w-8 rounded-md bg-zinc-100 dark:bg-zinc-800" />}
          </li>
        </ul>
      </div>
    </div>;
};

Customer lists, CRM exports, and user input give you company names like "The Home Depot", not clean domains. Showing their logos usually means scraping websites or hand-maintaining a name-to-domain table.

The [name endpoint](/docs/logo-images/name) skips both. It resolves each name to its best match and returns the logo, so a messy list renders with one image URL per row:

```html theme={null}
<img src="https://img.logo.dev/name/the%20home%20depot?token=LOGO_DEV_PUBLISHABLE_KEY" alt="The Home Depot logo" />
```

## Demo

The names below arrive the way a CSV delivers them: multi-word, informal, and missing their domains.

<NameLogoDemo />

Each logo loads live from `img.logo.dev/name/` the moment the row renders. Type your own company name in the last row to test a lookup.

## Build it with AI

<Prompt description="Want logos for a list of company names in your app? This prompt gives your AI coding tool everything it needs to build it in your framework." actions={["copy", "cursor"]}>
  Build a company logo list from plain company names using Logo.dev.

  * Each logo is a plain image URL built from the name: [https://img.logo.dev/name/:name?token=LOGO\_DEV\_PUBLISHABLE\_KEY\&size=40\&retina=true\&format=webp](https://img.logo.dev/name/:name?token=LOGO_DEV_PUBLISHABLE_KEY\&size=40\&retina=true\&format=webp)
  * URL-encode the name (spaces, ampersands, punctuation) before putting it in the path.
  * Names the index cannot match return a generated monogram, so the list never shows broken images. To handle misses in code instead, add fallback=404 and catch the image error.
  * Set fixed width and height on every logo so the list does not shift while images load, and lazy-load logos in long lists.
  * Use a Logo.dev publishable key (safe in client code), never a secret key.
  * Reference implementation: [https://www.logo.dev/docs/use-cases/logo-from-name](https://www.logo.dev/docs/use-cases/logo-from-name)
</Prompt>

## Code

This example is in React, but you can get the same result in any frontend framework: the lookup is one image URL, and the only logic is encoding the name. Paste `NameLogo.tsx`, then render a list as the Usage tab shows.

<CodeGroup>
  ```tsx NameLogo.tsx theme={null}
  export function logoUrlFromName(
    name: string,
    token: string,
    size = 40
  ) {
    return `https://img.logo.dev/name/${encodeURIComponent(name)}?token=${token}&size=${size}&retina=true&format=webp`;
  }

  export function NameLogo({
    name,
    token,
    size = 40,
  }: {
    name: string;
    token: string;
    size?: number;
  }) {
    return (
      <img
        alt={`${name} logo`}
        className="rounded-md object-contain"
        height={size}
        loading="lazy"
        src={logoUrlFromName(name, token, size)}
        width={size}
      />
    );
  }
  ```

  ```tsx Usage theme={null}
  import { NameLogo } from "./NameLogo";

  const CUSTOMERS = ["The Home Depot", "American Express", "Trader Joes"];

  export function CustomerList() {
    return (
      <ul>
        {CUSTOMERS.map((name) => (
          <li key={name}>
            <NameLogo name={name} token="LOGO_DEV_PUBLISHABLE_KEY" />
            {name}
          </li>
        ))}
      </ul>
    );
  }
  ```
</CodeGroup>

<Note>
  Your [publishable key](/docs/platform/api-keys) is built for client-side code, so
  you can ship it in the browser as-is.
</Note>

## How it works

* **One URL resolves a name to its logo.** `img.logo.dev/name/:name` runs the text through the same index as the [Search API](/docs/brand-search/introduction) and returns the top match's logo in one request. The [name lookup reference](/docs/logo-images/name) covers matching behavior.
* **A miss still renders.** Names the index can't match come back as a generated monogram, so a long list never shows a broken image. Add `fallback=404` to catch misses in code instead. See [fallback images](/docs/logo-images/introduction#fallback-images).
* **The standard parameters carry over.** `size`, `retina=true`, and `format=webp` work on name URLs the same way they work on domain URLs. See all [image parameters](/docs/logo-images/introduction#parameters).
* **Encoding is the component's only logic.** It URL-encodes each name so spaces, ampersands, and punctuation survive the path.

## Make it your own

* **Let people pick when names are ambiguous.** Name lookup commits to the top match, so use the [company autocomplete](/docs/use-cases/company-autocomplete) pattern when a person is there to choose.
* **Handle misses yourself.** Add `fallback=404` and an error path like the [logo from a domain](/docs/use-cases/logo-from-domain) component to swap monograms for your own avatar.
* **Tune the image.** Add `theme` or `greyscale` from the [image parameters](/docs/logo-images/introduction#parameters) list.

## Next steps

<CardGroup cols={2}>
  <Card title="Name lookup reference" icon="font" href="/docs/logo-images/name">
    Read the encoding rules, parameters, and matching behavior for the name endpoint.
  </Card>

  <Card title="Logo from a domain" icon="image" href="/docs/use-cases/logo-from-domain">
    Add dark mode handling and a custom fallback when you have clean domains.
  </Card>
</CardGroup>