Components

Avatar(Usage)

Display user images and badges on Thumbtack.

Options

Entities & Users

One of the defining guidelines for avatars and their shape is what the avatar is representing. We divide these two groups into entities and users.

Entity: a company, business, or service. A square with our standard 4px border-radius is best here.
User: a person or user. A circle is best suited for people - primarily faces.
Entity Avatar
User Avatar

Sizes

Extra Large: 140px
Large: 100px
Medium: 72px
Small: 48px
Extra Small: 32px
Extra Large
Large
Medium
Small
Extra Small

Blank Avatars

When images aren’t provided for avatars we use blank states in their place.

Initials are used for blank profiles and differ for entities and users. For entities, we use the first letter of the business name. For users, we use the first and last initial of the user’s name.

The initials will display capitalized and bolded.

Type Sizes

Extra Large: 32px
Large: 24px
Medium: 20px
Small: 16px
Extra Small: 10px
A
Entity avatars get the first initial of the business name
BB
User avatars get the first and last initial

Color

Blank avatars get assigned a 100-level color from our extended palette based on the ascii value of the initials attached to the user name or entity.

Was this page helpful?

We use this feedback to improve the quality of our documentation.