---
title: Logo suite
description: Use a logo suite to present a list logos, such as sponsors or vendors.
keywords: ['logos', 'sponsors', 'vendors', 'clients', 'enterprise', 'social proof']
---

## Anatomy

![A complete logo suite component, featuring a heading, description and two rows of 6 vendor logos in their default muted colors](https://github.com/primer/brand/assets/13340707/1a5e494f-7bd3-497c-933c-6c809a78422c)

- **Heading:** an optional main title of the logo suite.
- **Description:** optional information that describes the logos shown.
- **Logobar:** a space for a list of logos, with three appearance options.
- **Divider:** an optional divider to separate the logo suite from following content.

## Usage

Use the logo suite component to showcase a list of logos, such as for clients, sponsors, or related enterprises.

A logo suite is intended to build credibility, trust, and provide social proof by displaying consistent logos.

Logo suite should be used for groups of logos more than 4 and less than 12. To create the best visual consistency and balance, rearrange and resize the logos when necessary to create similar area distribution and attention to each of the logos.

### Arrangement

**✅ Do**

![](https://github.com/primer/brand/assets/131988618/da2bd3f3-c7d8-4880-b30d-c05dd4897ba6)

_Arrange the logos so that the sizes, heights, colors, and areas of the separate logos create consistency and
balance._

**❌ Don't**

![](https://github.com/primer/brand/assets/13340707/d7ac28ec-e341-4d77-8220-fd4197d5613b)

_Don’t place logos without considering the spatial balance of the logo suite. Rearrange the logos to prevent using
more than two rows or imbalance._

### Color uniformity

**✅ Do**

![](https://github.com/primer/brand/assets/13340707/b7126430-0d81-4fb6-bd7d-8f35cff923dd)

_Ensure that the colors are consistent across the logos to match the logo bar option. Ensure spacing between logos
are consistent._

**❌ Don't**

![](https://github.com/primer/brand/assets/13340707/85f477d5-9c3d-4db3-847c-1bcf3539ab67)

_Don’t use logos with inconsistent colors or don’t match the logo bar option. Don’t use inconsistent spacing._

## Options

### Logo bar appearance

The logo suite offers three appearance options:

- `muted`: The muted option is suitable for displaying 6+ logos and displays logos in a `secondary` color. It allows for two rows of logos, maintaining a clean and organized appearance.
- `emphasis`: The emphasis option is designed for spotlighting 5 or fewer logos in the `primary` color. It displays logos larger, drawing more attention to the logos.
- `marquee`: The marquee option provides a flowing logo animation and can accommodate up to 12 logos. It is ideal for scenarios with limited page real estate.

The `muted` and `emphasis` variants will automatically be applied if they are not specified. The `muted` variant will be applied if there are 6 or more logos, and the `emphasis` variant will be applied if there are 5 or fewer logos.

All three options on the logo bar contains an optional divider. This divider can serve as a visual separator. These three options can be used adjacently.

![](https://github.com/primer/brand/assets/131988618/d525e6b1-bf67-4684-9300-401ef7686b47)

_Use the muted option when displaying 6-12 logos across two rows. 2 rows (when using 6-12 logos)._

![](https://github.com/primer/brand/assets/131988618/ce3e22f1-9852-4869-830b-5d54b6a1a039)

_The emphasis option can be used to spotlight logos. It is best used with 5 or fewer logos to create 1 row\._

![](https://github.com/primer/brand/assets/131988618/409d7a90-d086-438b-80ab-31350f6c42fa)

_The marquee options allows for different speed options._

### Alignment

The logo suite comes with start and center align options. Only the heading and description will have visible changes to their alignment as logos will be consistently center aligned to create balance. By default, the logo suite is aligned to the start of the page.

## Accessibility

Always ensure that a heading is provided to the logo suite. Headings provide leading context to the logos shown, and serve as a navigation hook for assistive technologies. It can be visually hidden if needed.

## Related components

- [Image](../Image/index.md): to display a graphical representation.
- [Ordered List](../OrderedList/index.md): to display a list of numbered items.
- [Unordered List](../UnorderedList/index.md): to present a collection of items without specific ordering.
