Whose Names Are You Allowed to Borrow?

A logo cloud is borrowed trust: six or eight recognizable marks, rendered small, grayscale and quiet, saying "companies like these already chose you". Describe whose logos you display and how, and MeDo generates the section — a static row that never moves, a responsive grid, or a slow marquee — with proper alt text and mobile wrapping, in React + Tailwind.

Trust You Do Not Have to Claim

Every landing page claims to be trusted; a logo cloud is the one place where the claim is checkable, because the visitor recognizes at least one of the names or the section fails visibly. That is its power and its discipline. The logos must be real and the permission to display them must exist — using a customer's mark without asking is the fastest way to convert an endorsement into a legal letter, which is why honest labeling matters: "Trusted by teams at" survives the case where individuals at those companies adopted your tool, while a bare "Trusted by" next to their logos does not. The other half of the craft is restraint. Grayscale at uniform height exists so eight competing brand systems submit to one visual hierarchy — yours — and the section earns its 200 pixels by staying quiet: no carousel autoplay fighting the headline for attention, no oversized marks shouting over the hero. Done right, nobody remembers the section; they just arrive at the testimonial already half-convinced. That invisibility is the feature.

6 modèles

Modèles de Logo Cloud que vous pouvez générer

Chaque modèle est un vrai prompt, pas une capture d'écran. Copiez-le dans n'importe quel éditeur IA, ou exécutez-le dans MeDo pour récupérer du code React + Tailwind.

ClassicTrusted-By Row

Static Grayscale Row Under the Hero

The default B2B opening move: an eyebrow label, eight grayscale marks, one quiet line of borrowed credibility. It never moves, which is the point.

Create a "Trusted by finance teams at" logo section for under a hero. A centered 13px uppercase tracking-wide zinc-500 eyebrow label, then a single flex-wrap row of eight grayscale logos at uniform 28px optical height, desaturated to 60% opacity with a 200ms return to full color on hover. Logos are inline SVGs with the company name available to screen readers via a visually hidden span, and they are not links. Gaps of 48px between logos, wrapping to two rows at tablet width and a two-column grid on mobile with centered items. Add left and right fade masks using a gradient overlay so rows dissolve at the container edges. Cap section height around 200px, no animation of any kind, and background transparent so it inherits the page.

Tester dans MeDo

AnimatedMarquee

Slow Infinite Logo Marquee

For a customer list too long to fit: a slow, seamless, hover-pausing loop that stands still for reduced-motion users. Earned by count, not chosen by taste.

Build a logo marquee for sixteen customer logos. Duplicate the logo list twice inside a flex track and animate translateX from 0 to -50% over 40s, linear and infinite, so the loop is seamless with no jump. Pause the animation on hover and on focus-within, and under prefers-reduced-motion: reduce disable it entirely and let the logos wrap as a static grid instead. Logos are grayscale at 28px height, 64px gap, with left and right gradient fade masks 80px wide so logos dissolve at the edges rather than cutting off mid-mark. The marquee container is aria-hidden and a visually hidden static list carries the company names for screen readers. Keep the eyebrow label above, static. Do not start the animation until the section is in view, using IntersectionObserver, so it never runs off-screen.

Tester dans MeDo

TiersSponsor Grid

Tiered Sponsor Grid for Event Sites

Headline sponsors large on the first row, supporting sponsors uniform beneath. The one logo cloud where size hierarchy carries real information.

Create a sponsors section for a conference site with three tiers. Platinum: two large logos, up to 160px height, centered on the first row. Gold: six logos at 80px height in a three-column grid. Community: twelve marks at 40px height in a six-column grid collapsing to three on mobile and two on small phones. All logos grayscale at 70% opacity, full color on hover, each wrapped in a link to the sponsor's site with target="_blank" and rel="noopener" and an aria-label naming the sponsor and tier. Tier headings in small uppercase zinc-500 labels with generous spacing between tiers. Keep the whole section on a white or off-white panel with a hairline top border, and make the grid collapse order preserve tier reading sequence on mobile.

Tester dans MeDo

PressFeatured-In

"As Featured In" Publication Strip

Mastheads, not customers: the honest press variant for agencies, founders and personal brands, where the publications wrote about you.

Create an "As featured in" strip for an agency site showing five publication mastheads. Use the publications' actual wordmark SVGs at uniform 22px height, grayscale at 60% opacity, non-linking, each with a visually hidden name. Under the strip, add three compact press quotes in a row — a two-line excerpt in italic serif, the publication name and year in small caps beneath, each linking to the article with rel="noopener". The label reads exactly "As featured in" so the claim matches publication coverage rather than customer status. On mobile the quotes stack vertically with hairline dividers, and the mastheads wrap to a centered two-column grid. Keep total section height modest and the typography quieter than the page's main headings — this strip supports the work shown below it.

Tester dans MeDo

ComboWith Testimonial

Logo Cloud Paired With a Named Quote

The strip plus one quote from a recognizable customer: borrowed trust and earned trust in the same viewport, each making the other more credible.

Build a social-proof section combining a logo strip and one anchor testimonial. Top: an eyebrow "Trusted by teams at" with six grayscale logos in a static row. Below, separated by 40px, a centered testimonial block: a 60px avatar, a two-line quote in 20px medium text, and an attribution line — name, role, company — where the company matches one of the logos above, rendered in medium weight. Subtly emphasize that connection by rendering the quoted company's logo at full opacity while the rest stay at 60%. On mobile the quote stacks below the logos. Keep the section under 480px tall, with the quote as the visual anchor and the logos as context, and add no carousel — the logo strip and quote are both static.

Tester dans MeDo

ContrastDark Section

Logo Cloud on a Dark Band

White-ified logos on a near-black band — the version that survives when the surrounding page is dark and grayscale photos would vanish.

Create a logo cloud designed for a dark section background of zinc-950. Logos are provided as dark SVGs, so invert the treatment: render each with the CSS filter invert(1) brightness(2) at 70% opacity, dropping the filter on hover for full brightness, at uniform 26px height. Provide a fallback: accept a light variant per logo via a prop and skip the filter when it exists, since inverting some marks distorts them. Eyebrow label in zinc-400 uppercase, fade masks using black gradients, static single row wrapping to a grid on mobile. No color return on hover beyond brightness — on dark backgrounds full-color logos reintroduce the noise the section exists to remove. Include visually hidden company names and cap the section at 180px.

Tester dans MeDo

Comment personnaliser votre Logo Cloud

Say exactly whose logos these are

"Trusted by teams at Acme" and "Acme is a customer" are different claims, and the second needs Acme's consent in writing. Pick the label that matches what you actually have — employees adopting your tool, a pilot contract, a signed logo agreement — and keep it true when the lineup changes.

Normalize every logo to the same optical height

Logos drawn at their native sizes produce a strip where one giant wordmark dwarfs six small ones. Render each at a uniform 24–32px box height and adjust optically — wide marks need to sit slightly smaller than square ones to look equal. This single rule does more for the section than any styling.

Grayscale is a hierarchy decision, not a style

Desaturated to 50–70% opacity, eight brand palettes stop fighting your page's one. Full-color logo walls look like a sticker album precisely because each logo is optimized to dominate whatever it sits on. Restore color only on hover, if at all.

Choose static, grid or marquee by count, not taste

Up to eight logos fit a static row and should stay static — motion under a headline taxes reading. Ten to twenty logos justify a marquee, paused on hover and respecting reduced motion. Fewer than five: ask each for a short quote instead and you have a testimonials section, which is stronger anyway.

Qui utilise le composant Logo Cloud

B2B SaaS landing page

The classic placement: a single grayscale row directly under the hero headline, bridging the gap between the promise and the proof. Pairs naturally with a testimonial further down that names one of the same companies.

Agency or consultancy site

An "as featured in" strip of publications — press logos carry different weight than customer logos and need the honest label. Often placed before case studies, where the mastheads pre-qualify the work below.

Startup pitch and About page

Backers and customers on one quiet line. On an about page the cloud can run larger and in color, because by that point the visitor has opted into the story rather than skimming a headline.

Event or conference site

Sponsor tiers as a structured grid — headline sponsors larger on top row, supporting sponsors uniform below. A rare case where size differences are meaningful rather than an optical-balance failure.

Modèles de Logo Cloud pour différents sites web

Le même composant logo cloud, adapté au type de site sur lequel il est publié.

01 / 05

B2B SaaS Landing Page

One static grayscale row under the hero, then testimonials from the same companies further down. The repetition is not redundant — the second sighting of a name is where recognition turns into belief.

Styles et variantes de Logo Cloud

Choisissez la variante qui correspond au reste de la page, puis générez-la.

01 / 05

Grayscale Static Row

Uniform-height marks at reduced opacity in a single wrapped row. The default: quiet, fast, and impossible to get wrong — motion would only spend attention the headline needs.

Logo Cloud en React, Next.js, Vue et Svelte

React, Next.js, Vue 3, SvelteKit, Astro ou HTML simple — le même logo cloud, six façons de l'intégrer.

01 / 03

React Logo Cloud

The section is data — an array of logo components and names — so the markup stays a map. A visually hidden list keeps it honest for screen readers.

src/components/LogoCloud.tsx

const logos = [AcmeLogo, NorthwindLogo, GlobexLogo]

<section aria-label="Trusted by finance teams at">
  <p className="text-xs uppercase tracking-wide text-zinc-500">
    Trusted by finance teams at
  </p>
  <div className="flex flex-wrap items-center justify-center gap-12">
    {logos.map((Logo, i) => (
      <span key={i} className="h-7 opacity-60 transition-opacity hover:opacity-100">
        <Logo className="h-full w-auto" />
      </span>
    ))}
  </div>
</section>

Comment ajouter votre Logo Cloud à un projet

Quatre étapes, du choix d'un modèle de logo cloud à sa mise en production.

01~15min

Confirm What You Are Allowed to Show

Before any code, sort your logos into three piles: written permission, plausible fair use ("teams at"), and leave-it-out. The label on the section is decided by this step, not by design.

02~30min

Collect and Normalize the Assets

Request SVG or transparent PNGs from each company, then normalize: same box height, white or transparent backgrounds only. One JPEG-on-white in the set breaks the whole grayscale treatment.

03~10s

Generate From a Template Prompt

Paste a prompt above into MeDo with your label and logo count. Decide static versus marquee by count first — up to eight stays static — and say so explicitly in the prompt.

04~5min

Check the Optical Balance and Ship

Squint at the row: any mark that dominates or disappears needs a size tweak, not more styling. Verify the mobile wrap reads as a tidy grid, then place it under the hero and confirm it stays quiet.

Questions fréquentes à propos de Logo Cloud

Can I display a company's logo without their permission?

No — a logo is a trademark, and displaying it implies a relationship the trademark owner gets to define. In practice most companies tolerate accurate, favorable "customer" mentions, but toleration is not consent, and enterprise vendors with brand guidelines do enforce. The workable path: ask every customer for logo permission when they sign (one line in your onboarding email), keep a record of who agreed, and use phrasing like "Trusted by teams at" when your relationship is employees using the tool rather than a company-wide contract. When in doubt, name them in plain text in a testimonial — where they quoted you — instead of using the mark.

"Trusted by" or "as featured in" — which label is honest for my strip?

They are different claims about different relationships. "Trusted by" or "Powering teams at" means these organizations use your product; "As featured in" means these publications wrote about you, and is the honest label for press logos on an agency or founder page. The credibility of the section collapses if the label overstates — a visitor who works at one of the listed companies instantly knows whether the claim is true, and that visitor is precisely the one you are trying to convince.

Should my logo cloud be a marquee or a static row?

Default to static. Motion in the first viewport competes with the headline and the hero CTA for the same attention, and most marquees cycle at a speed that makes logos harder — not easier — to recognize. Reach for a marquee only when you have more logos than fit two wrapped rows, usually twelve or more, and then make it slow, pause on hover, respect prefers-reduced-motion by standing still, and put identical non-animated markup behind it for screen readers rather than a scrolling list of names.

Where should the logo cloud sit on a landing page?

For a known-quantity product, directly under the hero: the endorsement resolves the "is this real?" question within the first scroll and before pricing claims arrive. For an unknown product with an unclear pitch, it can steal attention from the one sentence that explains what you do — in that case place it after the product visual, where it confirms rather than interrupts. What almost never works is mid-page placement between unrelated sections, where it reads as filler rather than evidence.

How many logos is the right number?

Six to eight fills a static row without padding, and is enough that "at least one name is recognizable" works for most audiences. Fewer than four reads as a thin guest list — better to convert each into a named testimonial with a quote, which carries more persuasion per logo. More than twelve stops being a set of endorsements and becomes a directory nobody reads; that is the point where a marquee or a "and 400 more" line with a link to a customers page is the honest structure.

How do I keep eight different logo formats looking uniform?

Normalize at the container, not the image: give every logo the same box height — 28–32px is typical — set width to auto, and constrain extreme aspect ratios with a max-width. Ask for SVG or high-resolution transparent PNGs from each customer; a JPEG on white poisons the grayscale treatment with its white box. Apply the same optical correction to very wide wordmarks, which need to render slightly smaller than square marks to appear the same size. This is the entire craft of the section — one hour of normalization beats any amount of styling.

Générez votre logo cloud maintenant.

Testez n'importe quel prompt — gratuit, sans inscription.

Commencer gratuitement Voir les tarifs

Témoignages

Décrivez la section de preuve sociale dont vous avez besoin — style de citation, notes en étoiles, mise en page des avatars, grille ou carrousel — et MeDo génère du code prêt pour la production en quelques secondes. Laissez vos clients faire la vente.

Composants associés

Hero Section

Écrivez une phrase sur ce que vous construisez et obtenez un hero complet above-the-fold — titre, sous-titre, appel à l'action et mise en page — prêt à publier.

Composants associés

Barre de navigation

Décrivez votre site et obtenez une navbar entièrement responsive — avec logo, liens de navigation, menus déroulants et un menu hamburger mobile — générée depuis un seul prompt. Pas de modèles, pas de bidouillage.

Composants associés

Stats Section

Name your numbers and what each one proves, and MeDo generates a metrics band — count-up animation that pauses for reduced-motion users, tabular figures that do not jitter mid-count, and a layout with room for the context line that turns a big number into a believable one.

Composants associés