Use Logo.dev with Next.js

Show a company logo in Next.js with a Logo.dev CDN URL. The browser loads each logo from img.logo.dev, so the image never passes through your server. Render next/image with the unoptimized prop, or use a plain <img>.

Prerequisites

A Next.js app.
A Logo.dev publishable key:

Get your API keys

Your dashboard has a publishable key for the Logo.dev CDN and a secret key for the Logo.dev API. Every plan includes both.

Store your publishable key in an env var

A publishable key is safe in client code. Prefix the variable with NEXT_PUBLIC_ so client components can read it:

.env.local

NEXT_PUBLIC_LOGO_DEV_PUBLISHABLE_KEY=pk_xxxxxxxxxxxx

Render the logo

Pass the domain and your publishable key to next/image, and set unoptimized. Set width and height, since next/image requires them for remote images:

CompanyLogo.tsx

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}
      unoptimized
    />
  );
}

With unoptimized, you need no change to next.config.js.

Skip the optimizer

Without unoptimized, the Next.js Image Optimization API fetches each image on your server and passes it on to your users. Fair use does not allow this for img.logo.dev. The Logo.dev CDN already serves sized, cached images, so the optimizer adds nothing. If you added img.logo.dev to images.remotePatterns, remove the entry. Next.js then rejects any next/image that sends a logo through the optimizer. A plain <img> also loads the logo in the browser:

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

To control the output, set the size, format, and theme parameters on the URL.

Canvas and OG images

A logo drawn on a <canvas> needs crossorigin="anonymous". An Open Graph image from next/og needs the logo file on your server, so get it from the Logo.dev API, not the CDN. CORS, canvas, and CSP covers both cases.

Use logos in server code

To work with a logo file in a route handler, a script, or any other server code, call the Logo.dev API with your secret key. You can store those files and serve them from your own servers. See self-hosting.

Get started

CDN

API

Platform

Switch to Logo.dev

Integrations

Get your logo seen

Comparisons

Support