Thumbprint logo

Avatar

Display user images and badges on Thumbtack

Avatar variations

Avatars are available as two components: UserAvatar and EntityAvatar.

<div className="flex">
  <div className="mr3">
    <EntityAvatar
      imageUrl="https://i.pravatar.cc/140?img=49"
      size="xlarge"
    />
  </div>
  <div>
    <UserAvatar
      imageUrl="https://i.pravatar.cc/140?img=55"
      size="xlarge"
    />
  </div>
</div>

UserAvatar is for people or users whereas EntityAvatar is for companies, businesses, or services.
Avatar sizes
Both UserAvatar and EntityAvatar are available in five sizes ranging from xlarge to xsmall.
<>
  <div className="flex items-center mb4">
    <div className="mr3">
      <UserAvatar
        imageUrl="https://i.pravatar.cc/140?img=16"
        size="xlarge"
      />
    </div>
    <div className="mr3">
      <UserAvatar
        imageUrl="https://i.pravatar.cc/140?img=6"
        size="large"
      />
    </div>
    <div className="mr3">
      <UserAvatar
        imageUrl="https://i.pravatar.cc/140?img=7"
        size="medium"
      />
    </div>
    <div className="mr3">
      <UserAvatar
        imageUrl="https://i.pravatar.cc/140?img=10"
        size="small"
      />
    </div>
    <div className="mr3">
      <UserAvatar
        imageUrl="https://i.pravatar.cc/140?img=12"
        size="xsmall"
      />
    </div>
  </div>
  <div className="flex items-center">
    <div className="mr3">
      <EntityAvatar
        imageUrl="https://i.pravatar.cc/140?img=64"
        size="xlarge"
      />
    </div>
    <div className="mr3">
      <EntityAvatar
        imageUrl="https://i.pravatar.cc/140?img=22"
        size="large"
      />
    </div>
    <div className="mr3">
      <EntityAvatar
        imageUrl="https://i.pravatar.cc/140?img=32"
        size="medium"
      />
    </div>
    <div className="mr3">
      <EntityAvatar
        imageUrl="https://i.pravatar.cc/140?img=34"
        size="small"
      />
    </div>
    <div className="mr3">
      <EntityAvatar
        imageUrl="https://i.pravatar.cc/140?img=38"
        size="xsmall"
      />
    </div>
  </div>
</>

Avatars without images
Avatars without images can display the user or entity’s initials instead. The initials are assigned to a color based on the first letter in the initials prop.
<>
  <div className="flex mb4">
    <div className="mr2">
      <UserAvatar
        initials="AA"
        size="large"
      />
    </div>
    <div className="mr2">
      <UserAvatar
        initials="BA"
        size="large"
      />
    </div>
    <div className="mr2">
      <UserAvatar
        initials="CA"
        size="large"
      />
    </div>
    <div className="mr2">
      <UserAvatar
        initials="DA"
        size="large"
      />
    </div>
    <div className="mr2">
      <UserAvatar
        initials="EA"
        size="large"
      />
    </div>
    <div>
      <UserAvatar
        initials="HA"
        size="large"
      />
    </div>
  </div>
  <div className="flex">
    <div className="mr2">
      <EntityAvatar
        initial="A"
        size="large"
      />
    </div>
    <div className="mr2">
      <EntityAvatar
        initial="B"
        size="large"
      />
    </div>
    <div className="mr2">
      <EntityAvatar
        initial="C"
        size="large"
      />
    </div>
    <div className="mr2">
      <EntityAvatar
        initial="D"
        size="large"
      />
    </div>
    <div className="mr2">
      <EntityAvatar
        initial="E"
        size="large"
      />
    </div>
    <div>
      <EntityAvatar
        initial="F"
        size="large"
      />
    </div>
  </div>
</>

Avatar badges
Deprecated
Adding bages to the Avatar components is deprecated. To indicate hired status of a user, show this information separately next to the avatar.
Badges can be added to avatars to denote information including hired status and online status.
Online
This badge indicates that a user or entity is online.
<div>
  <div className="flex items-center mb4">
    <div className="mr2">
      <UserAvatar
        imageUrl="https://i.pravatar.cc/140?img=51"
        isOnline
        size="xlarge"
      />
    </div>
    <div className="mr2">
      <UserAvatar
        imageUrl="https://i.pravatar.cc/140?img=51"
        isOnline
        size="large"
      />
    </div>
    <div className="mr2">
      <UserAvatar
        imageUrl="https://i.pravatar.cc/140?img=51"
        isOnline
        size="medium"
      />
    </div>
    <div className="mr2">
      <UserAvatar
        imageUrl="https://i.pravatar.cc/140?img=51"
        isOnline
        size="small"
      />
    </div>
    <div className="mr2">
      <UserAvatar
        imageUrl="https://i.pravatar.cc/140?img=51"
        isOnline
        size="xsmall"
      />
    </div>
  </div>
  <div className="flex items-center">
    <div className="mr2">
      <EntityAvatar
        imageUrl="https://i.pravatar.cc/140?img=59"
        isOnline
        size="xlarge"
      />
    </div>
    <div className="mr2">
      <EntityAvatar
        imageUrl="https://i.pravatar.cc/140?img=59"
        isOnline
        size="large"
      />
    </div>
    <div className="mr2">
      <EntityAvatar
        imageUrl="https://i.pravatar.cc/140?img=59"
        isOnline
        size="medium"
      />
    </div>
    <div className="mr2">
      <EntityAvatar
        imageUrl="https://i.pravatar.cc/140?img=59"
        isOnline
        size="small"
      />
    </div>
    <div className="mr2">
      <EntityAvatar
        imageUrl="https://i.pravatar.cc/140?img=59"
        isOnline
        size="xsmall"
      />
    </div>
  </div>
</div>

Checked
<div className="flex items-center mb4">
  <div className="mr2">
    <UserAvatar
      imageUrl="https://i.pravatar.cc/140?img=58"
      isChecked
      size="xlarge"
    />
  </div>
  <div className="mr2">
    <UserAvatar
      imageUrl="https://i.pravatar.cc/140?img=58"
      isChecked
      size="large"
    />
  </div>
  <div className="mr2">
    <UserAvatar
      imageUrl="https://i.pravatar.cc/140?img=58"
      isChecked
      size="medium"
    />
  </div>
  <div className="mr2">
    <UserAvatar
      imageUrl="https://i.pravatar.cc/140?img=58"
      isChecked
      size="small"
    />
  </div>
  <div className="mr2">
    <UserAvatar
      imageUrl="https://i.pravatar.cc/140?img=58"
      isChecked
      size="xsmall"
    />
  </div>
</div>

Props
UserAvatar
  • imageUrl
    HTTPS URL that points a user's avatar. The imageURL will take
precendence over initials if both are supplied.
    

    Type
    string
  • initials
    The user's initials. This should be passed in as a two character string
for best results.
    

    Type
    string
  • fullName
    The user's full name. This is used as title and alt text.
    

    Type
    string
  • size
    The set of avatar sizes that we support.
    

    Type
    'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | number
  • isChecked
    deprecated
    Displays a badge of a checkmark next to the Avatar.
    

    Note: 
    Indicate this information outside of the avatar instead.
    

    Type
    boolean
  • isOnline
    deprecated
    Displays a badge if the user is online.
    

    Note: 
    Indicate this information outside of the avatar instead.
    

    Type
    boolean
EntityAvatar
  • imageUrl
    HTTPS URL that points a user's avatar. The imageURL will take
precendence over initials if both are supplied.
    

    Type
    string
  • initial
    The entity's initial. This should be passed in as a one character string.
    

    Type
    string
  • fullName
    The entity's full name. This is used as title and alt text.
    

    Type
    string
  • size
    The set of avatar sizes that we support.
    

    Type
    'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | number
  • isOnline
    deprecated
    Displays a badge if the user is online.
    

    Note: 
    Indicate this information outside of the avatar instead.
    

    Type
    boolean