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.

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

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>

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>