CarrierLogo

Displays logos of transport carriers.

  • 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.
FigmaReactiOSAndroidDocumentation
Released
Released
n/a
n/a
Released

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

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.

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.