CarrierLogo

Displays logos of transport carriers.

GuidelinesReact

When to use

  • To add simple visual context so users can see at a glance the logos of carriers involved in their journey.
  • With the carrier name so the context is accessible to everyone.

When not to use

Component status

Figma

React

iOS

Android

Released
Released
Released
N/A

Content structure

Logo image: shows the logo and best to pass through the carrier name; carrier grid: displays multiple carriers.

Content

Include non-visual information

Logos can create important context for users, but not everyone sees the logo. So make sure everything necessary is presented in a non-visual form.

This can mean including the name of the carrier with the logo so anyone who doesn't see the logo still gets the name. But if the logo is present next to text with the name, don't include the name with the logo so it's not repeated.

Look & Feel

Multiple logos

Carrier logos can include up to four logos at once. With one logo, by default it occupies the entire space. With multiple logos, the logos are shrunk to the same size (no matter how many more there are).

To create visual balance, the logos are positioned differently depending on their number. With two logos, they’re in the top left and bottom right. With three, the second logo shifts to the bottom left and the third is present in the top right. With four, the logos take up all four corners.

Optionally, it’s also possible to display all logos inline, slightly stacked on top of each other. In that case, the size of each logo is bigger, as if there was only one.