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

# Using a custom fallback image with Logo API

> Learn how to handle 404s and implement your own fallback image.

When working with [Logo API](/logo-api/overview), implementing proper fallback handling ensures a smooth user experience. While we provide [built-in fallback options](/logo-api/parameters), here's how to implement custom fallback handling for 404s and loading states in React.

### Enhanced Fallback Mechanism

Our React approach combines the basic fallback structure with error handling and loading states:

```jsx theme={null}
const LogoCDN = ({ domain, clientId, fallbackText = "N / A" }) => {
  const [isLoading, setLoading] = useState(true);
  const [isError, setError] = useState(false);

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

  // Construct the logo URL with domain and client ID
  const logoCDN = `https://cdn.brandfetch.io/${domain}/fallback/404/icon?c=${clientId}`;

  // Determine which source to use based on component state
  // - During loading: show transparent placeholder
  // - After loading, no error: show actual logo
  // - On error: transparent placeholder remains while fallback UI shows
  const src = !isLoading && !isError ? logoCDN : transparent;

  return (
    <div className="wrapper">
      <img
        onLoad={() => setLoading(false)}
        onError={() => setError(true)}
        alt="Logo by Brandfetch"
        className="icon"
        src={src}
      />

      {/* Fallback UI shown only when there's an error loading the logo */}
      {isError && (
        <div className="fallback">
          <p>{fallbackText}</p>
        </div>
      )}
    </div>
  );
};
```

Style your fallback mechanism with this CSS:

```css theme={null}
.wrapper {
  border-radius: 9999px;
  position: relative;
  overflow: hidden;
  height: 128px;
  width: 128px;
}

.fallback {
  background-color: #eaeaea;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  height: 100%;
  width: 100%;
}

.fallback p {
  font-weight: bold;
  font-size: 24px;
  color: #666;
}

.icon {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
```

### How It Works

1. **Initial render:** Shows transparent placeholder image
2. **After initial load:** Attempts to load actual logo
3. **Success:** Displays logo
4. **Error:** Shows fallback UI with provided text

The key benefits of using a transparent placeholder is that users never see the default browser "broken image" icon.

### Using the LogoCDN Component

The LogoCDN component can be easily integrated into your React application. Here's how to use it:

```jsx theme={null}
<LogoCDN domain="github.com" clientId="client-id" fallbackText="G" />
```

The component automatically handles loading states and errors, providing a smooth experience for your users.