> ## Documentation Index > Fetch the complete documentation index at: https://www.logo.dev/docs/llms.txt > Use this file to discover all available pages before exploring further. # Add company logos to job listings > Give every listing an employer logo that loads from the domain on the record. Long feeds stay clean even when a company has no logo on file. export const JobBoardDemo = () => { const TOKEN = "live_6a1a28fd-6420-4492-aeb0-b297461d9de2"; const SOCIAL_ICONS = { github: , linkedin: , twitter: , youtube: , facebook: , instagram: }; const JOBS = [{ role: "Senior Product Designer", company: "Figma", domain: "figma.com", location: "Remote", posted: "2h ago", description: "The collaborative design platform for building products: design, prototype, and gather feedback in one place.", socials: { facebook: "https://www.facebook.com/figmadesign", instagram: "https://www.instagram.com/figma", linkedin: "https://linkedin.com/company/figma", twitter: "https://twitter.com/figma", youtube: "https://www.youtube.com/@Figma" } }, { role: "Backend Engineer", company: "Stripe", domain: "stripe.com", location: "Dublin", posted: "5h ago", description: "A financial services platform to accept payments, build billing, and manage money movement.", socials: { github: "https://github.com/stripe", linkedin: "https://linkedin.com/company/stripe", twitter: "https://x.com/stripe", youtube: "https://www.youtube.com/@stripe" } }, { role: "Growth Marketer", company: "Notion", domain: "notion.so", location: "New York", posted: "1d ago", description: "The AI workspace where teams build agents, search across apps, and automate busywork.", socials: { linkedin: "https://linkedin.com/company/notionhq", twitter: "https://twitter.com/NotionHQ" } }, { role: "Operations Lead", company: "Airbnb", domain: "airbnb.com", location: "Dublin", posted: "2d ago", description: null, socials: {} }]; const [openDomain, setOpenDomain] = useState(null); const openJob = JOBS.find(job => job.domain === openDomain) ?? null; const logoSrc = (domain, size) => `https://img.logo.dev/${domain}?token=${TOKEN}&size=${size}&retina=true&format=webp`; const toggle = domain => setOpenDomain(current => current === domain ? null : domain); return
{openJob &&
{`${openJob.company}
{openJob.company}
{openJob.domain}
{openJob.description &&
{openJob.description}
} {Object.keys(openJob.socials).length > 0 &&
{Object.entries(openJob.socials).filter(([network]) => SOCIAL_ICONS[network]).map(([network, url]) => {SOCIAL_ICONS[network]} )}
}
}
; }; 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 every card shows its employer's logo, even listings from companies they've never heard of. Each logo is a [Logo API](/docs/logo-images/introduction) 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`. Select a listing to open a company card with the employer's description and social links. ## Build it with AI Build a job listing card with employer logos using Logo.dev. * Render a card showing the employer's logo, role title, company name, location, and posting age. The card repeats for every listing in a long feed. * Logos are plain image URLs built from the employer's domain: [https://img.logo.dev/:domain?token=LOGO\_DEV\_PUBLISHABLE\_KEY\&size=40\&retina=true\&format=webp](https://img.logo.dev/:domain?token=LOGO_DEV_PUBLISHABLE_KEY\&size=40\&retina=true\&format=webp) * Give the logo fixed 40px dimensions so cards keep their height while images load. * Domains without a logo return a generated monogram automatically, so the feed never shows a broken image. * Lazy-load the logos so infinite-scroll feeds only fetch what's visible. * Use a Logo.dev publishable key (safe in client code), never a secret key. * Reference implementation: [https://www.logo.dev/docs/use-cases/job-board-logos](https://www.logo.dev/docs/use-cases/job-board-logos) ## 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. ```tsx JobCard.tsx theme={null} type Job = { role: string; company: string; domain: string; location: string; posted: string; }; export function JobCard({ job, token }: { job: Job; token: string }) { return (
{`${job.company}
{job.role}
{job.company} · {job.location}
{job.posted}
); } ``` ```tsx Usage theme={null} import { JobCard } from "./JobCard"; export function Listings() { return ( ); } ``` Your [publishable key](/docs/platform/api-keys) 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](/docs/logo-images/introduction#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](/docs/logo-images/introduction#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](/docs/use-cases/integration-logos). * **Resolve employers without domains.** Let posters pick their company with the [autocomplete](/docs/use-cases/company-autocomplete), or look up logos [by name](/docs/use-cases/logo-from-name). * **Restyle the logos.** Add `&greyscale=true` for a uniform feed or `&theme=dark` for dark backgrounds. See all [image parameters](/docs/logo-images/introduction#parameters). ## Go further: build a company card The domain that loads a logo can also pull a description and social profiles. Resolve the employer once by name, then show that brand data on a company card next to the listing. You can turn a company name into full brand data with one server route. It calls the [Search API](/docs/brand-search/introduction) to resolve the name to a domain, then the [Brand API](/docs/brand/introduction) to read the description, brand colors, and social profiles. Both use your [secret key](/docs/platform/api-keys), and the Brand API is on every plan, metered in credits. The code runs on your server, so the browser only ever receives the finished result. ```ts api/enrich-company.ts theme={null} const BASE = "https://api.logo.dev"; const headers = { Authorization: `Bearer ${process.env.LOGO_DEV_SECRET_KEY}` }; // Resolve a typed company name to a domain, then enrich it with brand data. export async function GET(request: Request) { const q = new URL(request.url).searchParams.get("q")?.trim(); if (!q) { return Response.json(null); } // 1. Resolve the name to a domain with the Search API. const search = await fetch(`${BASE}/search?q=${encodeURIComponent(q)}`, { headers, }); const [match] = search.ok ? await search.json() : []; if (!match) { return Response.json(null); } // 2. Enrich the domain with the Brand API. const res = await fetch(`${BASE}/brand/${match.domain}`, { headers }); // Brand returns 202 while it indexes a domain for the first time. Pass that // signal through so the client can retry instead of caching empty brand data. if (res.status === 202) { return Response.json( { name: match.name, domain: match.domain, pending: true }, { status: 202 } ); } // A 401, 402, or 403 is an integration problem, not a sparse record. Pass the // status through so the client can act on it instead of showing empty fields. if (!(res.ok || res.status === 404)) { return Response.json({ error: "brand lookup failed" }, { status: res.status }); } const brand = res.ok ? await res.json() : null; // A known domain can still come back sparse, so return the name and domain // either way and let the logo stand in until the rest fills in. return Response.json({ name: match.name, domain: match.domain, description: brand?.description || null, colors: brand?.colors ?? [], socials: brand?.socials ?? {}, }); } ``` The browser never sees your secret key. It calls `/api/enrich-company?q=...` and builds the logo URL from the returned domain with your [publishable key](/docs/platform/api-keys). Every call to this route spends your account's Credits, so put it behind your own authentication and cache results by domain before you expose it to end users. On the card, render the returned `description` and the social links in `socials`. Only the networks present in the response render, so an employer with two profiles shows two icons and one with five shows five. Employers with no brand data on file still show their logo and name. The [Brand API](/docs/brand/introduction) returns both fields, keyed off the domain the Search API resolved. ## Next steps Browse every image URL parameter: size, format, theme, greyscale, and fallbacks. Build the tile-based version for app marketplaces.