Logo Cloud

Logo cloud display

Marketing BlockSocial Proof

Overview

Displays a set of logos in either a static flex-wrap layout or a continuously scrolling marquee powered by Embla Carousel. Individual logos can be links. Supports a grayscale filter with color-on-hover, configurable marquee speed, and scroll direction.

Usage

import { LogoCloud } from "@leanicon/web-builder-library";

Static

(opens in new tab)

Static with grayscale

Static with links

Marquee

Marquee — slow

Marquee — fast

Marquee — reverse direction

Dark mode

Props

Prop	Type	Default	Description
`logos`	`LogoItem[]`	—	Array of logo objects
`variant`	`"static" \| "marquee"`	`"static"`	Layout mode
`speed`	`"slow" \| "normal" \| "fast"`	`"normal"`	Marquee scroll speed
`direction`	`"left" \| "right"`	`"left"`	Marquee scroll direction
`grayscale`	`boolean`	`false`	Desaturate logos, color on hover
`colorScheme`	`"light" \| "dark"`	—	Force light or dark mode
`className`	`string`	—	Additional CSS classes on root

LogoItem

Prop	Type	Description
`src`	`string`	Image source URL
`alt`	`string`	Alt text
`href`	`string?`	Optional link URL
`width`	`number?`	Intrinsic image width
`height`	`number?`	Intrinsic image height

Notes

The marquee variant uses Embla Carousel with the auto-scroll plugin for a seamless infinite loop. If fewer than 20 logos are provided, the array is automatically duplicated to ensure enough slides for the loop.
Logos are sized at h-8 (mobile) and h-10 (md+).
speed and direction only apply when variant="marquee".
The marquee pauses on mouse hover and resumes when the cursor leaves.
Dark mode: pass colorScheme="dark" or place inside a .dark ancestor.

Props

Name	Type	Default	Required
`logos`	`LogoItem[]`	—	Yes
`variant`	`enum`	`static`	No
`speed`	`enum`	`normal`	No
`direction`	`enum`	`left`	No
`grayscale`	`boolean`	`false`	No
`colorScheme`	`enum`	—	No
`className`	`string`	—	No