LogoCloud

Updated: May 9, 2025

The LogoCloud component is used to display a collection of logos in a grid layout. It's perfect for showcasing partners, clients, or integrations on your website.

LogoCloud

<LogoCloud 
  logos={[
    { wordmark: "/trademarks/type-dark.svg", size: "m" },
    { wordmark: "/trademarks/type-dark.svg", size: "m" },
    { wordmark: "/trademarks/type-dark.svg", size: "m" },
    { wordmark: "/trademarks/type-dark.svg", size: "m" },
    { wordmark: "/trademarks/type-dark.svg", size: "m" },
    { wordmark: "/trademarks/type-dark.svg", size: "m" }
  ]}
  columns="2"
  gap="16"
  limit={4}
/>

Rotation

When you have more logos than the limit allows, the LogoCloud will automatically rotate through them. If the limit equals the number of logos, rotation will be disabled.

Rotation

<LogoCloud 
  logos={[
    { wordmark: "/trademarks/type-dark.svg", size: "m" },
    { wordmark: "/trademarks/type-dark.svg", size: "m" },
    { wordmark: "/trademarks/type-dark.svg", size: "m" },
    { wordmark: "/trademarks/type-dark.svg", size: "m" },
    { wordmark: "/trademarks/type-dark.svg", size: "m" },
    { wordmark: "/trademarks/type-dark.svg", size: "m" }
  ]}
  limit={6}
  rotationInterval={3000}
  columns="3"
  gap="16"
/>

Grid layout

The LogoCloud component extends the Grid component, so you can use all Grid props to customize the layout.

Grid layout

<LogoCloud 
  logos={[
      { wordmark: "/trademarks/type-dark.svg", size: "s" },
      { wordmark: "/trademarks/type-dark.svg", size: "s" },
      { wordmark: "/trademarks/type-dark.svg", size: "s" },
      { wordmark: "/trademarks/type-dark.svg", size: "s" },
      { wordmark: "/trademarks/type-dark.svg", size: "s" },
      { wordmark: "/trademarks/type-dark.svg", size: "s" }
  ]}
  columns="4"
  s={{columns: 2}}
  gap="24"
/>

API reference

Prop	Type	Default
logosrequired The marks to show.	LogoProps[]	—
className	string	—
style	React.CSSProperties	—
limit How many are visible at once. The rest rotate through.	number	6
rotationInterval Milliseconds each set stays before the next rotates in.	number	ANIMATION_DURATION
…and every FlexProps prop	inherited	—
…and every GridProps prop	inherited	—

ComponentsLogo

ComponentsMask

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club