Skip to main content
A trusted-by section sells with recognition, so it needs the wide, rectangular version of each logo. Square icons alone read like a row of app tiles, while full wordmark lockups read like endorsements. A visitor scrolling your landing page sees an even row of familiar wordmarks in the right theme. You feed the wall customer domains, and the Brand API returns each wide lockup in its brandmark field. There are no SVGs to collect, host, or update.

​
Demo

Switch the docs theme and the wall swaps every logo to its theme=dark variant: Each logo is a Brand API brandmark, fetched once and committed because the API takes a secret key and its asset URLs can rotate.

​
Build it with AI

Want this customer wall in your app? This prompt gives your AI coding tool everything it needs to build it in your framework.

Open in Cursor

​
Code

This example is in React, but you can get the same result in any frontend framework: the wall is stored brandmark URLs rendered as plain images. Fetch each brandmark once with get-brandmarks.ts, store the URL, and render the wall as the Usage tab shows. 
type Brand = { name: string; brandmark: string | null };

export async function getBrandmark(domain: string) {
  const res = await fetch(`https://api.logo.dev/brand/${domain}`, {
    headers: { Authorization: `Bearer ${process.env.LOGODEV_SECRET_KEY}` },
  });
  if (!res.ok) {
    return null;
  }
  const brand = (await res.json()) as Brand;
  // brandmark is null when a brand has no wordmark asset.
  return brand.brandmark;
}
Your publishable key is built for client-side code, so you can ship it in the browser as-is. Your secret key powers the get-brandmarks.ts fetch and stays on the server.

​
How it works

  • The brandmark is the wide lockup. GET /brand/:domain from the Brand API returns the rectangular version that customer walls are made of. For most brands that is the icon and wordmark together; for brands whose official logo is pure type, it is the wordmark.
  • A failed asset falls back to the square icon. Brandmark URLs do not get the monogram fallback that square logo URLs have, which is why the component falls back to the icon URL. The chain runs brandmark, then icon, then monogram, so the wall never shows a broken image.
  • Theme variants keep wordmarks legible. Append theme=dark for dark backgrounds, and use the usual size, retina, and format image parameters on any brandmark URL.
  • Each slot handles its own polish. A skeleton holds the space, the logo fades in, and a per-logo optical height keeps the rows reading evenly.

​
Make it your own

  • Handle missing brandmarks at fetch time. Some brands return brandmark: null from the Brand API. Skip them or store the square icon URL instead.
  • Mute the wall. Append &greyscale=true to every URL for the classic monochrome treatment. See all image parameters.
  • Animate it. Use the animated logo wall for a wall that swaps logos over time.

​
Next steps

Brand API

Get the full brand profile: logo, brandmark, banners, and colors.

Animated logo wall

Make the wall swap logos over time.