Skip to main content
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 (pk_…).
  • Next.js 12.3 or later (any version with remotePatterns).
1

Allow img.logo.dev in next.config.js

Add img.logo.dev to images.remotePatterns so the Image Optimization API fetches from it:
next.config.js
/** @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.
The Image Optimization API fetches img.logo.dev from your server, which sends no Referer header. If your publishable key has 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).
2

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:
.env.local
NEXT_PUBLIC_LOGO_DEV_PUBLISHABLE_KEY=pk_xxxxxxxxxxxx
3

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

​
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: 
<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 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 covers both.

CORS, canvas, and Content Security Policy

Untaint a canvas and allow img.logo.dev in your CSP.