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

# Use Logo.dev with Next.js (next/image)

> Render company logos in Next.js with next/image. Add img.logo.dev to remotePatterns, store your publishable key in an env var, and handle canvas and OG images.

`next/image` blocks external hostnames by default, so a logo from `img.logo.dev` throws `Invalid src prop ... hostname is not configured`. One `remotePatterns` entry fixes it. This page covers that config, the env var for your key, and the canvas caveat.

## Prerequisites

* A Logo.dev [publishable key](/platform/api-keys) (`pk_…`).
* Next.js 12.3 or later (any version with `remotePatterns`).

<Steps>
  <Step title="Allow img.logo.dev in next.config.js">
    Add `img.logo.dev` to `images.remotePatterns` so the Image Optimization API fetches from it:

    ```js next.config.js theme={null}
    /** @type {import('next').NextConfig} */
    module.exports = {
      images: {
        remotePatterns: [
          {
            protocol: "https",
            hostname: "img.logo.dev",
          },
        ],
      },
    };
    ```

    Restart the dev server after changing `next.config.js`. Next reads the config once at startup.

    <Warning>
      The Image Optimization API fetches `img.logo.dev` from your server, which
      sends no `Referer` header. If your publishable key has [domain
      restrictions](/platform/api-keys#domain-restrictions) enabled, this
      request is blocked. Use a separate, unrestricted key for `next/image`, or
      render with a plain `<img>` instead (see [Skip the
      optimizer](#skip-the-optimizer)).
    </Warning>
  </Step>

  <Step title="Store your publishable key in an env var">
    A publishable key is built for client-side code, so you can expose it in the browser. Prefix it with `NEXT_PUBLIC_` to make it available to client components:

    ```bash .env.local theme={null}
    NEXT_PUBLIC_LOGO_DEV_PUBLISHABLE_KEY=pk_xxxxxxxxxxxx
    ```
  </Step>

  <Step title="Render the logo">
    Pass the domain and your publishable key to `next/image`. Set `width` and `height`, since `next/image` requires them for remote images:

    ```tsx CompanyLogo.tsx theme={null}
    import Image from "next/image";

    export 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}
        />
      );
    }
    ```
  </Step>
</Steps>

## Skip the optimizer

`next/image` re-encodes the logo through Next's optimizer. Logo.dev already serves sized, cached images from a CDN, so a plain `<img>` (or `unoptimized`) is often simpler and avoids a second hop:

```tsx theme={null}
<img
  src={`https://img.logo.dev/${domain}?token=${process.env.NEXT_PUBLIC_LOGO_DEV_PUBLISHABLE_KEY}`}
  alt={`${domain} logo`}
  width={128}
  height={128}
/>
```

Use the [`size`, `format`, and `theme` parameters](/logo-images/get#parameters) on the URL to control output instead of the optimizer.

## Canvas and OG images

Drawing a logo onto a `<canvas>` taints it unless you set `crossorigin="anonymous"`. Generating Open Graph images with `next/og` renders on the server, where the canvas rules don't apply, but you still fetch the logo over the network. [CORS, canvas, and CSP](/platform/cors) covers both.

<Card title="CORS, canvas, and Content Security Policy" href="/platform/cors" icon="image">
  Untaint a canvas and allow img.logo.dev in your CSP.
</Card>