Query Brand API Logos

Strategies for selecting the best logo to display in your application.

This recipe explores effective strategies for selecting the best logo to display in company listing apps, such as those used in fintech, CRM, or internal tools.

Query Logos by Type

The Brand API returns an array of logos. You can filter them by their type:

// Find the square icon (best for small avatars)
const icon = brand.logos.find(({ type }) => type === 'icon')

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

// Find symbols/wordmarks
const symbols = brand.logos.filter(({ type }) => type === 'symbol')

Query Logos by Theme

Many brands provide different versions for light and dark backgrounds:

// 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'
)

Query a Specific Format

If your application requires a specific file format (like SVG for high resolution):

const logo = brand.logos.find(({ type }) => type === 'logo')
const file = logo.formats.find(({ format }) => format === 'svg')

Retrieve the Best Available Format

A common pattern is to try to find the highest quality format first:

const priorityList = ['svg', 'webp', 'png', 'jpeg', 'jpg']

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

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

By using these strategies, you can ensure that your application always displays the most appropriate brand asset for your specific UI requirements.