logo-infinite-carousel

A zero-config, infinite scrolling logo/icon carousel for React. No CSS imports needed — animations are injected automatically.

Installation

With bun:

bun add logo-infinite-carousel

With npm:

npm install logo-infinite-carousel

Usage

import { InfiniteLogoCarousel } from "logo-infinite-carousel";
import { Wrench, Building2, Truck, Factory, Road, Hammer } from "lucide-react";

const items = [
  { text: "Utility", icon: Wrench },
  { text: "Retaining", icon: Building2 },
  { text: "Infrastructure", icon: Truck },
  { text: "Engineering", icon: Factory },
  { text: "Highway", icon: Road },
  { text: "Civil Construction", icon: Hammer },
];

export default function App() {
  return (
    <div style={{ background: "#000", padding: "12px", borderRadius: "8px" }}>
      <InfiniteLogoCarousel
        items={items}
        speed={20}
        iconClassName="w-5 h-5 text-white"
        textClassName="text-white text-sm font-medium"
      />
    </div>
  );
}

Props

| Prop | Type | Default | Description | | --------------- | ---------------- | ------- | -------------------------------------- | | items | CarouselItem[] | — | Array of items to display (required) | | speed | number | 20 | Scroll speed in seconds per full cycle | | className | string | "" | Class applied to the outer wrapper | | itemClassName | string | "" | Class applied to each item container | | iconClassName | string | "" | Class applied to each icon | | textClassName | string | "" | Class applied to each text label |

CarouselItem

interface CarouselItem {
  text: string;
  icon?: React.ComponentType<{ className?: string }>;
}

The icon field accepts any React component that takes a className prop — works great with lucide-react, heroicons, or any custom SVG component.

Text only (no icons)

const items = [
  { text: "React" },
  { text: "Next.js" },
  { text: "TypeScript" },
  { text: "Tailwind CSS" },
];

<InfiniteLogoCarousel items={items} speed={15} />;

Slow vs fast scroll

// Slow and subtle
<InfiniteLogoCarousel items={items} speed={40} />

// Fast and energetic
<InfiniteLogoCarousel items={items} speed={10} />

How it works

• Duplicates your items list to create a seamless loop
• Injects @keyframes via a <style> tag — no CSS file to import
• The animation name is namespaced (infinite-carousel-scroll) to avoid conflicts

Requirements

• React 17 or higher

License

MIT