A logo cloud for showing which customers or partners use a product. It has a centred heading, one supporting sentence, a grid of eight logos and a link underneath. The logos are placeholder wordmarks for made-up companies, each built from a small inline SVG mark and a name set in a different weight, case or typeface, so the row looks like a real mix of brands. The grid is four columns with hairline dividers on desktop and two columns on phones.
const g = { viewBox: "0 0 24 24", "aria-hidden": true, className: "h-6 w-6 flex-none" } as const;
const logos = [
{ name: "Wrenfield", type: "text-xl font-semibold tracking-tight", mark: <svg {...g} fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="m4 8 8 5 8-5M4 14l8 5 8-5" /></svg> },
{ name: "KETTLEBY", type: "text-sm font-bold tracking-[0.18em] sm:text-base sm:tracking-[0.2em]", mark: <svg {...g} fill="none" stroke="currentColor" strokeWidth="2.5"><circle cx="12" cy="12" r="8" /><circle cx="12" cy="12" r="2.5" fill="currentColor" stroke="none" /></svg> },
{ name: "fathomline", type: "font-serif text-2xl italic", mark: null },
{ name: "Northquay", type: "text-xl font-medium", mark: <svg {...g} fill="currentColor"><path d="M4 20V4h4l8 9.5V4h4v16h-4L8 10.5V20H4Z" /></svg> },
{ name: "driftmark", type: "font-mono text-lg font-semibold", mark: <svg {...g} fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M3 9c3-3 6 3 9 0s6 3 9 0M3 16c3-3 6 3 9 0s6 3 9 0" /></svg> },
{ name: "Quillhaven", type: "font-serif text-xl font-bold", mark: <svg {...g} fill="currentColor"><path d="M12 2 21 7v10l-9 5-9-5V7l9-5Zm0 5-4.5 2.5v5L12 17l4.5-2.5v-5L12 7Z" /></svg> },
{ name: "PALLISADE", type: "text-sm font-light tracking-[0.22em] sm:text-lg sm:tracking-[0.3em]", mark: <svg {...g} fill="currentColor"><path d="M4 4h3v16H4zM10.5 8h3v12h-3zM17 4h3v16h-3z" /></svg> },
{ name: "Lumacore", type: "text-xl font-extrabold tracking-tight", mark: <svg {...g} fill="currentColor"><path d="M12 3a9 9 0 1 0 9 9h-9V3Z" /><path d="M15 3.5V9h5.5A9 9 0 0 0 15 3.5Z" opacity=".5" /></svg> },
];
export default function LogoCloudWithDrawnWordmarks() {
return (
<section className="bg-white px-6 py-16 text-slate-900 sm:py-20">
<div className="mx-auto max-w-5xl">
<div className="mx-auto max-w-2xl text-center">
<h2 className="text-2xl font-semibold tracking-tight sm:text-3xl">The scheduling tool behind 400 field service teams</h2>
<p className="mt-3 leading-relaxed text-slate-600">From two-van plumbing firms to national installers, these companies plan every job with us.</p>
</div>
<ul className="mt-12 grid grid-cols-2 overflow-hidden rounded-2xl border border-slate-200 bg-slate-200 gap-px md:grid-cols-4">
{logos.map((l) => (
<li key={l.name} className="flex h-24 items-center justify-center gap-2.5 bg-white px-3 text-slate-700 sm:h-28">
{l.mark}
<span className={`${l.type} leading-none`}>{l.name}</span>
</li>
))}
</ul>
<p className="mt-8 text-center text-sm text-slate-600">
Want to see how they use it?{" "}
<a href="#" className="inline-flex min-h-[40px] items-center rounded font-semibold text-slate-900 underline decoration-rose-500 decoration-2 underline-offset-4 transition hover:text-rose-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-600 focus-visible:ring-offset-2">
Read the customer stories
</a>
</p>
</div>
</section>
);
}
Install with one command: npx shadcn@latest add https://we.inc/r/logo-cloud-with-drawn-wordmarks.json
A row or grid of customer, partner or press logos, usually under a short line such as Trusted by. It tells a new visitor that organisations they may recognise already use the product.
Between five and eight. Fewer than five can look thin, and more than eight turns into noise. Choose the names your audience is most likely to know.
Give every logo a cell of the same height and centre it, as this grid does with `h-24 flex items-center justify-center`. Then set a maximum height on the logo itself and let the width follow.
One colour is the usual choice, because full-colour logos compete with each other and with your own brand. Use a dark neutral so the names stay readable.
Yes. Ask each company before publishing its logo, and follow its brand guidelines for spacing and colour. Only show companies that really are customers.
The list has a grey background and a one pixel gap (`gap-px`), and every cell is white. The grey shows through the gaps as hairlines, which avoids doubled borders at the edges.
Related: Stats Band with Four Numbers on Dark, Three Column Feature Grid with Icons, Split Hero with Email Capture.
More content sections or all free UI components. Start for free to have a full site built around it.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.