> ## Documentation Index
> Fetch the complete documentation index at: https://docs.context.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

export const LogoLinkDemo = () => {
  const [domain, setDomain] = useState("github.com");
  const [activeDomain, setActiveDomain] = useState("github.com");
  const [copied, setCopied] = useState(false);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false);
  const prevFirstChar = useRef("g");
  const publicClientId = "brandLL_QObZ4OkTQJ0q1toWsQO9tXq8AzKlNdz4";
  const extractDomain = input => {
    const trimmedInput = input.trim();
    if (trimmedInput.includes("://") || trimmedInput.startsWith("www.") || trimmedInput.includes("/")) {
      try {
        const urlString = trimmedInput.includes("://") ? trimmedInput : `https://${trimmedInput}`;
        const url = new URL(urlString);
        return url.hostname;
      } catch (e) {
        return trimmedInput;
      }
    }
    return trimmedInput;
  };
  const logoUrl = `https://logos.context.dev/?publicClientId=${publicClientId}&domain=${encodeURIComponent(activeDomain)}`;
  const displayUrl = `https://logos.context.dev/?publicClientId={{your_id}}&domain=${encodeURIComponent(extractDomain(domain))}`;
  const isValidDomain = domain => {
    const domainRegex = /^[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9]?(\.[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9]?)*\.[a-zA-Z]{2,}$/;
    return domainRegex.test(domain);
  };
  useEffect(() => {
    const trimmedDomain = domain.trim();
    if (!trimmedDomain) return;
    const extractedDomain = extractDomain(trimmedDomain);
    if (!extractedDomain) return;
    const firstChar = extractedDomain[0].toLowerCase();
    const firstCharChanged = firstChar !== prevFirstChar.current;
    if (firstCharChanged || isValidDomain(extractedDomain)) {
      if (extractedDomain !== activeDomain) {
        setLoading(true);
        setError(false);
        setActiveDomain(extractedDomain);
      }
      prevFirstChar.current = firstChar;
    }
  }, [domain, activeDomain]);
  const handleCopy = useCallback(async () => {
    try {
      await navigator.clipboard.writeText(displayUrl);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error("Failed to copy:", err);
    }
  }, [displayUrl]);
  return <div className="not-prose my-6 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 overflow-hidden">
      <div className="p-6">
        <div className="text-center mb-4">
          <div className="text-lg font-semibold text-zinc-900 dark:text-white mb-1">
            Live Logo Link Demo
          </div>
          <div className="text-sm text-zinc-500 dark:text-zinc-400">
            Try any domain to see the logo instantly
          </div>
        </div>

        <div className="mb-4">
          <input type="text" value={domain} onChange={e => setDomain(e.target.value)} placeholder="Enter a domain (e.g., github.com, stripe.com)" className="w-full px-4 py-2.5 text-sm text-zinc-900 dark:text-white bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-md focus:outline-none focus:ring-2 focus:ring-zinc-400 dark:focus:ring-zinc-600 transition-all" />
        </div>

        <div className="relative flex items-center justify-center h-[168px] bg-zinc-50 dark:bg-zinc-900 rounded-md p-6 mb-4 border border-zinc-200 dark:border-zinc-800">
          {loading && <div className="absolute inset-0 flex items-center justify-center">
              <div className="w-[100px] h-[100px] bg-zinc-200 dark:bg-zinc-800 rounded-2xl relative overflow-hidden">
                <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/60 dark:via-white/10 to-transparent"></div>
              </div>
            </div>}
          {error ? <div className="text-center px-4">
              <div className="text-sm text-zinc-600 dark:text-zinc-400 mb-1">
                The Logo Link demo is currently offline.
              </div>
              <div className="text-sm text-zinc-600 dark:text-zinc-400">
                Go to the{" "}
                <a href="https://context.dev/dashboard/logolink" target="_blank" rel="noopener noreferrer" className="text-zinc-900 dark:text-white underline hover:no-underline">
                  Logo Link dashboard
                </a>{" "}
                to try it out.
              </div>
            </div> : <img src={logoUrl} alt={`${domain} logo`} className={`transition-opacity duration-200 ${loading ? "opacity-0" : "opacity-100"}`} style={{
    width: "100px",
    height: "100px",
    objectFit: "contain",
    borderRadius: "10px"
  }} onLoad={() => setLoading(false)} onError={() => {
    setLoading(false);
    setError(true);
  }} key={logoUrl} />}
        </div>

        <style jsx>{`
          @keyframes shimmer {
            0% {
              transform: translateX(-100%);
            }
            100% {
              transform: translateX(100%);
            }
          }
          .animate-shimmer {
            animation: shimmer 1.5s infinite;
          }
        `}</style>

        <div className="relative flex gap-2 items-stretch">
          <code className="flex-1 block px-3 py-2 text-xs font-mono text-zinc-700 dark:text-zinc-300 bg-zinc-100 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-md break-all">
            {displayUrl}
          </code>
          <button onClick={handleCopy} className="flex-shrink-0 flex items-center justify-center gap-1.5 px-3 rounded-md bg-zinc-100 dark:bg-zinc-800 text-xs font-medium text-zinc-950 dark:text-white hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors" aria-label={copied ? "Copied" : "Copy URL"}>
            {copied ? <>
                <svg className="size-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
                Copied
              </> : <>
                <svg className="size-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                </svg>
                Copy
              </>}
          </button>
        </div>
      </div>
    </div>;
};

Context.dev's [core endpoints](/api-reference) provide high-quality data for logos, colors, fonts, company metadata and much more. Logo Link is a separate service that just provides fast, reliable logo delivery via a global CDN.

## Try It Out

<LogoLinkDemo />

## Logo Link vs Core Context.dev APIs

| Feature             | Logo Link                                                       | [Brand APIs](/api-reference)                                        |
| ------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------- |
| Primary purpose     | Fast, CDN-delivered ephemeral logo delivery                     | Full asset API for storing, managing, and serving brand assets      |
| Intended uses       | Client-facing embeds where minimal setup and fresh logos matter | Pre-fill onboarding, creating brand kits, data enrichment, and more |
| Caching/Storage     | Not Allowed                                                     | Can store indefinitely                                              |
| Data Provided       | Square logo image                                               | Multiple logo styles and sizes                                      |
| Rate limits & scale | Optimized for high-volume reads with fair-use constraints       | Designed for reads/writes at scale; limits depend on plan           |

Choose Logo Link for simple, up-to-date logo embeds; use Context.dev Core APIs when you need storage, cache control, or advanced asset workflows.

## Pricing

Logo Link usage is calculated separately from the core Context.dev APIs. Each plan receives API credits and Logo Link credits that are calculated separately.

If you have an account, you can view your Logo Link usage and credits in the [dashboard](https://context.dev/dashboard/logolink). If you don't have an account yet, you can see how many Logo Link credits you get on each plan on our [pricing page](https://context.dev/pricing).