Elevating flight search UX with airline logos and IATA codes

A flight results page is a wall of similar rows: times, durations, prices. Airline logos and codes are the quickest way for travellers to tell those rows apart. Someone looking for a Lufthansa flight spots the crane before reading a single word; someone comparing Air China and China Airlines needs the code or logo to know which is which.

This guide covers why logos and codes help, how to design them into results, and how to build it so it stays fast and correct.

What logos and codes do for travellers

• Faster scanning. People recognise shapes and colours faster than they read text. Frequent flyers look for "their" airline first, and a logo lets them find it in a long list.
• Trust. Current, sharp logos make results look accurate. An old or blurry logo makes travellers wonder what else is out of date.
• Telling similar airlines apart. Air China (CA) and China Airlines (CI) are different airlines from different places; so are China Eastern (MU) and China Southern (CZ). The code and logo remove the doubt that the names leave.
• Clear code-shares. When one airline sells a seat on another's flight, two logos (or "Operated by…") explain who actually flies the plane.

Designing logos into results

• Pick the right variant. A compact symbol works in tight result rows and mobile lists; the full logo with the airline name suits flight details and confirmation emails.
• Keep the name in text. Not everyone recognises every logo, especially for smaller airlines. Show the name or code next to the logo, and always set alt text.
• Use one size per context. For example 24 px on mobile and 32 px on desktop, with every logo fitted into the same box so rows line up.
• Plan for dark mode. Many logos disappear on dark backgrounds. Use versions made for dark backgrounds rather than adding a white box behind them.
• Handle multi-airline itineraries. Decide whether a two-airline trip shows both logos or the main one, and be consistent across search, details and email.

Building it

Key logos by airline code, carefully

Your flight supplier returns a carrier code with every segment (for example DL or LH). That code is the link to the logo, but remember that IATA codes are not always unique; shared codes need the ICAO code or context to pick the right airline, and codes change after mergers.

Use a predictable image URL

Deterministic URLs make logos easy to cache and to use from any front end. With the Airhex logos API, a 350×100 rectangular Delta logo looks like this:

https://content.airhex.com/content/logos/airlines_DL_350_100_r.png?md5apikey=…

The code, size and shape are in the path, and the signature is an MD5 hash of those values plus your API key, so your backend can build URLs without an extra API call.

Choose formats for sharpness and weight

• SVG stays sharp at any size and is usually tiny. Use it wherever you can.
• PNG works everywhere; serve 2× versions with srcset for high-density screens.
• Use transparent backgrounds so logos sit on any colour.

<img src="/logos/DL_64.png" srcset="/logos/DL_128.png 2x"
     width="64" height="64" alt="Delta Air Lines" loading="lazy">

Setting width and height stops the page jumping as logos load.

Cache aggressively

The same few airlines appear in most searches, so each logo should download once. Serve them from a CDN with long cache lifetimes, and use exactly the same URL for the same logo everywhere so browsers reuse it.

Always have a fallback

New or very small airlines may not have a logo yet. Show a neutral placeholder plus the code and name instead of a broken image, and log which codes are missing.

Keeping logos current

Airlines rebrand more often than you'd expect. Air India introduced a new identity in 2023, and Lufthansa redesigned its crane in 2018. A logo set copied once from airline websites will be out of date within a year. Whatever the source, make sure logos are refreshed automatically, not when someone notices.

Measuring the impact

If you're adding logos to an existing results page, A/B test it: compare click-through on results, time to first click and booking conversion. Watch page speed at the same time; logos should never make results noticeably slower.

Where Airhex fits

Airhex airline logos come in square, rectangular, circular and tail shapes, as SVG or PNG in any size, with versions for light and dark backgrounds. They are matched to IATA and ICAO codes, served from a CDN and updated daily when airlines rebrand.