LogoMarquee

A horizontally scrolling marquee component for showcasing client logos, partner brands, integrations, sponsors, and trusted companies.

The component creates a seamless infinite scrolling effect with configurable speed, direction, and hover interactions.

Import the component using:

import LogoMarquee from "@/components/ui/logoMarquee";

Preview

Example

<LogoMarquee
  heading="Trusted by leading companies"
  logos={[
    {
      src: "/logos/slack.svg",
      alt: "Slack",
    },
    {
      src: "/logos/notion.svg",
      alt: "Notion",
    },
    {
      src: "/logos/github.svg",
      alt: "GitHub",
    },
    {
      src: "/logos/stripe.svg",
      alt: "Stripe",
    },
  ]}
/>

Props

type ActionOnHover = "slow" | "pause" | "none";
 
type ScrollDirection = "left" | "right";
 
interface LogoItem {
  src: string;
  alt: string;
  width?: number;
  height?: number;
}
 
interface LogoMarqueeProps {
  heading?: string;
 
  logos: LogoItem[];
 
  actionOnHover?: ActionOnHover;
 
  scrollDirection?: ScrollDirection;
 
  scrollSpeed?: number; 
 
  showFadeOverlays?: boolean;
}

Logo Data Structure

const logos = [
  {
    src: "/logos/slack.svg",
    alt: "Slack",
  },
  {
    src: "/logos/github.svg",
    alt: "GitHub",
  },
  {
    src: "/logos/notion.svg",
    alt: "Notion",
  },
  {
    src: "/logos/stripe.svg",
    alt: "Stripe",
  },
];

Custom Logo Sizes

const logos = [
  {
    src: "/logos/slack.svg",
    alt: "Slack",
    width: 140,
    height: 70,
  },
  {
    src: "/logos/github.svg",
    alt: "GitHub",
    width: 100,
    height: 50,
  },
];

Hover Behaviors

Pause on Hover

<LogoMarquee
  logos={logos}
  actionOnHover="pause"
/>

Slow on Hover

<LogoMarquee
  logos={logos}
  actionOnHover="slow"
/>

Disable Hover Interaction

<LogoMarquee
  logos={logos}
  actionOnHover="none"
/>

Scroll Direction

Scroll Left

<LogoMarquee
  logos={logos}
  scrollDirection="left"
/>

Scroll Right

<LogoMarquee
  logos={logos}
  scrollDirection="right"
/>

Scroll Speed

Lower values move faster.

<LogoMarquee
  logos={logos}
  scrollSpeed={15}
/>

Slower animation:

<LogoMarquee
  logos={logos}
  scrollSpeed={40}
/>

Show Fade Overlays

// With fade overlays (default)
<LogoMarquee logos={logos} showFadeOverlays={true} />
 
// Without fade overlays
<LogoMarquee logos={logos} showFadeOverlays={false} />
 
// The prop is optional - defaults to true
<LogoMarquee logos={logos} />

Complete Example

const logos = [
  {
    src: "/logos/slack.svg",
    alt: "Slack",
  },
  {
    src: "/logos/github.svg",
    alt: "GitHub",
  },
  {
    src: "/logos/notion.svg",
    alt: "Notion",
  },
  {
    src: "/logos/stripe.svg",
    alt: "Stripe",
  },
  {
    src: "/logos/figma.svg",
    alt: "Figma",
  },
  {
    src: "/logos/vercel.svg",
    alt: "Vercel",
  },
];
 
<LogoMarquee
  heading="Trusted by thousands of teams"
  logos={logos}
  actionOnHover="pause"
  scrollDirection="left"
  scrollSpeed={20}
/>

Notes

Creates a seamless infinite scrolling effect.
Uses duplicated logo sets for smooth looping.
Automatically pauses animation when outside the viewport.
Supports custom logo dimensions.
Supports hover pause and slow-down effects.
Works well for client logos, integrations, sponsors, and partner showcases.
Optimized using Next.js Image.
Responsive and mobile-friendly.