# Show Company Logos by Domain in React

> A small React component that turns any domain into a transparent logo. Copy-paste, no attribution required. $0.01 per lookup.

**Canonical URL:** https://superlogo.ai/react-company-logo  
**Target query:** `react fetch company logo from domain`  
**Summary:** How to display a company logo by domain in React. Copy-paste component that fetches a transparent PNG from the SuperLogo API. $0.01 per lookup, no attribution required.

## Overview

Showing a company logo next to a domain is a common React need: a CRM card, a customer list, a "trusted by" strip, an onboarding autofill. The clean approach is a small component that fetches a transparent PNG once and caches it. One important note first: never put an API key in front-end code. Proxy the request through your own backend so the key stays on the server. The pattern below shows the fetch shape; point it at your proxy route in production.

## Why teams switch

- **Hard-coded logo image URLs rot:** Companies rebrand and file paths move, so a hard-coded logo src eventually 404s. Resolving by domain at request time always returns the current mark.
- **Favicons look wrong in a polished UI:** The favicon service returns tiny, inconsistent icons. A real logo at 64px or 128px is what a card or table actually needs.
- **API keys must not ship to the browser:** Any key in client-side React is public. The fix is a one-line backend proxy; the component calls your route, your route calls the logo API.

## What SuperLogo does differently

- **Drop-in component:** A CompanyLogo component that takes a domain prop, fetches once in useEffect, and renders an img. Copy it in and pass domains.
- **Transparent PNG as a data URL:** The base64 response becomes a data:image/png;base64 src with no extra image host or CDN to configure.
- **Cache-friendly by domain:** Memoize by domain so the same logo is fetched once per session. Or resolve server-side and cache on your own CDN indefinitely.
- **No attribution at any tier:** Render the logos in a commercial app with no required credit link.
- **$0.01 per domain lookup:** Pay-as-you-go through your backend proxy. Failed lookups are free.

## FAQ

### What is the full React component?

function CompanyLogo({ domain }) { const [src, setSrc] = useState(null); useEffect(() => { fetch("/api/logo?domain=" + domain).then(r => r.json()).then(d => setSrc("data:image/png;base64," + d.logos[0].logo_base64)); }, [domain]); return src ? <img src={src} alt={domain + " logo"} width={64} height={64} /> : null; }

### What does the backend proxy route look like?

One handler that forwards the domain to SuperLogo with your server-side key: POST https://superlogo.ai/v1/resolve with { domains: [domain] } and return the JSON. This keeps sl_live_YOURKEY off the client.

### Why not call the SuperLogo API directly from React?

Because the Authorization header would expose your API key to anyone who opens devtools. Always proxy logo lookups through your own backend.

### Can I preload logos server-side in Next.js?

Yes. Resolve in a Server Component or route handler, pass the data URL as a prop, and the logo renders with no client fetch at all.

## Get started

- **View the API:** https://superlogo.ai/api
- **API docs:** https://superlogo.ai/v1/docs.html
- **All company logo pages:** https://superlogo.ai/sitemap.xml