Developer mode
Opens components on the React tab by default.
Your bookmarks

ServiceLogo

Presents a logo for a common service.

People are more likely to use a service if they feel they can trust it. Using a service logo lets you display logos of well-known services, so for example showing the logos of trusted payment providers lets users know they don’t have to worry about making a payment with us.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Component structure

Service logo: shows the logo, is available in greyscale, and is best when has the service name.

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.

By default, the logo comes with alternative text that’s the same as the name of the service. Check to make sure that this information is meaningful and not unnecessarily repeated.

Related components

CarrierLogo

Service logos present specific services. For carriers such as airlines and train companies, use a carrier logo.

Illustration

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