Code

Usage

There are currently 3 supported logo packages. @twilio-labs/match-logos/brand, @twilio-labs/match-logos/mono and @twilio-labs/match-logos/color. Logos are imported individually from their respective packages.

import { ChimeLogo } from "@twilio-labs/match-logos/mono";
const Component = () => <ChimeLogo />;

Monochromatic Logo Props

PropTypeDefaultDescription
color?Color'gray90''gray90', 'gray70', 'white'
maxHeight?string'24px'Maximum height of the SVG.

Color and Brand Logo Props

PropTypeDefaultDescription
maxHeight?string'24px'Maximum height of the SVG.

Guidelines

Accessibility

All Logos include an accessible title by default. When grouping logos together, put a header on the group (i.e. "Examples of Twilio customers"). The header may be wrapped in the VisuallyHidden component.


Composition

Twilio Logos

Preferred logo colors are red on light backgrounds and white on dark backgrounds. Black is an option in some cases. Please follow the Twilio brand guidelines.

Customer Logos

Customer Logos are provided in both monochromatic and full color versions. Full color logos may not be modified. Monochromatic logos may be assigned a color token of "gray90", "gray70", or "white".

Do

Stick to the recommended colors or the original logo colors.

Don't

Change the color of another company's logos to Twilio brand colors (Twilio red or blue).


Examples

Logo Color

Monochromatic logos may be assigned a color token.

Logo Size

The size may be adjusted by setting the maxHeight prop with any valid css unit in px, rem, or em.

The maxHeight prop accepts responsive values.