Profiles & directory

A list full of gray placeholder avatars reads as unfinished. The same list with every company’s real logo reads as authoritative, and it’s the difference between a text database and a product people trust. Whether the records are CRM accounts, job listings, or a wall of customer logos, the pattern is the same two tiers: the Logo API covers every list view with a plain <img> tag, and the Brand API fills detail views with colors, descriptions, and firmographics.

Company directory

CRMs and B2B directories are easier to scan when every account shows the company’s real logo instead of a generic placeholder. For a list of accounts, an <img> pointed at the Logo API is enough, no fetch, no loading state.

Preview
Code

AccountList.tsx

const CLIENT_ID = "YOUR_CLIENT_ID"; // free client ID from developers.brandfetch.com/register

const ACCOUNTS = [
  { domain: "shopify.com", name: "Shopify", meta: "shopify.com · 12,000 employees" },
  { domain: "stripe.com", name: "Stripe", meta: "stripe.com · 8,000 employees" },
  { domain: "dropbox.com", name: "Dropbox", meta: "dropbox.com · 2,600 employees" },
  { domain: "linear.app", name: "Linear", meta: "linear.app · 60 employees" },
];

export function AccountList() {
  return (
    <div className="flex w-full max-w-[360px] flex-col gap-0.5">
      {ACCOUNTS.map((acc) => (
        <div
          key={acc.domain}
          className="flex cursor-pointer items-center gap-3 rounded-[10px] px-3 py-2.5 transition-colors duration-150 hover:bg-[#6363631f]"
        >
          <img
            src={`https://cdn.brandfetch.io/domain/${acc.domain}/w/80/h/80/fallback/lettermark?c=${CLIENT_ID}`}
            alt={`${acc.name} logo`}
            className="h-10 w-10 shrink-0 rounded-lg"
          />
          <div>
            <div className="font-semibold">{acc.name}</div>
            <div className="text-[13px] text-[#6b7280]">{acc.meta}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

Want logo-branded account lists in your app? This prompt gives your AI coding tool everything it needs to build it in your framework.

Open in Cursor

Card grid with hover lift

On grid-based boards, wrap the same data in a card and add a subtle lift on hover so the grid feels responsive to the cursor.

Preview
Code

JobCardGrid.tsx

const CLIENT_ID = "YOUR_CLIENT_ID"; // free client ID from developers.brandfetch.com/register

const JOBS = [
  { domain: "dropbox.com", title: "Product Designer", company: "Dropbox · SF" },
  { domain: "vercel.com", title: "DevRel Engineer", company: "Vercel · Remote" },
  { domain: "shopify.com", title: "Growth Marketer", company: "Shopify · NYC" },
  { domain: "stripe.com", title: "Backend Engineer", company: "Stripe · Remote" },
  { domain: "linear.app", title: "Product Manager", company: "Linear · Remote" },
  { domain: "airbnb.com", title: "Data Scientist", company: "Airbnb · Dublin" },
];

export function JobCardGrid() {
  return (
    <div className="grid w-full grid-cols-2 gap-3.5 sm:grid-cols-3">
      {JOBS.map((job) => (
        <div
          key={job.title}
          className="cursor-pointer rounded-xl border border-[#63636333] bg-white p-4 transition duration-150 hover:-translate-y-1 hover:shadow-[0_12px_24px_#0000001f] dark:bg-[#1c1d1f]"
        >
          <img
            src={`https://cdn.brandfetch.io/domain/${job.domain}/w/72/h/72/fallback/lettermark?c=${CLIENT_ID}`}
            alt={`${job.domain} logo`}
            className="h-9 w-9 rounded-lg"
          />
          <div className="mb-0.5 mt-3 text-sm font-semibold">{job.title}</div>
          <div className="text-xs text-[#6b7280]">{job.company}</div>
        </div>
      ))}
    </div>
  );
}

Want an animated job card grid in your app? This prompt gives your AI coding tool everything it needs to build it in your framework.

Open in Cursor

Customer logos

The trick to a tidy wall is a uniform grid: each logo sits centered in an equal-size cell and is capped to the same height, so brands with very different aspect ratios still line up. A fixed column count keeps every row full, no stray logo stranded on its own.

Preview
Code

CustomerLogos.tsx

const CLIENT_ID = "YOUR_CLIENT_ID"; // free client ID from developers.brandfetch.com/register

const DOMAINS = [
  "airbnb.com", "github.com", "google.com", "intel.com",
  "okta.com", "canva.com", "attio.com", "linkedin.com",
];

export function CustomerLogos() {
  return (
    <div className="grid w-full grid-cols-2 gap-2 sm:grid-cols-4">
      {DOMAINS.map((domain) => (
        <div
          key={domain}
          className="flex h-16 items-center justify-center rounded-xl"
        >
          {/* theme/dark returns the dark-on-light logo; invert it to white in dark mode */}
          <img
            src={`https://cdn.brandfetch.io/domain/${domain}/h/112/w/240/theme/dark/type/logo?c=${CLIENT_ID}`}
            alt={`${domain} logo`}
            className="block max-h-8 w-auto max-w-[60%] object-contain dark:brightness-0 dark:invert"
          />
        </div>
      ))}
    </div>
  );
}

Want a customer logo wall (logo grid) in your app? This prompt gives your AI coding tool everything it needs to build it in your framework.

Open in Cursor

Animated logos

A 6×3 grid where every tile flips in 3D on its Y axis to reveal a second brand on the back face, staggered on a diagonal so the wall ripples rather than flipping in unison.

Preview
Code

FlipWall.tsx

const CLIENT_ID = "YOUR_CLIENT_ID"; // free client ID from developers.brandfetch.com/register

const POOL = [
  "framer.com", "netflix.com", "airbnb.com", "uber.com", "lyft.com", "doordash.com",
  "tiktok.com", "snapchat.com", "producthunt.com", "reddit.com", "twitch.tv", "linkedin.com",
  "discord.com", "medium.com", "google.com", "microsoft.com", "apple.com", "amazon.com",
  "meta.com", "adobe.com", "salesforce.com", "nvidia.com", "samsung.com", "sony.com",
  "x.com", "slack.com", "vimeo.com", "dribbble.com", "stripe.com", "github.com",
  "gitlab.com", "dropbox.com", "zoom.us", "asana.com", "trello.com", "atlassian.com",
];

const src = (d: string) =>
  `https://cdn.brandfetch.io/domain/${d}/type/icon/w/112/h/112/fallback/lettermark?c=${CLIENT_ID}`;

export function FlipWall() {
  const tiles = Array.from({ length: 18 }, (_, i) => {
    const row = Math.floor(i / 6);
    const col = i % 6;
    return { a: POOL[i], b: POOL[i + 18], d: -((row + col) * 0.35), i };
  });

  return (
    <div className="grid gap-6" style={{ gridTemplateColumns: "repeat(6, 44px)" }}>
      <style>{`
        @keyframes bf-flip {
          0%, 42%  { transform: rotateY(0deg); }
          50%, 92% { transform: rotateY(180deg); }
          100%     { transform: rotateY(360deg); }
        }
      `}</style>
      {tiles.map(({ a, b, d, i }) => (
        <div key={i} style={{ perspective: "700px" }} className="h-11 w-11">
          <div
            className="relative h-full w-full"
            style={{
              transformStyle: "preserve-3d",
              animationName: "bf-flip",
              animationDuration: "6s",
              animationTimingFunction: "ease-in-out",
              animationIterationCount: "infinite",
              animationDelay: `${d}s`,
            }}
          >
            <img src={src(a)} alt={a} className="absolute inset-0 h-full w-full rounded-xl object-contain" style={{ backfaceVisibility: "hidden", WebkitBackfaceVisibility: "hidden" }} />
            <img src={src(b)} alt={b} className="absolute inset-0 h-full w-full rounded-xl object-contain" style={{ backfaceVisibility: "hidden", WebkitBackfaceVisibility: "hidden", transform: "rotateY(180deg)" }} />
          </div>
        </div>
      ))}
    </div>
  );
}

Want an animated logo grid that 3D-flips between brands? This prompt gives your AI coding tool everything it needs to build it in your framework.

Open in Cursor

Infinite scroll marquee

An auto-scrolling row loops seamlessly, letting you show two or three times as many logos in the same footprint, useful for long partner lists. Using the square icon variant keeps every mark colorful and the same size, so the row reads as one clean band.

Preview
Code

LogoMarquee.tsx

const CLIENT_ID = "YOUR_CLIENT_ID"; // free client ID from developers.brandfetch.com/register

const DOMAINS = [
  "shopify.com", "airbnb.com", "nike.com", "discord.com", "slack.com",
  "stripe.com", "dropbox.com", "reddit.com", "medium.com", "meta.com",
];

export function LogoMarquee() {
  const track = [...DOMAINS, ...DOMAINS]; // duplicate so the loop has no seam

  return (
    <div className="bf-marquee-fade w-full max-w-[520px] overflow-hidden">
      <style>{`
        .bf-marquee-fade { -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent); mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent); }
        .bf-marquee-track { animation: bf-scroll 22s linear infinite; }
        .bf-marquee:hover .bf-marquee-track { animation-play-state: paused; }
        @keyframes bf-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
      `}</style>
      <div className="bf-marquee">
        <div className="bf-marquee-track flex w-max items-center gap-6 py-2">
          {track.map((domain, i) => (
            <img
              key={i}
              src={`https://cdn.brandfetch.io/domain/${domain}/type/icon/w/80/h/80/fallback/lettermark?c=${CLIENT_ID}`}
              alt={`${domain} logo`}
              className="h-10 w-10 shrink-0 rounded-xl"
            />
          ))}
        </div>
      </div>
    </div>
  );
}

Want an auto-scrolling logo marquee in your app? This prompt gives your AI coding tool everything it needs to build it in your framework.

Open in Cursor

Inline logo swap

A single rotating slot works inline too, drop it into a headline or a “trusted by” line to cycle a marquee brand through the sentence.

Preview
Code

InlineLogoSwap.tsx

const CLIENT_ID = "YOUR_CLIENT_ID"; // free client ID from developers.brandfetch.com/register

const DOMAINS = ["airbnb.com", "slack.com", "discord.com", "linear.app", "stripe.com"];

const src = (d: string) =>
  `https://cdn.brandfetch.io/domain/${d}/type/icon/w/96/h/96/fallback/lettermark?c=${CLIENT_ID}`;

export function InlineLogoSwap() {
  return (
    <div className="flex items-center gap-3 text-lg font-medium">
      <style>{`
        @keyframes bf-logocycle {
          0%   { opacity: 1; transform: scale(1); }
          15%  { opacity: 1; transform: scale(1); }
          20%  { opacity: 0; transform: scale(0.9); }
          95%  { opacity: 0; transform: scale(0.9); }
          100% { opacity: 1; transform: scale(1); }
        }
      `}</style>
      <span>Trusted by</span>
      <span className="relative inline-block h-9 w-9 align-middle">
        {DOMAINS.map((d, i) => (
          <img
            key={d}
            src={src(d)}
            alt={d}
            className="absolute inset-0 h-9 w-9 rounded-lg object-contain"
            style={{
              animationName: "bf-logocycle",
              animationDuration: "10s",
              animationTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
              animationIterationCount: "infinite",
              animationDelay: `${-(i * 2)}s`,
            }}
          />
        ))}
      </span>
      <span>and 20,000+ teams</span>
    </div>
  );
}

Want an inline logo that rotates through brands inside a headline? This prompt gives your AI coding tool everything it needs to build it in your framework.

Open in Cursor

Implementation

Key every record by domain

The domain is the identifier that makes everything else work. If your data only has company names, match them to domains first with the Brand Search API.

Lists: Logo API

For rows, cards, and avatars, point an <img> at the CDN, no fetch, no loading state, and fallback/lettermark guarantees a clean monogram for brands not yet in the dataset.

https://cdn.brandfetch.io/domain/{domain}/w/40/h/40/fallback/lettermark?c=YOUR_CLIENT_ID

Detail views: Brand API

When a user opens a record, fetch the full brand server-side for the description, accent color, and firmographics, and cache it by domain so repeat visits are free.

curl "https://api.brandfetch.io/v2/brands/domain/stripe.com" \
  --header "Authorization: Bearer YOUR_API_KEY"

Pricing

List views cost nothing, the Logo API is free with a client ID. Detail views cost one Brand API brand fetch per company, and domain-level caching means each company is fetched once, not once per viewer. See plans for quotas.

Going further

Logo API parameters

Sizing, type, theme, and fallback options for every logo.

Brand API reference

The full record: logos, colors, images, and firmographics for detail views.

Get started

Create a free account and start building.

Use cases

Sales & ABM

Product & PLG

Finance

AI Workflows

Profiles & directory

Company directory

Card grid with hover lift

Customer logos

Animated logos

Infinite scroll marquee

Inline logo swap

Implementation

Pricing

Going further

Logo API parameters

Brand API reference

Get started

​Company directory

​Card grid with hover lift

​Customer logos

​Animated logos

​Infinite scroll marquee

​Inline logo swap

​Implementation

​Pricing

​Going further

Logo API parameters

Brand API reference

Get started

Company directory

Card grid with hover lift

Customer logos

Animated logos

Infinite scroll marquee

Inline logo swap

Implementation

Pricing

Going further