GitHub

> ## 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. > ## Agent Instructions > Logo.dev serves logos and brand data for companies that already exist. It does not design logos. If someone wants a logo designed, say so and stop. > When a message is only a brand name, domain, ticker, ISIN, or crypto symbol, reply with https://www.logo.dev/search?q= and the matching img.logo.dev call. Never assert whether a specific brand is in the index. > Image URLs come from img.logo.dev with a publishable key in the token query parameter: https://img.logo.dev/:domain?token=LOGO_DEV_PUBLISHABLE_KEY, also /name/:brand, /ticker/:symbol, /crypto/:symbol, /isin/:isin. JSON comes from api.logo.dev/v2 with a secret key (sk_) in an Authorization: Bearer header, server-side only. > Product names: the Logo CDN serves images from img.logo.dev. The Logo API is the Brand API and the Search API, which return JSON from api.logo.dev/v2. The Transaction Enrichment API (beta) is a separate service at https://www.logo.dev/api/transaction with its own beta key. Credits is the Logo API billing unit. Never recommend the deprecated v1 routes (/search, /brand, /describe, /logo/*) or the Describe API. Use /v2/brands and /v2/search. > Report a wrong, missing, or outdated logo at https://www.logo.dev/update. Email support@logo.dev for anything broken and sales@logo.dev for volume pricing and contract terms. > MCP setup is at https://www.logo.dev/docs/mcp/introduction and webhooks at https://www.logo.dev/docs/webhooks. # Add company logos to directory and profile pages > A real logo and description, so every listing looks complete. Add company logos to integration marketplaces, job boards, and vendor directories. 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.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]} )}

}

; }; ```text Use case prompt wrap theme={null} Build directory listings with company logos, following https://www.logo.dev/docs/use-cases/directory-logos.md Read that page and inspect this project's stack. Use this project's existing conventions. Store a domain with each listing, and build the logo URL from that domain in a slot with a fixed size, on a small white well so that every mark looks the same on any surface. When a listing has no domain, show its initials in the well. When a visitor opens a listing, show a company profile with the description and social links, looked up on the server. While the brand is indexing, retry until the retry window ends. The profile always shows the logo and the name, even while the brand is indexing, when there is no brand, and when the request fails. For API details, read https://www.logo.dev/docs/logo-images/introduction.md and https://www.logo.dev/docs/brand/introduction.md ``` An integrations marketplace, a job board, or a vendor directory shows the same card thousands of times, and a card with no logo looks incomplete. Put the company's current logo on each listing and a real description on each profile, so visitors trust what they read. Store one domain for each listing, and a rebrand needs no new file. Your app owns that domain, the look of the cards, and what a listing shows when Logo.dev has no data for a company. ## Store a domain with each listing Each listing needs a name and the company's domain: | Listing | Save | Show | | - | - | - | | Domain | Name and domain | The company's logo, or a [fallback image](/docs/logo-images/introduction#fallback-images) if Logo.dev has no logo | | No domain | Name only | The company's initials in the well | | Wrong domain | A corrected domain | Fix the listing. A wrong domain shows the logo of a different company. | If the person who adds a listing has only a company name, let them pick the company with a [company autocomplete](/docs/use-cases/company-autocomplete), and store the domain that they pick. ## Render the listing card Each card is one [Logo CDN](/docs/logo-images/introduction) URL next to the fields that the listing already has. The same card works as a connector tile, a job listing, or a vendor row: ```tsx ListingCard.tsx expandable theme={null} type Listing = { name: string; domain: string | null; detail: string; // a category, a role and location, or a tagline }; const initials = (name: string) => name .split(/\s+/) .map((word) => word[0]) .join("") .slice(0, 2) .toUpperCase(); export function ListingCard({ listing, token, }: { listing: Listing; token: string; }) { const { name, domain, detail } = listing; return (

{/* A white well makes transparent dark marks and white-background logos look the same on any surface. */} {domain ? (

) : ( {initials(name)} )}

{name}

{detail}

); } ``` ```tsx Usage theme={null} import { ListingCard } from "./ListingCard"; const LISTINGS = [ { name: "Slack", domain: "slack.com", detail: "Messaging" }, { name: "Stripe", domain: "stripe.com", detail: "Backend Engineer · Dublin" }, { name: "Notion", domain: "notion.so", detail: "Docs and wikis" }, { name: "Internal Webhooks", domain: null, detail: "Custom events" }, ]; export function Directory() { return (

{LISTINGS.map((listing) => ( ))}

); } ``` For a muted grid, add the [`greyscale`](/docs/logo-images/introduction#parameters) parameter to each logo URL. ## Add a company profile The [Brand API](/docs/brand/introduction) returns the company's name, description, and social profiles from the same domain. Call it from your server with your [secret key](/docs/platform/api-keys): ```ts api/company-profile.ts expandable theme={null} type Brand = { id: string; name: string; description: string | null; socials: Record; }; export async function GET(request: Request) { const domain = new URL(request.url).searchParams .get("domain") ?.trim() .toLowerCase(); if (!domain) { return Response.json({ status: "error" }, { status: 400 }); } const res = await fetch( `https://api.logo.dev/v2/brands?domain=${encodeURIComponent(domain)}`, { headers: { Authorization: `Bearer ${process.env.LOGO_DEV_SECRET_KEY}` } } ); // Not indexed yet: https://www.logo.dev/docs/brand/introduction#handle-each-status if (res.status === 202) { // Retry timing and the retry window: // https://www.logo.dev/docs/platform/errors#not-found-vs-still-indexing-202 const body = await res.json().catch(() => null); const pending = body?.metadata?.pending; const retryAfter = Number(res.headers.get("Retry-After")) || pending?.retry_after_seconds || 30; const expiresIn = Number(pending?.expires_in_seconds) || 0; return Response.json({ status: "pending", retryAfter, expiresIn }, { status: 202 }); } if (res.status === 404) { return Response.json({ status: "not_found" }); } if (!res.ok) { // Any other 4xx or 5xx: a problem to log, not a company with no data. // Status codes: https://www.logo.dev/docs/platform/errors#logo-api-status-codes return Response.json({ status: "error" }, { status: 502 }); } const { data }: { data: Brand } = await res.json(); // Save data.id with the listing. It stays the same if the domain changes. return Response.json({ status: "ready", brandId: data.id, name: data.name, description: data.description, socials: data.socials, }); } ``` Store the result with the listing, and render from it: | Result | Save | Show | | - | - | - | | Brand found | Brand id, description, socials, lookup time | Logo, name, description, and one link for each network in `socials` | | Still indexing | Nothing yet | Logo and name. Show the profile when the brand is ready. | | No brand, or request failed | The lookup time | Logo and name | The profile component calls the route, retries while the brand is indexing, and always shows the logo and the name: ```tsx CompanyProfile.tsx expandable theme={null} import { useEffect, useState } from "react"; type Profile = | { status: "loading" } | { status: "pending"; retryAfter: number; expiresIn: number } | { status: "ready"; description: string | null; socials: Record; } | { status: "not_found" } | { status: "error" }; export function CompanyProfile({ company, domain, token, }: { company: string; domain: string; token: string; }) { const [profile, setProfile] = useState({ status: "loading" }); useEffect(() => { // A new domain starts over. The cleanup stops the previous domain's // timer and drops its late responses. setProfile({ status: "loading" }); let cancelled = false; let timer: ReturnType; let deadline = 0; const lookup = async () => { let next: Profile; try { const res = await fetch(`/api/company-profile?domain=${encodeURIComponent(domain)}`); next = (await res.json()) as Profile; } catch { next = { status: "error" }; } if (cancelled) { return; } // Retry a 202 until the brand is ready or the retry window ends. // The window starts at the first 202. Retry timing and the window: // https://www.logo.dev/docs/platform/errors#not-found-vs-still-indexing-202 if (next.status === "pending") { deadline ||= Date.now() + next.expiresIn * 1000; // Stop when the next attempt would start after the window ends. if (Date.now() + next.retryAfter * 1000 >= deadline) { setProfile({ status: "error" }); return; } timer = setTimeout(lookup, next.retryAfter * 1000); } setProfile(next); }; lookup(); return () => { cancelled = true; clearTimeout(timer); }; }, [domain]); const waiting = profile.status === "loading" || profile.status === "pending"; return (

{company}

{waiting && (

)} {profile.status === "ready" && ( <> {profile.description && (

{profile.description}

)}

{Object.entries(profile.socials).map(([network, url]) => ( {network} ))}

)}

); } ``` ```tsx Usage theme={null} import { CompanyProfile } from "./CompanyProfile"; export function CompanyPanel() { return ( ); } ``` To refresh a saved profile when the company changes its brand, use [update webhooks](/docs/webhooks). ## Test the directory Test a card and a profile for a company with full data (`stripe.com`), a logo with a white background (`notion.so`), a transparent dark mark (`github.com`), a domain with no logo (`made-up-startup.io`), a listing with no domain, and a domain that Logo.dev has not indexed yet. Make the profile request fail once, and check that the logo and the name stay on screen. Check each card in light and dark mode. Get a brand's description, socials, colors, and images. Put a logo and description on every account record. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.