React logo cloud components

Start with permission, because a logo is a trademark and putting one on your marketing site is a use of someone else's brand. Most enterprise contracts have a clause about this, and plenty of companies keep a brand page with rules on clear space and minimum size. Get written sign-off from your contact, or from their marketing team if the contract is silent, and keep the email. Pulling a logo off a website because the customer's legal team asked you to is a bad afternoon that a two-line email prevents.

The convention is to desaturate logos with grayscale and reduce opacity so a row of clashing brand colours does not fight your page. It works, and it has a real cost: recognition drops when you strip the colour that makes a brand identifiable, and heavy opacity reduction can push the marks below a usable contrast level. My compromise is grayscale at full opacity on light backgrounds, and if you insist on a hover state that restores colour, remember touch devices never see it.

Size logos optically rather than uniformly. Setting every SVG to the same width makes a wide wordmark tower over a square icon, so normalise on visual mass instead, which usually means matching cap height and giving each logo its own max-height. Export every mark at the same viewBox padding so your spacing is predictable. For dark mode you need either logos that use currentColor or two files per brand, because a black wordmark on a dark background is a bug you will only notice in screenshots.

Motion is optional and often counterproductive. A marquee duplicates its content to loop, so mark the clone aria-hidden and never put real links inside a moving strip, since asking someone to click a target that is sliding away is hostile. Pause on hover, and stop entirely under prefers-reduced-motion. The rotating clouds have a subtler problem: at any moment half your social proof is off screen, so if you only have eight logos worth showing, show all eight and let them sit still.