# ClearLogo.dev — Full Documentation > This file concatenates all canonical English documentation pages so AI agents can ingest the full corpus in a single fetch. --- # Quickstart > ClearLogo is an HTTP API that returns a clean, ratio-fit, transparent-background logo image for any domain via a single GET request. No login is required for low-volume browsing; production traffic uses a browser key or a server key. ## 1. Try without a key The endpoint is open for low-volume browsing. Drop in a domain and you get a PNG back immediately. ``` GET https://api.clearlogo.dev/logo/github.com?size=128&content=80 ``` Or drop it straight into HTML: ```html GitHub ``` ## 2. Get a key for production Create one from the dashboard. Pick a mode based on where the request runs: - **Browser key** — Drop it straight into `` tags. Calls are checked against the domains you allow on the key. - **Server key** — Send it as `Authorization: Bearer …`. Keep it in your backend — never ship it to a browser. [Sign in to create a key](https://clearlogo.dev/login?lang=en#cta=sign_in_create_key) ## 3. Tune the output Three knobs control most results: `size`, `content` (logo footprint inside the canvas), and `theme` (light or dark variant). [Open the playground](https://clearlogo.dev/en/docs/playground) to preview combinations before you copy the final URL. ## Next steps - [Playground](https://clearlogo.dev/en/docs/playground) — Try every option live and copy the exact URL you'll ship. - [Get an API key](https://clearlogo.dev/login?lang=en#cta=get_api_key_card) — Sign in and create a public or secret key for production traffic. - [API reference](https://clearlogo.dev/en/docs/api) — See the endpoint, parameters, auth modes, and rate-limit behavior. --- # API reference > ClearLogo exposes a single HTTP endpoint, `GET /logo/{domain}`, that returns a PNG (or WebP/JPEG) of the domain's logo with consistent ratio and transparent background. Anonymous use works for low-volume testing; production traffic uses a browser key (client) or server key (backend). ## Endpoint ``` GET https://api.clearlogo.dev/logo/:domain ``` `:domain` is a bare hostname with no scheme or path, for example `github.com`. The API returns `image/png` by default. ## Query parameters | Name | Type | Default | Notes | | --- | --- | --- | --- | | `size` | number | `128` | Output dimension in px. Square only. Allowed values: 16, 32, 48, 64, 96, 128, 192, 256, 512, 1024. | | `content` | number | `80` | Logo footprint as % of the canvas (50–100, step 5). `50` = padded with visible margin; `100` = fills edge to edge. | | `format` | `png \| webp \| jpeg` | `png` | Output format. Auto-negotiated from the `Accept` header when omitted — modern browsers receive WebP automatically via ``. | | `theme` | `light \| dark` | `light` | Returns the dark variant when available, otherwise falls back to light. | | `token` | string | — | Browser key used from client code. Origin or Referer must match an allowed domain on the key. | ## Authentication Anonymous requests work for low-volume testing. For production traffic, use a browser key (client) or a server key (backend): **Browser** ```html ``` **Server** ```bash curl \ -H "Authorization: Bearer YOUR_SERVER_KEY" \ "https://api.clearlogo.dev/logo/example.com" ``` ## Rate limits Per-key limits are returned in `X-RateLimit-*` headers. When you exceed them the API responds with `429` and includes a `Retry-After` hint. ## FAQ ### How do I get a logo for a domain? Send a GET request to `https://api.clearlogo.dev/logo/{domain}` where `{domain}` is a bare hostname like `github.com`. No login is required for low-volume testing. The response is a PNG by default and works directly in `` tags. ### What's the difference between a browser key and a server key? A browser key is safe to ship in frontend code and `` tags; requests are validated against the allowed domains you configure on the key. A server key authenticates via the `Authorization: Bearer` header from your backend and must never reach the browser. ### What output formats are supported? `png` (default), `webp`, and `jpeg`. When the `format` parameter is omitted, ClearLogo content-negotiates from the `Accept` request header — modern browsers receive WebP automatically when the API is loaded via an `` tag. ### What are the rate limits? Per-key limits are returned in `X-RateLimit-Limit`, `X-RateLimit-Remaining`, and `X-RateLimit-Reset` response headers. Exceeding the limit returns HTTP `429` with a `Retry-After` hint indicating how many seconds to wait before retrying. ### Can I get a transparent background or a square crop? The API returns a transparent background by default and always crops to a square canvas. Use the `size` parameter (allowed: 16, 32, 48, 64, 96, 128, 192, 256, 512, 1024) for the exact pixel dimension and `content` (50–100, step 5) to control how much of the canvas the logo occupies. --- # A Clearbit Logo API alternative for teams that need usable UI output > The Clearbit Logo API is gone. The harder problem isn't replacing the URL — it's getting a logo that already looks right inside dashboards, tables, CRMs, and browser apps without per-brand grooming. ## What changed Once the old Clearbit endpoint disappeared, teams looking for the fastest drop-in replacement quickly hit the second problem: raw logo assets still arrive with inconsistent whitespace, background treatment, and framing. ## Why another logo file source is not enough Product UI rarely breaks because a logo is missing — it breaks because every logo looks different inside the same table, card, or directory. The last mile matters: padding, crop, background, and browser usage. ## What to look for in a replacement - **Background handling** — preserve a brand background when it exists, not just transparent-by-default output. - **Consistent framing** — every logo should fit predictably inside the same UI slot. - **Browser-safe usage** — you should not need a server just to place a logo in an `` tag. - **Migration speed** — a new vendor is only useful if you can test domains and ship quickly. ## Where ClearLogo fits ClearLogo takes a domain and returns a background-aware, auto-cropped, ratio-fit result optimized for visual consistency across product surfaces. ### A simple browser-friendly shape ```html Example company logo ``` ## 3-step migration 1. **Test a few representative domains** in the [playground](https://clearlogo.dev/en/docs/playground). 2. **Choose the URL shape** you want for your UI. 3. **Create a production key** and lock its allowed domains down. ## FAQ ### Is the Clearbit Logo API still available? No. Teams that relied on it need a replacement that produces consistent, UI-ready output — not just logo retrieval. ### How is ClearLogo different from a generic logo file source? ClearLogo is opinionated about presentation: it returns background-aware, auto-cropped, ratio-fit images so the result looks consistent across an entire UI slot — not just transparent PNGs that still need per-brand grooming. ### Can I use ClearLogo directly in `` tags from frontend code? Yes. Create a browser key from the dashboard, allow the domains your app runs on, and drop the URL straight into `` tags. No server-side signing service is required. ### How quickly can I migrate? Most teams test five to ten representative domains in the playground in a few minutes, pick the URL shape, then create a production key. --- # What developers should actually care about in a company logo API > Most logo APIs solve retrieval. The harder problem is presentation: dashboards, CRMs, and account lists stay visually consistent only when every logo arrives background-aware, auto-cropped, and ratio-fit. ## The four things that actually matter - **Background handling** — when a brand background exists, the output should respect it. - **Whitespace and crop** — logos should not waste space or feel off-center. - **Ratio consistency** — one UI slot should not produce a different visual weight for every brand. - **Integration path** — browser apps need a flow that works without forcing a server into the loop. ## Where ClearLogo is opinionated ClearLogo prioritizes usable output and a browser-friendly public-key flow, making it a strong fit for dashboards, CRMs, enrichment tools, and internal product surfaces. ### Example request ``` GET https://api.clearlogo.dev/logo/example.com?size=128&content=80 ``` ```html Example company logo ``` ## Best fit use cases - Company tables and directories - CRM and sales tooling - Account lists inside dashboards - Browser apps that need logo URLs without a custom signing service ## FAQ ### What does "background-aware" output mean? ClearLogo detects whether a brand's logo expects a colored or dark background and preserves that background in the response — instead of always returning a transparent PNG that may look broken on light surfaces. ### Do I need a backend to use ClearLogo? No. A browser key authorizes requests via `Origin`/`Referer` matching, so you can drop URLs directly into `` tags. Use a server key only for bearer-token authentication. ### What logo formats does ClearLogo return? PNG by default; `webp` and `jpeg` via the `format` parameter or `Accept` header. Modern browsers receive WebP automatically. ### When should I pick ClearLogo over a generic logo source? When logos sit beside each other in a UI slot — dashboards, CRMs, account lists, enrichment surfaces — ratio-fit and background handling are the differentiators. --- # Can you legally use company logos in your product? > Showing a company's logo inside your product is, in most common cases, allowed — but the boundary depends on **how** you display it, not whether you display it. This FAQ explains the practical rules teams actually run into when rendering logos in dashboards, customer lists, marketplaces, and B2B UIs. > > _This page is general information, not legal advice. Talk to a lawyer about your specific use case before launching anything user-facing._ ## Quick answer In most B2B product contexts — customer lists, directories, integrations pages, dashboards, search results, news aggregators — using a company's logo to **identify that company** is generally accepted under two legal doctrines: - **Trademark law** allows *nominative use*: using a mark to refer to the actual product, company, or service it represents. - **Copyright law** generally doesn't apply to simple logos at all, and where it does, the use is usually de minimis or fair. The cases where you get into trouble are different: making it look like the company **endorses** you, **modifying** the logo, using it as your **own branding**, or using it in **paid advertising** without permission. ## Trademark vs. copyright: which one actually applies? Both can apply to a logo, but they protect different things. ### Trademark A trademark protects a brand identifier. The legal question is always *"does this use cause consumer confusion about the source?"* If you list "Acme Corp" with Acme's logo in a directory of customers, no reasonable consumer thinks Acme made the directory. That's nominative use. If you put Acme's logo on a t-shirt and sell it, a consumer might think Acme made or licensed the shirt. That's infringement. ### Copyright Copyright protects creative expression. Simple wordmarks and geometric logos often don't meet the originality threshold at all; complex illustrated logos can. Even where copyright applies, rendering a small thumbnail to identify a company is usually fair use — transformative purpose, low resolution, and no market impact. ## When you generally can use a company's logo These uses are common and well-established: - **Identifying a customer** — "Trusted by Acme, Globex, Initech." Standard practice. - **Customer lists, directories, and search results** — listing companies you cover, integrate with, or index. - **Comparison content** — "How we compare to Acme." - **Editorial / news** — reporting on or covering a company. - **Integration pages** — "Connect with Slack, Salesforce, HubSpot." - **B2B dashboards and CRMs** — showing the logo of a company a user is researching or working with. - **Marketplaces and aggregators** — showing brand identity next to listings. ## When you should not use a company's logo These are the patterns that get teams cease-and-desist letters: - **Implying endorsement** — "Recommended by Acme" when Acme hasn't endorsed you. - **Modifying the logo** — changing colors outside the brand's allowed palette, adding elements, distorting proportions, or stylizing. - **Using it as your own branding** — incorporating someone else's logo into your own marketing assets, hero images, or product chrome in a way that looks like co-branding. - **Paid advertising** — most companies treat ads as a different category and require explicit permission, even when the underlying use case (e.g. "trusted by") would be fine on your own site. - **Merchandise** — putting the logo on physical goods you sell. - **Misleading association** — using the logo in a context that falsely implies a partnership, certification, or affiliation. ## Specific use cases ### Customer lists ("trusted by") Generally fine on your own site for companies that are actually customers. Many brand guideline pages explicitly permit this. If a customer asks you to remove their logo, remove it. ### Internal dashboards and CRMs Showing a logo next to a company record so a user can recognize it visually is identification, not endorsement. This is the canonical use case for logo APIs. ### Public directories and marketplaces Showing logos in a directory you operate (vendor lists, integration galleries, news aggregators) is generally allowed under nominative use, as long as you don't imply the listed companies have endorsed the directory itself. ### Comparison pages Allowed when factual and clearly editorial. Don't modify the competitor's logo or use it more prominently than your own brand. ### Paid ads and out-of-product surfaces Many brands treat ads as a separate category with their own permission process — even when the same use on your own site would be fine. When in doubt, ask. ## Brand guidelines: when they matter Many large companies (Google, Meta, Microsoft, Slack, GitHub) publish brand asset pages with specific rules: no recoloring, approved dark-mode variants, clearspace, no tight crops. Brand guidelines don't override trademark law — nominative use still applies — but following them is the safest path and what brand teams expect. ClearLogo's output (background-aware framing, dark-mode variants, consistent padding) is designed to render in line with how brand guidelines typically expect logos to appear. ## Where ClearLogo fits What ClearLogo does: - Returns background-aware, consistently-framed output that respects brand presentation defaults. - Provides dark-mode variants where available, matching how brand guidelines typically expect logos to appear on dark backgrounds. - Lets you remove specific logos on request when a brand owner asks. What ClearLogo does not do: - Give you permission to use a logo in ways the brand owner prohibits. - Replace your own legal review for high-risk use cases (paid ads, merchandise, public marketing campaigns). ## FAQ ### Do I need permission to show a company's logo in my SaaS product? For internal identification — dashboards, directories, customer records, integration pages — generally no. This is nominative use and is well-established. For prominent marketing surfaces ("Acme uses us"), it's polite and common practice to ask, and many companies will say yes. ### Can I show competitors' logos on a comparison page? Yes, when the content is factual and clearly editorial. Don't modify the competitor's logo or imply they endorse the comparison. ### What about logos of companies I'm not a customer of? If you're identifying them (search results, news, directories, references), that's nominative use. If you're implying they're your customer, that's misleading and a problem. ### Can I modify a logo to fit my UI? Cropping whitespace, resizing proportionally, and adapting to dark mode using the brand's published dark variant is generally fine. Recoloring, redrawing, or adding elements is not. ClearLogo handles the safe transformations (framing, ratio, dark variant) automatically. ### What if a company asks me to remove their logo? Remove it. Even when the use is legally defensible, the cost of a dispute almost always exceeds the value of any single logo. ### Does ClearLogo grant me a trademark license? No. No logo API can. ClearLogo provides the rendered file; the legal basis for displaying it has to come from your use case (nominative use, fair use, an explicit license, or the brand's published guidelines). ### Is this different in the EU, UK, or elsewhere? The doctrines have different names (e.g. "honest practices" in the EU, "referential use" in some jurisdictions) but the practical outcome is similar: identifying a company by its logo is generally allowed; implying endorsement or modifying the mark is not. ### How does this apply to AI products? Same framework. If your AI surfaces a company's logo as part of identifying that company (search, summaries, retrieval), that's nominative use. Generating fake logos that imitate real brands is a different category and runs into trademark law directly. --- # Drop a company logo into your app — copy-paste recipes > Practical snippets for the common shapes a logo ends up in: an `` tag, a React component, a Next.js Image, a Tailwind avatar slot, a dark-mode-aware `` element, an OG image fallback, and a server-signed URL. Every snippet works against the public `https://api.clearlogo.dev` endpoint. > > All examples assume you have a browser key (for client code) or a server key (for backend code). [Create a key](https://clearlogo.dev/login?lang=en) from the dashboard. ## 1. Plain HTML Fastest possible integration — paste the URL into an `` tag. ```html GitHub ``` Set `size` to match the rendered dimension so the browser doesn't waste bandwidth scaling a larger asset. ## 2. React component A small reusable component covers most product UI needs. ```tsx type CompanyLogoProps = { domain: string; size?: 32 | 48 | 64 | 96 | 128; alt?: string; }; const BROWSER_KEY = process.env.NEXT_PUBLIC_CLEARLOGO_KEY!; export function CompanyLogo({ domain, size = 64, alt }: CompanyLogoProps) { return ( {alt ); } ``` `loading="lazy"` and `decoding="async"` keep long lists (CRMs, directories, account tables) from blocking paint. ## 3. Next.js `` Add the API host to `next.config.js` once, then use the optimized `` component everywhere. ```js // next.config.js module.exports = { images: { remotePatterns: [ { protocol: "https", hostname: "api.clearlogo.dev" }, ], }, }; ``` ```tsx import Image from "next/image"; export function CompanyLogo({ domain, size = 64 }: { domain: string; size?: number }) { return ( {`${domain} ); } ``` Request `size * 2` for retina sharpness on HiDPI displays. Use `unoptimized` if you want the WebP negotiation from the API to flow through to the client; remove it if you want Next.js to handle format negotiation itself. ## 4. Tailwind avatar slot Drop the logo into a fixed UI slot that stays visually consistent across brands. ```tsx
{name}
{domain}
``` `object-contain` plus a fixed slot size is the most reliable shape for tables and lists. Pair with the `content=80` parameter so the logo never butts up against the slot edge. ## 5. Dark-mode-aware logo Use `` with `prefers-color-scheme` to swap dark/light variants at paint time, with zero JavaScript or per-logo rerenders. ```html GitHub ``` Wrapped as a React component: ```tsx export function CompanyLogo({ domain, size = 64 }: { domain: string; size?: number }) { const base = `https://api.clearlogo.dev/logo/${domain}?size=${size}&content=80&token=${BROWSER_KEY}`; return ( {`${domain} ); } ``` The API falls back to the light variant when no dark version exists, so it's always safe to request `theme=dark`. For app-level theme switches (not OS-level), drive the source URL from your theme state instead of `prefers-color-scheme`. ## 6. List rendering with a placeholder For long lists, render an immediate placeholder so empty slots don't flash. ```tsx function LogoCell({ domain }: { domain: string }) { const [loaded, setLoaded] = useState(false); return (
setLoaded(true)} className={`h-full w-full object-contain transition-opacity ${ loaded ? "opacity-100" : "opacity-0" }`} />
); } ``` ## 7. Error fallback with the first letter If the API can't find a logo for a domain, render a deterministic letter avatar instead. ```tsx function LogoOrFallback({ domain, name }: { domain: string; name: string }) { const [errored, setErrored] = useState(false); if (errored) { return (
{name[0]?.toUpperCase() ?? "?"}
); } return ( {`${name} setErrored(true)} /> ); } ``` The fallback never network-requests, so even cold rows stay snappy. ## 8. Open Graph image fallback Embed a logo into a dynamically-generated OG image via a server-side fetch. ```ts // app/og/route.ts (Next.js, Edge runtime) import { ImageResponse } from "next/og"; export const runtime = "edge"; export async function GET(request: Request) { const { searchParams } = new URL(request.url); const domain = searchParams.get("domain") ?? "example.com"; const logoUrl = `https://api.clearlogo.dev/logo/${domain}?size=256&content=80&token=YOUR_SERVER_KEY`; return new ImageResponse( (
{domain}
), { width: 1200, height: 630 }, ); } ``` Use a **server** key here, not a browser key — Edge functions are server-side, and a server key is what survives unrestricted origin headers. ## 9. Backend signing for sensitive UIs When you don't want the URL public (e.g. internal admin tools), proxy through your backend. ```ts // app/api/logo/[domain]/route.ts (Next.js) export async function GET( request: Request, { params }: { params: { domain: string } }, ) { const upstream = await fetch( `https://api.clearlogo.dev/logo/${params.domain}?size=128&content=80`, { headers: { Authorization: `Bearer ${process.env.CLEARLOGO_SERVER_KEY}` } }, ); return new Response(upstream.body, { headers: { "Content-Type": upstream.headers.get("Content-Type") ?? "image/png", "Cache-Control": "public, max-age=86400, s-maxage=86400", }, }); } ``` No API key in the page source, and you control caching at your own CDN. ## 10. TypeScript helper A single helper keeps URL construction consistent across the codebase. ```ts type LogoOptions = { size?: 16 | 32 | 48 | 64 | 96 | 128 | 192 | 256 | 512 | 1024; content?: number; // 50–100, step 5 theme?: "light" | "dark"; format?: "png" | "webp" | "jpeg"; }; export function logoUrl(domain: string, opts: LogoOptions = {}): string { const params = new URLSearchParams({ size: String(opts.size ?? 64), content: String(opts.content ?? 80), token: process.env.NEXT_PUBLIC_CLEARLOGO_KEY!, }); if (opts.theme) params.set("theme", opts.theme); if (opts.format) params.set("format", opts.format); return `https://api.clearlogo.dev/logo/${encodeURIComponent(domain)}?${params}`; } ``` `encodeURIComponent` protects against unusual characters in domains and makes the helper safe to call with untrusted input. ## 11. Preconnect to warm the connection early For dashboards that render dozens of logos above the fold, the first request pays for DNS, TCP, and TLS. Add a single `` to your document head so the connection is ready before the first `` hits — every subsequent logo gets a head start without per-URL preload bloat. ```html ``` ```tsx // Next.js import Head from "next/head"; export function ClearLogoPreconnect() { return ( ); } ``` `preconnect` resolves DNS and opens the TCP/TLS handshake immediately; `dns-prefetch` is a cheap fallback for browsers that ignore the preconnect. Two hints total, regardless of how many logos the page renders. Prefer this over `` per logo — preloads are heavyweight, count toward bandwidth budgets, and don't help if the rendered URL ends up slightly different (size, theme, token) from the preloaded one. ## FAQ ### Which recipe should I start with? For a single logo, the plain `` recipe is enough. For lists and tables, start with the Tailwind avatar slot + lazy-load pattern. ### Do I need a key for testing? No. The endpoint works anonymously for low-volume browsing. Add a browser key before you ship to production so the request is properly attributed and counted against your plan. ### What size should I request? Match the rendered size in CSS, then request `2x` that for retina sharpness. Don't request `1024` for a 32-pixel slot — it costs bandwidth and doesn't look any better. ### How do I handle dark mode without JavaScript? Use a `` element with a `` gated by `media="(prefers-color-scheme: dark)"`. The browser picks the right URL at paint time — no React hook, no rerender per logo, no per-row overhead even in long lists. ### How do I make a list of logos load faster? Add a single `` in your document head. That opens DNS/TCP/TLS once for every logo on the page, which is cheaper than `` per URL. ### How do I show a fallback when the API returns no logo? Listen for `onError` on the `` and swap in a letter-avatar or a generic icon. The error fallback recipe above is the production shape. ### Can I use a browser key from a server-side render? You can — but a server key is a better fit because it sends the request via `Authorization: Bearer …` rather than relying on origin checks. For Next.js Server Components, OG routes, or backend proxies, use a server key. ### How do I cache logos at my own CDN? Use the backend-signing recipe above. The upstream response includes long-lived `Cache-Control`, so you can set the same headers on your proxy and let your CDN do the rest.