Skip to main content
Job boards, marketplaces, and directories render the same card thousands of times, and every card needs the employer’s logo. At that volume, nobody can collect logos by hand. A candidate scrolls the feed and recognizes employers instantly, even when a listing comes from a company they’ve never heard of. Each logo is a Logo API image URL built from the domain on the listing, so new employers get logos automatically.

​
Demo

Here’s the card rendering four sample listings: The listings are sample data, but every employer logo loads live from img.logo.dev.

​
Build it with AI

Want employer logos on your listing cards? 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 card is one image URL next to fields already on your listing. Paste JobCard.tsx, then render it as the Usage tab shows. The logo slot is a fixed 40px square, so cards keep their height while images load. 
type Job = {
  role: string;
  company: string;
  domain: string;
  location: string;
  posted: string;
};

export function JobCard({ job, token }: { job: Job; token: string }) {
  return (
    <div className="flex items-center gap-3 rounded-xl border border-zinc-950/10 bg-white p-4">
      <img
        alt={`${job.company} logo`}
        className="h-10 w-10 rounded-lg object-contain"
        height={40}
        loading="lazy"
        src={`https://img.logo.dev/${job.domain}?token=${token}&size=40&retina=true&format=webp`}
        width={40}
      />
      <div className="min-w-0">
        <div className="truncate text-sm font-semibold">{job.role}</div>
        <div className="truncate text-xs text-zinc-500">
          {job.company} · {job.location}
        </div>
      </div>
      <span className="ml-auto shrink-0 text-xs text-zinc-400">
        {job.posted}
      </span>
    </div>
  );
}
Your publishable key is built for client-side code, so you can ship it in the browser as-is.

​
How it works

  • Every employer logo is one image URL. img.logo.dev/:domain turns the domain on the listing into a logo, and query parameters set the size and format. See all image parameters.
  • A feed of ten thousand employers never breaks. When Logo.dev doesn’t have a logo, it returns a generated monogram instead of a broken image, so there are no per-company checks. See fallback images.
  • The CDN absorbs the volume. Logos are cached and served like any other image, so rendering the same card thousands of times costs normal image requests.
  • The card is plain markup. Logos load as cards scroll into view and the image slot keeps a fixed size, so the feed never jumps. The component above carries the details.

​
Make it your own

  • Reuse the card for any company list. Swap the job fields for a one-line description and the same card serves VC portfolios and directories.
  • Resolve employers without domains. Let posters pick their company with the autocomplete, or look up logos by name.
  • Restyle the logos. Add &greyscale=true for a uniform feed or &theme=dark for dark backgrounds. See all image parameters.

​
Next steps

Logo API

Browse every image URL parameter: size, format, theme, greyscale, and fallbacks.

Integration logos

Build the tile-based version for app marketplaces.