Avatar
Avatars are visual representations of users and stores.
Human
Avatars help humanize the product experience by connecting users with the product and to each other.
Personalized
Avatars are meant to be personalized and work most efficiently when they are representative of the customer, user, or brand.
- Signed-out
- Default
- Image
- eBay
Signed-out
The signed-out avatar displays when the user is not signed in. This variation has no personalized attributes since there's no user information to display.
Default
The default avatar displays if the user hasn’t added a custom image. They’re assigned one of 8 color combinations, based on their user ID. The characters A–Z, <>’*”, 0–9 can be used. The avatar shows the first character of the user ID in uppercase.
Image
Users can personalize their avatars with a custom image. We use the image avatar for photos, logos, and artwork. Customized avatars make it easier to distinguish and identify users.
eBay
We use the eBay avatar to let users know they’re communicating with eBay. This avatar typically appears in messaging and email correspondence.
Size
Avatars appear across native and web experiences at various sizes. They’re designed at 48px and scaled up or down from there. The 7 avatar sizes are 32, 40, 48, 56, 64, 96, and 128 pixels. The character behaves like a part of an icon, and doesn't scale with font-size settings.
Color
Our default avatar uses a set of 8 color combinations. Learn more about these color combinations in the Color pairing tool.
Image cropping (square and 4:3)
Square, 4:3, and aspect ratios in between are set to "fill." This ensures images fully occupy the avatar's shape with minimal cropping.
Image cropping (below 4:3)
Crops narrower than a 4:3 aspect ratio, such as 16:9 or more extreme formats, are set to “fit.”This prevents logos and other important areas from being cut off.
Image scrim
The avatar component uses the image component, which automatically applies a subtle scrim over the image. This keeps the avatar's outline visible against light or white backgrounds and when cropping is severe.
Sizing
Do use the provided avatar sizes.
Don’t create arbitrary sizes.
Styling
Do use the 8 color combinations provided for the default avatar.
Don’t create custom color palettes for the default avatar.
Do use a single character within the default avatar.
Don’t use more than one character within the default avatar.
Do use uppercase for the character within the default avatar.
Don’t use lowercase for the character within the default avatar.
Do use a circle shape for avatars.
Don’t use other shapes for avatars.
Do use approved characters (A–Z, <>’*”, 0–9) in the default avatar.
Don’t use emojis or other unapproved characters in the default avatar.
Do use the signed-out avatar to represent signed-out users.
Don’t use the signed-out avatar to represent signed-in users.
Image handling
Do follow the image cropping guidance. 16:9 ratio images are set to “fit”.
Don’t set 16:9 ratio images to “fill,” as this will result in poor cropping.
Do use the image scrim over all image-based avatars.
Don’t remove the image scrim, as this can lead to a poorly cropped avatar with an unclear outline.
