Skip to main content
Frontend Glossary

UI components · Marketing

Logo Wall

Also called: Logo cloud, Trusted by, Client logos, Customer logos

One or a few rows of customer or partner logos on a marketing site, usually in gray, with a line like "Teams using us." It quickly shows who uses the product.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

Add a logo wall below the hero. On top, one line of 14px gray text "Teams already using us." Below it, one row of 6 customer logos, evenly spaced and vertically centered, each 28px tall with automatic width, all in the same gray treatment (filter: grayscale(1), opacity: 0.6), returning to full color on hover. Use the real customer logos I provide (SVG or PNG, with alt set to the company name). Until I provide them, show 6 gray rounded placeholder blocks labeled "Customer logo." Don't use big-name company logos or made-up company names. On mobile, switch to 3 columns and 2 rows.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Logo Wall is what you need.

Use Logo Wall when

  • Below the hero on a marketing site, to quickly show visitors which real customers use the product
  • Partner and integration pages that list the platforms you connect with
  • Event pages that list organizers and sponsors

Pick something else when

  • When you don't have real customers yet, or haven't been given permission to show their logos

  • When you need to explain what results customers got. Use testimonials or case studies.

    Use insteadTestimonial

  • A set of apps or plugins users can click into for details

    Use insteadCard Grid

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    A row of big-name company logos that aren't actually customers and never gave permission

  2. 02

    Logos in all different sizes and colors, some in color and some in black and white, so it looks messy

  3. 03

    Thirty or forty logos at once, so visitors don't remember a single one

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

One line of heading text and a set of same-size company logos, arranged in one row or a multi-row grid. The logos are usually grayscale, and they can also scroll slowly in a horizontal strip.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A logo wall usually sits right below the hero, and sometimes near the testimonials. There's one line of small heading text ("Some of our customers"), then 5–8 logos of the same size in a row, or a grid of two or three rows. The logos are usually gray or single-color so they don't steal attention. With many logos, it's often turned into a slowly scrolling strip.

It's more specific than a plain Image: it's a set of same-size marks whose purpose is endorsement, not showing content. How it differs from a Testimonial: a logo wall only answers "who uses it," while a testimonial tells you what happened after they used it. The two often appear together. How it differs from a Carousel: auto-scrolling logos are just decoration, so there are no dots to click and no need to look at them one by one.

Only show logos of real customers or official partners who have agreed to be shown. Don't borrow big-name logos to pad it out, which can also get you into legal trouble. Keep the heading honest ("Some of our customers," not "Trusted by the Fortune 500"). Give all logos the same height (for example 28–32px) and the same gray treatment, and set each img's alt to the company name. If you don't have customers yet, skip this section.

Developer info
Term ID
component-logo-wall
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • section:is([class*="logos" i], [class*="logo-cloud" i], [class*="logo-wall" i], [class*="trusted" i], [class*="clients" i], [id*="logos" i], [id*="clients" i], [id*="partners" i])
  • :is(div, ul, section):has(> img[alt*="logo" i] ~ img[alt*="logo" i] ~ img[alt*="logo" i])
  • :is(div, ul):has(> :is(li, div, a) > img[alt*="logo" i]):has(> :nth-child(4)):not(nav *, header *)
  • :is(div, ul, section):has(> :is(img, svg)[class*="grayscale"] ~ :is(img, svg)[class*="grayscale"] ~ :is(img, svg)[class*="grayscale"])
  • :is(div, ul):has(> img.object-contain ~ img.object-contain ~ img.object-contain ~ img.object-contain)
Class keywords

Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.

  • logos
  • logo-wall
  • logo-cloud
  • logo-grid
  • logo-strip
  • logo-marquee
  • logo-carousel
  • client-logos
  • partner-logos
  • customer-logos
  • brand-logos
  • trusted-by
Component names

React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.

  • LogoWall
  • LogoCloud
  • LogoGrid
  • Logos
  • LogoMarquee
  • ClientLogos
  • TrustedBy
Structure

Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.

  • starts with heading
  • repeated items
  • grid of items
Priority
4 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 30, 2026