Web apps & React

HTML

<img src="https://img.brandmarks.dev/logos/v1/mark/AAPL.svg"
     alt="Apple" width="64" height="64" loading="lazy"
     style="object-fit:contain" />

React with a beta publishable key

export function CompanyLogo({ id, name, publishableKey }) {
  const url = new URL(
    `https://brandmarks-api.brandmarks-web.workers.dev/v1/logo/${encodeURIComponent(id)}`
  );
  url.searchParams.set("token", publishableKey);
  url.searchParams.set("variant", "auto");
  return <img src={url.href} alt={name} width={64} height={64}
    loading="lazy" style={{ objectFit: "contain" }} />;
}

Keep a text label visible if loading fails, and add an application-owned placeholder if required. Search by name through your own backend, where the secret key stays private. A pk_ key is designed to appear in browser URLs.

This uses a standard image element and works without a Brandmarks SDK. Framework image optimizers can have their own host allowlists and SVG restrictions; the basic image element above avoids requiring an optimizer configuration.