Logo Cloud

Component

About

A strip of customer or partner logos, flattened to one muted ink tone, that renders as a wrapped row, a hairline grid, or an infinite auto-scrolling marquee to signal social proof on a landing page.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Logo Cloud to your project and fits it to your theme.

Code

How Logo Cloud is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { LogoCloud, type LogoItem } from "@/components/ui/logo-cloud";

const logos: LogoItem[] = [
  {
    name: "Northwind",
    logo: (
      <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <rect x="3" y="12" width="6" height="17" rx="1.5" fill="currentColor" />
        <rect x="13" y="5" width="6" height="24" rx="1.5" fill="currentColor" />
        <rect
          x="23"
          y="15"
          width="6"
          height="14"
          rx="1.5"
          fill="currentColor"
        />
      </svg>
    ),
  },
  {
    name: "Contoso",
    logo: (
      <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M16 2 29 16 16 30 3 16Z"
          fill="none"
          stroke="currentColor"
          strokeWidth="3"
        />
      </svg>
    ),
  },
  {
    name: "Fabrikam",
    logo: (
      <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M16 3 27 9.5V22.5L16 29 5 22.5V9.5Z"
          fill="none"
          stroke="currentColor"
          strokeWidth="2.5"
        />
      </svg>
    ),
  },
  {
    name: "Lumen Labs",
    logo: (
      <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <circle cx="16" cy="16" r="6" fill="currentColor" />
        <circle
          cx="16"
          cy="16"
          r="12"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
        />
      </svg>
    ),
  },
  {
    name: "Vantage",
    logo: (
      <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <path d="M16 4 29 28H3Z" fill="currentColor" />
      </svg>
    ),
  },
  {
    name: "Orbital",
    logo: (
      <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <circle
          cx="12"
          cy="16"
          r="9"
          fill="none"
          stroke="currentColor"
          strokeWidth="2.5"
        />
        <circle
          cx="20"
          cy="16"
          r="9"
          fill="none"
          stroke="currentColor"
          strokeWidth="2.5"
        />
      </svg>
    ),
  },
];

export default function LogoCloudDemo() {
  return (
    <div className="flex w-full items-center justify-center bg-background p-10">
      <LogoCloud title="Trusted by teams at" logos={logos} />
    </div>
  );
}