CarrierLogo

Displays logos of transport carriers.

Carrier logos add simple visual context so users can see at a glance the logos of carriers involved in their journey.

Remember that while visual cues like logos can help many people process the message, not everyone will benefit from them. Make sure your content is accessible to everyone by including the carrier name.

Component status

Figma

Released

Web (React)

Released

iOS (Swift)

n/a

Android (Kotlin)

n/a

Docs

Released

Content structure

Guidelines

Include non-visual information

Logos can create important context for users, but not everyone will see 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 will still get 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.

import CarrierLogo from "@kiwicom/orbit-components/lib/CarrierLogo";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Text from "@kiwicom/orbit-components/lib/Text";

() => (
  <Stack direction="column">
    <CarrierLogo
      carriers={[
        {
          code: "OK",
          type: "airline",
          name: "Czech Airlines",
        },
      ]}
    />
    <Stack direction="row" spacing="XXSmall" align="center">
      <CarrierLogo
        carriers={[
          {
            code: "OK",
            type: "airline",
            name: "",
          },
        ]}
      />
      <Text>Czech Airlines</Text>
    </Stack>
  </Stack>
)

Look & Feel

Multiple logos

Carrier logos can include up to four logos at once. With one logo, by default it’ll occupy 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’ll be 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.

import CarrierLogo from "@kiwicom/orbit-components/lib/CarrierLogo";
import Stack from "@kiwicom/orbit-components/lib/Stack";

() => (
  <Stack direction="column">
    <CarrierLogo
      carriers={[
        {
          code: "OK",
          type: "airline",
          name: "Czech Airlines",
        },
      ]}
    />
    <CarrierLogo
      carriers={[
        {
          code: "OK",
          type: "airline",
          name: "Czech Airlines",
        },
        {
          code: "FR",
          type: "airline",
          name: "Ryanair",
        },
      ]}
    />
    <CarrierLogo
      carriers={[
        {
          code: "OK",
          type: "airline",
          name: "Czech Airlines",
        },
        {
          code: "FR",
          type: "airline",
          name: "Ryanair",
        },
        {
          code: "TO",
          type: "airline",
          name: "Transavia France",
        },
      ]}
    />
    <CarrierLogo
      carriers={[
        {
          code: "OK",
          type: "airline",
          name: "Czech Airlines",
        },
        {
          code: "FR",
          type: "airline",
          name: "Ryanair",
        },
        {
          code: "TO",
          type: "airline",
          name: "Transavia France",
        },
        {
          code: "VY",
          type: "airline",
          name: "Vueling",
        },
      ]}
    />
  </Stack>
)

Related components

ServiceLogo

Carrier logos present specific companies such as airlines and train companies For services such as payment methods, use a service logo.

Illustration

Service logos help provide visual context. For more guidance on visual components, check out illustrations.