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