Skip to main content
Every SaaS ships an integrations page, and every tile on it needs the partner’s logo. Hosting those files yourself means chasing rebrands forever. A user browsing your marketplace sees a tidy grid of connector tiles, each wearing the partner’s current logo. Each tile builds its image from the partner’s domain with the Logo API, so the grid updates itself when a partner rebrands.

​
Demo

Each tile below is the same component with a different domain: Every logo loads live from img.logo.dev, requested by domain at render time.

​
Build it with AI

Want this integrations grid in your app? This prompt gives your AI coding tool everything it needs to build it in your framework.

Open in Cursor

​
Code

This example is in React, but you can get the same result in any frontend framework: each tile is one image URL on a white well. Paste IntegrationTile.tsx, then map your catalog over it as the Usage tab shows. 
export function IntegrationTile({
  name,
  domain,
  token,
}: {
  name: string;
  domain: string;
  token: string;
}) {
  return (
    <div className="flex flex-col items-center gap-2.5 rounded-xl border border-zinc-950/10 bg-white px-3 py-5 dark:border-white/10 dark:bg-zinc-900">
      {/* Logos are designed for light backgrounds and some ship with baked
          white ones, so every logo sits on a white well. */}
      <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-white">
        <img
          alt={`${name} logo`}
          className="h-7 w-7 rounded-md object-contain"
          height={28}
          loading="lazy"
          src={`https://img.logo.dev/${domain}?token=${token}&size=28&retina=true&format=webp`}
          width={28}
        />
      </span>
      <span className="text-xs font-medium">{name}</span>
    </div>
  );
}
Your publishable key is built for client-side code, so you can ship it in the browser as-is.

​
How it works

  • Every logo is one image URL. img.logo.dev/:domain returns the partner’s logo, and size, retina, and format=webp handle the rendering. See all image parameters.
  • Rebrands handle themselves. When a partner changes their logo, the same URL serves the new one. Adding a connector is one array entry; there is no asset to swap.
  • Unknown domains still render. When Logo.dev doesn’t have a logo, it returns a generated monogram instead of a broken image, so the grid works with any catalog you give it. See fallback images.
  • A white well keeps the grid uniform. Logos are designed for light backgrounds, so each sits on a small white chip and lazy-loads as it scrolls into view.

​
Make it your own

  • Go greyscale until hover. Add &greyscale=true for a muted grid, or apply it conditionally so tiles gain color on hover. See all image parameters.
  • Turn the tiles into cards. Use the job board logos pattern when each entry needs more than a logo and a name.
  • Animate the same catalog. Feed the domains to the animated logo wall for a partners section on the landing page.

​
Next steps

Logo API

See every image URL parameter: size, format, theme, greyscale, and fallbacks.

Job board logos

Build the card-based sibling for listing feeds.