> ## 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.
# Logo picker
> Let users search a brand and drop the right logo asset into the document, powered by the Brand Search API and Brand API
export const LogoPickerDemo = () => {
const [query, setQuery] = useState("");
const [results, setResults] = useState([]);
const [loading, setLoading] = useState(false);
const [picked, setPicked] = useState(null);
const reqId = useRef(0);
useEffect(() => {
const q = query.trim();
if (!q) {
setResults([]);
setLoading(false);
return;
}
setLoading(true);
const id = ++reqId.current;
const t = setTimeout(async () => {
try {
const res = await fetch(`https://api.brandfetch.io/v2/search/${encodeURIComponent(q)}?c=1bfwsmEH20zzEfSNTed`);
const data = await res.json();
if (reqId.current === id) {
setResults(Array.isArray(data) ? data.slice(0, 4) : []);
setLoading(false);
}
} catch {
if (reqId.current === id) {
setResults([]);
setLoading(false);
}
}
}, 250);
return () => clearTimeout(t);
}, [query]);
return
{loading ? "Searching…" : query.trim() ? `No brands found for “${query.trim()}”` : "Search for a brand to see its logo"}
}
;
};
export const Preview = ({children}) =>
Preview
{children}
;
Presentation, design, and document editors all need the same thing: a way for users to find a brand and insert its logo without leaving the canvas. The [Brand Search API](/brand-search-api/overview) powers the autocomplete, a partial name goes in, matching brands come out with a ready-to-use logo. And once a brand is selected, the [Brand API](/brand-api/overview) returns all of its available logos, logo, symbol, and icon, in light and dark themes, so users can view every variant and insert the one that fits.
## Instantly insert logos to your tool
The same API powering an "insert logo" dialog, like a presentation or design editor where users search a brand and drop its logo into the document. This is the pattern behind the [Pitch integration](https://brandfetch.com/developers/customers/pitch).
```tsx LogoPicker.tsx theme={null}
import { useState, useEffect, useRef, type ChangeEvent } from "react";
const CLIENT_ID = "YOUR_CLIENT_ID"; // free client ID from developers.brandfetch.com/register
type BrandResult = { brandId: string; name: string; domain: string; icon: string };
export function LogoPicker() {
const [query, setQuery] = useState("");
const [results, setResults] = useState([]);
const [loading, setLoading] = useState(false);
const [picked, setPicked] = useState(null);
const reqId = useRef(0);
useEffect(() => {
const q = query.trim();
if (!q) {
setResults([]);
setLoading(false);
return;
}
setLoading(true);
const id = ++reqId.current;
const t = setTimeout(async () => {
try {
const res = await fetch(`https://api.brandfetch.io/v2/search/${encodeURIComponent(q)}?c=${CLIENT_ID}`);
const data = await res.json();
if (reqId.current === id) {
setResults(Array.isArray(data) ? data.slice(0, 4) : []);
setLoading(false);
}
} catch {
if (reqId.current === id) {
setResults([]);
setLoading(false);
}
}
}, 250);
return () => clearTimeout(t);
}, [query]);
return (
{loading ? "Searching…" : query.trim() ? `No brands found for “${query.trim()}”` : "Search for a brand to see its logo"}
)}
);
}
```
Build an "insert brand logo" picker dialog for an editor. It has a search input at the top; as the user types, query Brandfetch's Brand Search API from the browser (free, client ID only; get one at `https://developers.brandfetch.com/register`):
```
GET https://api.brandfetch.io/v2/search/{query}?c=YOUR_CLIENT_ID
```
Render the results as a vertical list of selectable rows (limit to \~4), each showing the brand's `icon` image, `name`, and `domain` from the response. Clicking a row selects it (accent border and a checkmark) and enables an "Insert" button that places the logo into the document. Debounce keystrokes by \~300ms and hotlink the returned `icon` URLs as-is.
For the inserted asset, render a high-resolution or themed variant from the Logo API using the selected result's `domain`: `https://cdn.brandfetch.io/domain/{domain}?c=YOUR_CLIENT_ID` (add `/type/logo`, `/theme/light`, or size segments as needed).
Use the Search API the intended way: call it straight from the browser with your client ID (not a secret key), debounce input between keystrokes, and hotlink the returned `icon` URLs as-is without caching them (they expire after 24h). It should enhance a larger app, not replicate Brandfetch.
## Implementation
Fire a search after a short pause in typing (\~250 ms). Requests can go straight from the browser, the API is free and authenticates with your client ID as a query parameter.
```text theme={null}
GET https://api.brandfetch.io/v2/search/{name}?c=YOUR_CLIENT_ID
```
Each match carries the brand's `name`, `domain`, and `icon`. Lay the results out as selectable rows and hotlink the returned `icon` URLs as-is, don't cache them, they expire after 24 hours.
On selection, fetch the full brand record with the [Brand API](/brand-api/overview) (server-side, so the API key stays secret) using the picked `domain`. Its `logos` array carries every variant the brand has, `type` (logo, symbol, icon), `theme` (light, dark), and `formats` (SVG, PNG, WebP), so you can display them all and let the user pick the exact asset to insert.
```bash theme={null}
curl "https://api.brandfetch.io/v2/brands/domain/{domain}" \
--header "Authorization: Bearer YOUR_API_KEY"
```
Place the chosen variant's `src` into the document. For a lighter setup without the Brand API call, you can also render a single asset straight from the [Logo API](/logo-api/overview), choosing the size, type, and theme that fit the canvas.
```text theme={null}
https://cdn.brandfetch.io/domain/{domain}/type/logo?c=YOUR_CLIENT_ID
```
Review the [usage guidelines and rate limits](/brand-search-api/overview#usage-guidelines) before going live, search requests should come from your users' browsers, debounced between keystrokes.
## Pricing
The Brand Search API is free, and the Logo API is free with a client ID. Create one on the [Developer Portal](https://developers.brandfetch.com/register), no attribution required. Listing every available logo variant costs one [Brand API](/brand-api/overview) brand fetch per selected brand, and domain-level caching means each brand is fetched once. See [plans](https://brandfetch.com/developers/pricing) for quotas.
## Going further
Match brand names to their domain and logo.
The `logos` array: every variant, theme, and format.
Create a free account and start building.