LN ST

@use 'sprucecss/scss/spruce' as *;

.avatar-demo {
  @include layout-stack('m');

  &__row {
    @include layout-cluster('s');
  }
}

.avatar {
  --avatar-size: 3rem;
  align-items: center;
  background-color: color-alpha('primary', 0.15);
  block-size: var(--avatar-size);
  border-radius: 50%;
  color: color('primary');
  display: inline-flex;
  flex-shrink: 0;
  font-size: calc(var(--avatar-size) * 0.38);
  font-weight: 700;
  inline-size: var(--avatar-size);
  justify-content: center;
  position: relative;

  img {
    block-size: 100%;
    border-radius: inherit;
    inline-size: 100%;
    object-fit: cover;
  }

  &--sm {
    --avatar-size: 2rem;
  }

  &--lg {
    --avatar-size: 4rem;
  }

  &--square {
    border-radius: radius('md');
  }

  &--more {
    background-color: color('surface-muted');
    color: color('text');
  }

  &__status {
    --status-color: #{color('success', 'alert')};
    background-color: var(--status-color);
    block-size: 28%;
    border: 2px solid color('background');
    border-radius: 50%;
    inline-size: 28%;
    inset-block-end: 0;
    inset-inline-end: 0;
    position: absolute;

    &--away {
      --status-color: #{color('warning', 'alert')};
    }

    &--offline {
      --status-color: #{color('border-strong')};
    }
  }
}

.avatar-group {
  @include clear-list;
  display: flex;

  li {
    margin: 0 !important;

    + li {
      margin-inline-start: -0.75rem !important;
    }
  }

  .avatar {
    box-shadow: 0 0 0 3px color('background');
  }

  // The items sit side by side: clear the stack margins of the base list style.
  > li {
    margin-block: 0;
    padding-block: 0;
  }
}

<div class="avatar-demo">
    <div class="avatar-demo__row">
        <span class="avatar avatar--sm"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=96&h=96&q=70" alt="Maya Chen" width="32" height="32" loading="lazy"></span>
        <span class="avatar"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=96&h=96&q=70" alt="Daniel Okafor" width="48" height="48" loading="lazy"><span class="avatar__status avatar__status--online"><span class="sr-only">online</span></span></span>
        <span class="avatar avatar--lg"><img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=96&h=96&q=70" alt="Ava Martinez" width="64" height="64" loading="lazy"><span class="avatar__status avatar__status--away"><span class="sr-only">away</span></span></span>
        <span class="avatar avatar--initials" role="img" aria-label="Leo Novak">LN</span>
        <span class="avatar avatar--square avatar--initials" role="img" aria-label="Spruce team">ST</span>
    </div>
    <ul class="avatar-group" role="list" aria-label="Project members">
        <li><span class="avatar"><img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=96&h=96&q=70" alt="Maya Chen" width="48" height="48" loading="lazy"></span></li>
        <li><span class="avatar"><img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=96&h=96&q=70" alt="Daniel Okafor" width="48" height="48" loading="lazy"></span></li>
        <li><span class="avatar"><img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=96&h=96&q=70" alt="Ava Martinez" width="48" height="48" loading="lazy"></span></li>
        <li><span class="avatar avatar--initials avatar--more" role="img" aria-label="5 more members">+5</span></li>
    </ul>
</div>

Avatar

Technical Details

Images have the person's name as alt (or use an empty alt when the name is right next to the avatar). Initials use role="img" with an aria-label.
The status dot has hidden text; color alone doesn't communicate the status.
Sizes are set with the --avatar-size custom property (--sm, --lg modifiers); the initials scale with it.
The group overlaps with a negative margin-inline-start and a ring in the background color, so it works in dark mode and RTL.