Skip to main content
Slide tools, design apps, and website builders all need the user’s brand, and asking people to upload logo files is where they give up. An import that fills itself from a domain removes that step. A user types their domain, and a tray fills with the square icon, the wide brandmark, social banners, and brand colors. The Brand API returns the whole kit in one request, ready to drop into a canvas.

​
Demo

Pick a brand to fill the asset tray: The brandmark and banner above were fetched once and committed, because the Brand API takes a secret key and its asset URLs can rotate. The square icon loads live from img.logo.dev.

​
Build it with AI

Want this brand import 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 tray is a proxy endpoint, one fetch, and plain images. Add api/brand-assets.ts on the server, then render the tray as the Usage tab shows. 
type Brand = {
  name: string;
  brandmark: string | null;
  social_banners: string[];
  colors: { hex: string }[];
};

export async function GET(request: Request) {
  const domain = new URL(request.url).searchParams
    .get("domain")
    ?.trim()
    .toLowerCase();
  if (!domain) {
    return Response.json({ error: "domain required" }, { status: 400 });
  }

  const res = await fetch(`https://api.logo.dev/brand/${domain}`, {
    headers: { Authorization: `Bearer ${process.env.LOGODEV_SECRET_KEY}` },
  });
  if (!res.ok) {
    return Response.json({ error: "brand lookup failed" }, { status: 502 });
  }

  const brand = (await res.json()) as Brand;
  return Response.json({
    name: brand.name,
    brandmark: brand.brandmark,
    // Some banner entries are blank placeholders with no asset path.
    banners: (brand.social_banners ?? []).filter(
      (url) => new URL(url).pathname.length > 1
    ),
    colors: (brand.colors ?? []).map((c) => c.hex),
  });
}
Your publishable key is built for client-side code, so you can ship it in the browser as-is. Your secret key powers the api/brand-assets.ts proxy and stays on the server.

​
How it works

  • One request returns the kit. GET /brand/:domain from the Brand API carries the name, brandmark, social banners, and color palette together, so the tray fills from a single fetch.
  • Failure still produces an asset. Brandmark and banner URLs do not get the monogram fallback that square icon URLs have, which is why the tray falls back to img.logo.dev/:domain when the kit lookup fails. The user always gets at least one usable asset.
  • Every asset accepts image parameters. Brandmark and banner URLs take the usual size, format, retina, and theme image parameters, so tray thumbnails and full-size inserts come from the same URLs. On white wells, theme=light keeps light wordmarks visible.
  • Banner lists need filtering. Some social_banners entries are blank placeholder URLs with no asset path. The server route drops them so the tray never renders an empty image.

​
Make it your own

  • Make assets insertable. Wire each card to your editor’s insert or drag-and-drop action. The asset URL is all a canvas needs.
  • Theme the document too. Set the deck’s accent from the same palette with the brand colors pattern.
  • Cache the kit. Brand kits change rarely, so cache the server response per domain instead of calling the Brand API on every open.

​
Next steps

Brand API

Get the full response: logo, brandmark, banners, and colors.

Brand colors

Theme generated content with the same palette.