Logo Wall Widget
Show the clients, partners or press that vouch for you in a calm, even grid: up to 24 logos from https image links, each optionally linked, with a neat text wordmark whenever an image is missing or fails. Logos sit in grayscale and turn to colour on hover or keyboard focus.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<iframe src="https://a2z.tools/embed/w/logo-wall" title="Logo Wall by A2Z Tools" width="100%" height="390" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>
A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.
<div data-a2z-widget="logo-wall" data-height="390"></div> <script async src="https://a2z.tools/embed.js"></script>
Adds a small script (what it does) that sizes the widget to fit its content, loads it lazily and keeps it isolated from your page's CSS.
Works with
How it works
Each line is Name | image URL | optional link. The name is required - it becomes the image's alt text and the wordmark if there is no image - while the image must be https because the frame loads nothing else; an http or data: address is ignored and the name is shown instead. If an image fails to load, the wordmark replaces it on the spot. Wordmarks rotate through four neutral treatments (rounded, small caps, serif italic, heavy) with a simple geometric mark so a text-only wall still looks designed. Columns are automatic - as many 118 px tiles as fit, so three across at 480 px and two at 320 px - or fixed at 2 to 6, which collapse to two below 420 px. Grayscale is on by default and can be switched off. A moving row is available with motion=1 but is off by default; it pauses on hover and on keyboard focus, has a visible Pause button, and is never started when the visitor's system asks for reduced motion, in line with WCAG 2.2.2.
Method
- Logo line = Name | https image | link; at most 24 logos from the first 200 lines
- Auto grid = repeat(auto-fit, minmax(118px, 1fr)); fixed = columns 2-6, two columns under 420 px
- Moving row only when motion=1 AND prefers-reduced-motion is not set; one loop takes max(18 s, 4 s x logos)
Worked examples
Default text wall
Inputs: No settings
Result: Caption 'Trusted by teams at' and 8 wordmarks (Alder & Co ... Meridian Supply), 3 per row at 480 px
The fictional sample shown until logos are entered.
Mixed input
Inputs: Acme | https://cdn.example/acme.svg | acme.example; Http | http://cdn.example/x.png
Result: Acme image linked to https://acme.example/; 'Http' shown as a wordmark
The http image is refused because the frame only loads https images.
Fixed columns
Inputs: columns=3 at 320 px
Result: 2 columns
Fixed layouts collapse to two columns below 420 px so names stay readable.
Limitations
- Logos are images or text only; the widget does not fetch logos from a company's domain or a logo service.
- One wall per embed - sponsor tiers need one embed per tier.
- Image links are not checked in advance; a broken image is only detected when a visitor's browser tries to load it.
Where publishers use it
- A SaaS or agency home page band under the hero showing customers' logos
- A conference or meetup page listing sponsors by tier, one wall per tier
- A consultant's credentials section with 'As featured in' press mastheads
- A charity's partners page linking each logo to the partner's site
- A B2B supplier's trade page listing certification bodies and industry associations
Questions
Do I need permission to show client logos?
Usually yes. Most client contracts and trademark rules expect consent before you present a company's logo as an endorsement, and some clients forbid it outright. Get written approval, keep it on file, and remove a logo promptly when a relationship ends - the wall changes as soon as you update the embed code.
Which image format and size work best?
SVG or a transparent PNG/WebP, trimmed tightly to the logo, about 320 x 96 px or larger. Logos display at most 140 x 40 px inside each tile with object-fit: contain, so wide and tall marks both fit without distortion. In dark mode images sit on a pale backing so dark logos stay legible.
Why is the moving row off by default?
Constantly moving content distracts readers and can make people with vestibular disorders unwell. WCAG 2.2 success criterion 2.2.2 requires a way to pause anything that moves automatically for more than five seconds. The static grid also shows every logo at once, which is what a 'trusted by' strip is for. If you turn motion on, hover, keyboard focus and the Pause button all stop it, and visitors who set reduce-motion see the grid.
Where do the logo images load from?
Directly from the https addresses you give, so host them on your own site or CDN. A2Z does not copy or proxy them; if one disappears, its wordmark appears instead of a broken image icon.
How do screen readers announce the wall?
The caption is the figure's caption, each image's alt text is the name you typed, linked logos also say they open in a new tab, and the duplicate copy used by the moving row is hidden from assistive technology and removed from the tab order.
Sources
- Understanding Success Criterion 2.2.2: Pause, Stop, Hide (WCAG 2.2) - W3C Web Accessibility Initiative . Moving content that starts automatically and lasts more than five seconds needs a mechanism to pause, stop or hide it. Checked 2026-10-01.
Cite or recommend this tool
If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.
A2Z Tools Logo Wall https://a2z.tools/embed/logo-wall
<a href="https://a2z.tools/embed/logo-wall">A2Z Tools Logo Wall</a>
[A2Z Tools Logo Wall](https://a2z.tools/embed/logo-wall)
Logo Wall by A2Z Tools - https://a2z.tools/embed/logo-wall
Related widgets
-
An animated band of up to four headline numbers that count up once when they scroll into view.
-
A digital business card with call, email, website and directions buttons plus a .vcf contact download.
-
Up to 12 social profile links recognised by host name, as icons, labels or buttons.
-
A giving card with suggested amounts, an optional monthly switch and a Donate link to your own page.
-
Staff profiles with photo or initials, role, short bio and an email or LinkedIn button, grouped by department.
-
Large Call, Text, Email, WhatsApp and custom-link tap targets in a stack, row or pill bar.