Skip to main contentSkip to site searchSkip to component search
Honeycomb

Avatar

The avatar component helps identify users (or other entities).

Minimal avatar image component, default version accepts img element as picture.

<a class="flix-avatar" href="#header">
  <img class="flix-avatar__image" src="/img/avatar-placeholder.png" alt="Picture of John Doe"/>
</a>

Size variations

flix-avatar--sm
smaller avatar
flix-avatar--lg
large avatar
flix-avatar--xl
extra large avatar 
<a class="flix-avatar flix-avatar--sm" href="#header">
  <img class="flix-avatar__image" src="/img/avatar-placeholder.png" alt="Picture of John Doe"/>
</a>
<a class="flix-avatar flix-avatar--lg" href="#header">
  <img class="flix-avatar__image" src="/img/avatar-placeholder.png" alt="Picture of John Doe"/>
</a>
<a class="flix-avatar flix-avatar--xl" href="#header">
  <img class="flix-avatar__image" src="/img/avatar-placeholder.png" alt="Picture of John Doe"/>
</a>

Avatar with icon component

You can also pass one of our icon components as an image. This will make your image themable out of the box and consistent with our icon design language.

When doing so make sure setting the color for the icon to primary-content and allow it to fill the whole element by setting the size to cover and toggling the fill-canvas variation.

<a class="flix-avatar" href="#">
  <flix-icon class="flix-avatar__image" name="profile" color="primary-content" size="cover" fill-canvas="" alt="Picture of John Doe"></flix-icon>
</a>

Avatar with inline SVG

You can provide an inline SVG instead of <img /> element.

If that's the case you should put the SVG code into flix-avatar__image container and make sure to provide a title to it with contents similar to an img alt text:

<a class="flix-avatar flix-avatar--lg" href="#header">
  <div class="flix-avatar__image">
    <svg fill="var(--flix-icon-secondary-color)" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="flix-icon profile-solid">
      <title>Picture of John Doe</title>
      <path d="M12 2a10 10 0 0 0-9.94 11.08l.05.32q.04.37.12.73l.09.34q.09.35.2.68l.1.32.28.66.13.28a10 10 0 0 0 .95 1.55l.12.16q.28.36.58.68l.08.09a9.97 9.97 0 0 0 14.48 0l.08-.09q.3-.33.57-.68.07-.07.12-.16a10 10 0 0 0 1.36-2.5l.11-.31q.12-.33.2-.68l.08-.34q.09-.36.13-.73l.05-.32q.05-.54.06-1.08A10 10 0 0 0 12 2m0 4c1.68 0 3.05 1.55 3.05 3.45s-1.37 3.46-3.05 3.46-3.05-1.55-3.05-3.46C8.95 7.55 10.32 6 12 6m0 14a8 8 0 0 1-6.22-2.99 4.9 4.9 0 0 1 3.8-3.22 4.36 4.36 0 0 0 4.84 0 4.9 4.9 0 0 1 3.8 3.22A8 8 0 0 1 12 20"></path>
    </svg>
  </div>
</a>