Avatar

Avatar Figma Code Connected

Avatars represent users within an application and add familiarity when used alongside the user’s name.

Default avatar

The default avatar is 32px round with a 2px “border.” For placeholder avatars, the border is actually an inset box shadow with 12.5% opacity; this allows the border to darken whatever the background color is. For images, the border is an actual white border.

AG
HTML
Expand Edit in Playground Copy 

<span class="hc-avatar bg-info-100">AG</span>
<span class="hc-avatar">
  <img src="https://api.dicebear.com/8.x/fun-emoji/svg?seed=Maggie&size=80" class="hc-avatar-image">
</span>

Sizes

Six sizes are available for avatars: small (24px), default (32px), header (40px), medium (48px), large (80px), and profile (144px). Small and default should be used pretty much every time, unless there is a specific reason to go for a larger size.

AG AG AG AG AG AG
HTML
Expand Edit in Playground Copy 

<span class="hc-avatar hc-avatar--gray hc-avatar--sm">AG</span>
<span class="hc-avatar hc-avatar--gray">AG</span>
<span class="hc-avatar hc-avatar--gray hc-avatar--header">AG</span>
<span class="hc-avatar hc-avatar--gray hc-avatar--md">AG</span>
<span class="hc-avatar hc-avatar--gray hc-avatar--lg">AG</span>
<span class="hc-avatar hc-avatar--gray hc-avatar--profile">AG</span>

Colors

Set the background color of a placeholder avatar using any of the Tailwind (or your own framework’s) background color classes. Honeycomb also supports some convenience classes using our palette, with a .hc-avatar--dark modifier to darken the color.

The dark colors change the placeholder text to white, or you cans et this manually with .hc-avatar--contrast.

AB CD EF GH IJ
KL MN OP QR ST
KL KL
HTML
Expand Edit in Playground Copy 

<div class="flex flex-row justify-center items-center gap-2">
  <span class="hc-avatar hc-avatar--gray">AB</span>
  <span class="hc-avatar hc-avatar--blue">CD</span>
  <span class="hc-avatar hc-avatar--red">EF</span>
  <span class="hc-avatar hc-avatar--green">GH</span>
  <span class="hc-avatar hc-avatar--yellow">IJ</span>
</div>
<div class="flex flex-row justify-center items-center gap-2">
  <span class="hc-avatar hc-avatar--gray hc-avatar--dark">KL</span>
  <span class="hc-avatar hc-avatar--blue hc-avatar--dark">MN</span>
  <span class="hc-avatar hc-avatar--red hc-avatar--dark">OP</span>
  <span class="hc-avatar hc-avatar--green hc-avatar--dark">QR</span>
  <span class="hc-avatar hc-avatar--yellow hc-avatar--dark">ST</span>
</div>
<div class="flex flex-row justify-center items-center gap-2">
  <span class="hc-avatar bg-emerald-100">KL</span>
  <span class="hc-avatar bg-navy-100">KL</span>
</div>

Images

Add an image inside of the .hc-avatar instead of text and apply a class .hc-avatar-image to it for automatic handling. Make sure the image is large enough to fit inside of the size you choose.

HTML
Expand Edit in Playground Copy 

<span class="hc-avatar">
  <img src="https://api.dicebear.com/8.x/fun-emoji/svg?seed=Bonner&size=80" class="hc-avatar-image">
</span>
<span class="hc-avatar hc-avatar--md">
  <img src="https://api.dicebear.com/8.x/fun-emoji/svg?seed=St.Charles&size=80" class="hc-avatar-image">
</span>

Default user avatars

Honeycomb comes with 9 image avatars to use as defaults for users: book, calculator, chalkboard, circuit, earth, pencil, puzzle, ruler, and soccer. Append classes as .hc-avatar-image--earth, etc, to use them. You can include text inside of the span element for screen readers, but it will not be displayed.

To display these as rectangles or prerendered rounded rectangles, append the class .hc-avatar--square or .hc-avatar--rounded.

Book Book
Calculator Calculator
Chalkboard Chalkboard
Circuit Circuit
Earth Earth
Pencil Pencil
Puzzle Puzzle
Ruler Ruler
Soccer Soccer
HTML
Expand Edit in Playground Copy 

<div class="flex flex-row gap-2 md:col-start-2 justify-center">
  <span class="hc-avatar hc-avatar--md hc-avatar-image hc-avatar-image--book">Book</span>
  <span class="hc-avatar hc-avatar--md hc-avatar-image hc-avatar-image--book hc-avatar--rounded">Book</span>
</div>
<div class="flex flex-row gap-2 justify-center">
  <span class="hc-avatar hc-avatar--md hc-avatar-image hc-avatar-image--calculator">Calculator</span>
  <span class="hc-avatar hc-avatar--md hc-avatar-image hc-avatar-image--calculator hc-avatar--rounded">Calculator</span>
</div>
<div class="flex flex-row gap-2 justify-center">
  <span class="hc-avatar hc-avatar--md hc-avatar-image hc-avatar-image--chalkboard">Chalkboard</span>
  <span class="hc-avatar hc-avatar--md hc-avatar-image hc-avatar-image--chalkboard hc-avatar--rounded">Chalkboard</span>
</div>
<div class="flex flex-row gap-2 md:col-start-2 justify-center">
  <span class="hc-avatar hc-avatar--md hc-avatar-image hc-avatar-image--circuit">Circuit</span>
  <span class="hc-avatar hc-avatar--md hc-avatar-image hc-avatar-image--circuit hc-avatar--rounded">Circuit</span>
</div>
<div class="flex flex-row gap-2 justify-center">
  <span class="hc-avatar hc-avatar--md hc-avatar-image hc-avatar-image--earth">Earth</span>
  <span class="hc-avatar hc-avatar--md hc-avatar-image hc-avatar-image--earth hc-avatar--rounded">Earth</span>
</div>
<div class="flex flex-row gap-2 justify-center">
  <span class="hc-avatar hc-avatar--md hc-avatar-image hc-avatar-image--pencil">Pencil</span>
  <span class="hc-avatar hc-avatar--md hc-avatar-image hc-avatar-image--pencil hc-avatar--rounded">Pencil</span>
</div>
<div class="flex flex-row gap-2 md:col-start-2 justify-center">
  <span class="hc-avatar hc-avatar--md hc-avatar-image hc-avatar-image--puzzle">Puzzle</span>
  <span class="hc-avatar hc-avatar--md hc-avatar-image hc-avatar-image--puzzle hc-avatar--rounded">Puzzle</span>
</div>
<div class="flex flex-row gap-2 justify-center">
  <span class="hc-avatar hc-avatar--md hc-avatar-image hc-avatar-image--ruler">Ruler</span>
  <span class="hc-avatar hc-avatar--md hc-avatar-image hc-avatar-image--ruler hc-avatar--rounded">Ruler</span>
</div>
<div class="flex flex-row gap-2 justify-center">
  <span class="hc-avatar hc-avatar--md hc-avatar-image hc-avatar-image--soccer">Soccer</span>
  <span class="hc-avatar hc-avatar--md hc-avatar-image hc-avatar-image--soccer hc-avatar--rounded">Soccer</span>
</div>

Stacked groups

Use stacked groups of avatars when you need to display more than over avatar and/or you need to indicate that multiple users are involved.

For more than 4 avatars, the 4th should instead be a placeholder avatar with the count of additional avatars in the stack.

+10
HTML
Expand Edit in Playground Copy 

<div class="hc-avatar-stack">
  <span class="hc-avatar">
    <img src="https://api.dicebear.com/8.x/fun-emoji/svg?seed=Rocco&size=80" class="hc-avatar-image">
  </span>
  <span class="hc-avatar">
    <img src="https://api.dicebear.com/8.x/fun-emoji/svg?seed=Antonio&size=80" class="hc-avatar-image">
  </span>
  <span class="hc-avatar">
    <img src="https://api.dicebear.com/8.x/fun-emoji/svg?seed=Maeve&size=80" class="hc-avatar-image">
  </span>
  <span class="hc-avatar">
    <img src="https://api.dicebear.com/8.x/fun-emoji/svg?seed=John&size=80" class="hc-avatar-image">
  </span>
</div>
<div class="hc-avatar-stack">
  <span class="hc-avatar hc-avatar--md">
    <img src="https://api.dicebear.com/8.x/fun-emoji/svg?seed=Andrew&size=80" class="hc-avatar-image">
  </span>
  <span class="hc-avatar hc-avatar--md">
    <img src="https://api.dicebear.com/8.x/fun-emoji/svg?seed=Daniel&size=80" class="hc-avatar-image">
  </span>
  <span class="hc-avatar hc-avatar--md">
    <img src="https://api.dicebear.com/8.x/fun-emoji/svg?seed=James&size=80" class="hc-avatar-image">
  </span>
  <span class="hc-avatar hc-avatar--md">+10</span>
</div>

With Indicators

Use indicators overlayed on an avatar to signal a status for that user. The convenience class .hc-avatar--with-indicator should be used for a wrapping element and you do not need to add a position class to the indicator; they are required to be top right and this is handled automatically for avatars.

HTML
Expand Edit in Playground Copy 

<span class="hc-avatar--with-indicator">
  <span class="hc-avatar hc-avatar--sm">
    <img src="https://api.dicebear.com/8.x/fun-emoji/svg?seed=Phillies&size=80" class="hc-avatar-image">
  </span>
  <span class="hc-indicator-status hc-indicator--success"></span>
</span>
<span class="hc-avatar--with-indicator">
  <span class="hc-avatar">
    <img src="https://api.dicebear.com/8.x/fun-emoji/svg?seed=Phillies&size=80" class="hc-avatar-image">
  </span>
  <span class="hc-indicator-status hc-indicator--success"></span>
</span>
<span class="hc-avatar--with-indicator">
  <span class="hc-avatar hc-avatar--header">
    <img src="https://api.dicebear.com/8.x/fun-emoji/svg?seed=Phillies&size=80" class="hc-avatar-image">
  </span>
  <span class="hc-indicator-status hc-indicator--success"></span>
</span>
<span class="hc-avatar--with-indicator">
  <span class="hc-avatar hc-avatar--md">
    <img src="https://api.dicebear.com/8.x/fun-emoji/svg?seed=Phillies&size=80" class="hc-avatar-image">
  </span>
  <span class="hc-indicator-status hc-indicator--success"></span>
</span>
<span class="hc-avatar--with-indicator">
  <span class="hc-avatar hc-avatar--lg">
    <img src="https://api.dicebear.com/8.x/fun-emoji/svg?seed=Phillies&size=80" class="hc-avatar-image">
  </span>
  <span class="hc-indicator-status hc-indicator--success"></span>
</span>
<span class="hc-avatar--with-indicator">
  <span class="hc-avatar hc-avatar--profile">
    <img src="https://api.dicebear.com/8.x/fun-emoji/svg?seed=Phillies&size=200" class="hc-avatar-image">
  </span>
  <span class="hc-indicator-status hc-indicator--success"></span>
</span>