> ## Documentation Index
> Fetch the complete documentation index at: https://devshine-cbff6863.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Query Brand API Logos

> Strategies for Selecting the Best Logo for Your Application

Brand API can return multiple logo assets for a single brand, including icons, symbols, full logos, and different file formats.

This guide explains how to choose the best logo for your application based on logo type, theme, format, and UI requirements.

These strategies are useful for company listing apps, fintech dashboards, CRM platforms, internal tools, marketplaces, transaction feeds, and SaaS products that need clean and accurate brand visuals.

## Query Logos by Type

Brand API returns logos as an array. You can filter this array by logo type to choose the right asset for your interface.

For example, use icons for small avatars, standard logos for larger placements, and symbols when you need a compact brand mark.

```javascript theme={null}
// Find the square icon, best for small avatars
const icon = brand.logos.find(({ type }) => type === "icon");

// Find standard brand logos
const logos = brand.logos.filter(({ type }) => type === "logo");

// Find symbols or brand marks
const symbols = brand.logos.filter(({ type }) => type === "symbol");
```

## Query Logos by Theme

Many brands provide different logo versions for light and dark backgrounds.

Choosing the correct theme helps the logo remain clear, readable, and visually consistent inside your UI.

```javascript theme={null}
// Find a logo optimized for dark backgrounds
const logoDark = brand.logos.find(
  ({ type, theme }) => type === "logo" && theme === "dark"
);

// Find a logo optimized for light backgrounds
const logoLight = brand.logos.find(
  ({ type, theme }) => type === "logo" && theme === "light"
);
```

Use dark logo variants on light backgrounds and light logo variants on dark backgrounds whenever available.

## Query a Specific Format

Some applications require a specific file format.

For example, SVG is often preferred for high-resolution displays because it stays sharp at different sizes and screen densities.

```javascript theme={null}
const logo = brand.logos.find(({ type }) => type === "logo");

const file = logo.formats.find(({ format }) => format === "svg");
```

Use this approach when your application requires a specific format such as:

* `svg`
* `webp`
* `png`
* `jpeg`
* `jpg`

## Retrieve the Best Available Format

A common strategy is to request the highest-quality format first, then fall back to other supported formats if the preferred file is not available.

The example below checks for formats in priority order.

```javascript theme={null}
const priorityList = ["svg", "webp", "png", "jpeg", "jpg"];

const logo = brand.logos.find(({ type }) => type === "logo");

const bestFile = priorityList
  .map((priorityFormat) =>
    logo.formats.find((file) => file.format === priorityFormat)
  )
  .find((file) => file !== undefined);
```

This ensures your application displays the best available logo format without breaking when one format is missing.

## Recommended Logo Selection Strategy

For most applications, use this order:

1. Choose the right logo type for your UI.
2. Match the logo theme to your background.
3. Prefer `svg` for full logos and wordmarks.
4. Use `webp` or `png` for icons where SVG is unavailable.
5. Add a fallback for missing logos or missing formats.

This approach helps your application display the most appropriate brand asset for each UI requirement.

## Best Use Cases

These logo selection strategies are useful when building:

* Company profile pages
* CRM account records
* Fintech transaction feeds
* Investment dashboards
* Internal admin tools
* Marketplace listings
* SaaS customer dashboards
* Brand search and autocomplete interfaces

By filtering logos by type, theme, and format, your application can display reliable, readable, and high-quality brand assets across different screens and use cases.