Skip to main content
When using Logo API, a proper fallback strategy helps keep your application clean, reliable, and user-friendly. Sometimes a company logo may not be available. Instead of showing a broken image or empty space, you can use Logo API’s 404 fallback option and display your own custom fallback UI in React. This guide explains how to handle missing logos, loading states, and custom fallback images when working with Logo API.

​
Why Customize Logo API Fallbacks?

Logo API includes built-in fallback options, but some applications need more control over how missing logos appear. A custom fallback is useful when you want to display:
  • Company initials
  • A default brand icon
  • A custom placeholder image
  • A lettermark
  • A styled fallback card
  • A loading state before the logo appears
This helps improve the user experience in dashboards, CRMs, company profiles, marketplaces, search results, and finance apps.

​
Enhanced Fallback Mechanism

The React example below combines Logo API with loading state, error handling, and a custom fallback UI. 
const LogoCDN = ({ domain, clientId, fallbackText = "N / A" }) => {
  const [isLoading, setIsLoading] = useState(true);
  const [isError, setIsError] = useState(false);

  // Transparent 1x1 pixel PNG used as the initial placeholder
  const transparent =
    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";

  // Construct the Logo API URL with domain and Client ID
  const logoCDN = `https://cdn.brandapi.io/${domain}/fallback/404/icon?c=${clientId}`;

  // Use the logo URL only when the image is ready and no error exists
  const src = !isLoading && !isError ? logoCDN : transparent;

  return (
    <div className="wrapper">
      <img
        onLoad={() => setIsLoading(false)}
        onError={() => setIsError(true)}
        alt={`${domain} logo`}
        className="icon"
        src={src}
      />

      {isError && (
        <div className="fallback">
          <p>{fallbackText}</p>
        </div>
      )}
    </div>
  );
};

​
How It Works

  1. The component starts by showing a transparent placeholder while the logo is loading.
  2. If Logo API successfully returns the company logo, the image is displayed inside your UI.
  3. If the logo is not found, the CDN returns a 404 response because the URL uses: /fallback/404/icon
  4. When the image fails to load, React triggers the onError event and shows your custom fallback UI instead.

​
Key Considerations

​
Initial Loading State

Use a transparent 1x1 pixel image as the initial placeholder. This prevents the browser from showing a broken image icon while the logo request is still loading.

​
Error Handling

Use the image onError event to detect when a logo cannot be loaded. When an error occurs, display your custom fallback UI, such as initials, a generic icon, or a branded placeholder.

​
Logo API Parameters

Use the Logo API 404 fallback option when you want your frontend to control the fallback experience. Example URL: 
https://cdn.brandapi.io/{domain}/fallback/404/icon?c={clientId}
This tells Logo API to return a 404 response when no logo is found, allowing your React component to handle the fallback.

​
Alt Text

Always use descriptive alt text for accessibility and SEO. Instead of using generic alt text, include the brand or domain name when possible. Example: 
alt={`${domain} logo`}
This improves accessibility for screen readers and makes logo images more meaningful.

​
Best Use Cases

Custom Logo API fallbacks are useful for applications that display many company logos, such as:
  • CRM platforms
  • SaaS dashboards
  • Marketplaces
  • Finance apps
  • Transaction feeds
  • Company directories
  • Search result pages
  • Lead enrichment tools
A good fallback strategy keeps your layout consistent, even when a logo is unavailable.