Skip to main content
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. 
// 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. 
// 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. 
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. 
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. 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.