Avatar Group

Multiple avatars grouped together.

html

<div class="avatar-group avatar-group--cozy" role="group" aria-label="Team members, 3 more not shown">
  <span class="avatar-group__item" style="width:36px;height:36px;background:#A8E6C1;font-size:calc(36px * 0.38);" role="img" aria-label="Priya Nair">PN</span>
  <span class="avatar-group__item" style="width:36px;height:36px;background:#F5C2E0;font-size:calc(36px * 0.38);" role="img" aria-label="Alex Chen">AC</span>
  <span class="avatar-group__item" style="width:36px;height:36px;background:#BFD9F2;font-size:calc(36px * 0.38);" role="img" aria-label="Jordan Lee">JL</span>
  
  <span class="avatar-group__item avatar-group__more" style="width:36px;height:36px;background:#D9C8F0;font-size:calc(36px * 0.3);" role="img" aria-label="3 more members">+3</span>
  
</div>
<style>
.avatar-group { display: flex; font: 600 1em system-ui, sans-serif; }
.avatar-group__item { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #241430; border: 2px solid #FAF7F2; flex: none; }
.avatar-group--tight .avatar-group__item + .avatar-group__item { margin-left: -0.5em; }
.avatar-group--cozy .avatar-group__item + .avatar-group__item { margin-left: -0.28em; }
.avatar-group--loose .avatar-group__item + .avatar-group__item { margin-left: 0.1em; }
.avatar-group__more { font-weight: 700; }
</style>

tailwind

<div class="avatar-group-tw avatar-group-tw--cozy flex font-semibold" role="group" aria-label="Team members, 3 more not shown">
  <span class="avatar-group-tw__item inline-flex items-center justify-center rounded-full text-[#241430] border-2 border-[#FAF7F2] flex-none" style="width:36px;height:36px;background:#A8E6C1;font-size:calc(36px * 0.38);" role="img" aria-label="Priya Nair">PN</span>
  <span class="avatar-group-tw__item inline-flex items-center justify-center rounded-full text-[#241430] border-2 border-[#FAF7F2] flex-none" style="width:36px;height:36px;background:#F5C2E0;font-size:calc(36px * 0.38);" role="img" aria-label="Alex Chen">AC</span>
  <span class="avatar-group-tw__item inline-flex items-center justify-center rounded-full text-[#241430] border-2 border-[#FAF7F2] flex-none" style="width:36px;height:36px;background:#BFD9F2;font-size:calc(36px * 0.38);" role="img" aria-label="Jordan Lee">JL</span>
  
  <span class="avatar-group-tw__item inline-flex items-center justify-center rounded-full text-[#241430] border-2 border-[#FAF7F2] flex-none font-bold" style="width:36px;height:36px;background:#D9C8F0;font-size:calc(36px * 0.3);" role="img" aria-label="3 more members">+3</span>
  
</div>
<style>
.avatar-group-tw--tight .avatar-group-tw__item + .avatar-group-tw__item { margin-left: -0.5em; }
.avatar-group-tw--cozy .avatar-group-tw__item + .avatar-group-tw__item { margin-left: -0.28em; }
.avatar-group-tw--loose .avatar-group-tw__item + .avatar-group-tw__item { margin-left: 0.1em; }
</style>

react

const MEMBERS = [
  { name: "Priya Nair", initials: "PN", color: "#A8E6C1" },
  { name: "Alex Chen", initials: "AC", color: "#F5C2E0" },
  { name: "Jordan Lee", initials: "JL", color: "#BFD9F2" },
];

export function AvatarGroup({
  overflowCount = 3,
  size = 36,
  overlap = "cozy",
  showOverflow = true,
  color = "#D9C8F0",
}) {
  const gap = { tight: "-0.5em", cozy: "-0.28em", loose: "0.1em" }[overlap] ?? "-0.28em";
  const itemStyle = (bg, i) => ({
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    width: size, height: size, borderRadius: "50%", background: bg, color: "#241430",
    border: "2px solid #FAF7F2", flex: "none", fontSize: size * 0.38,
    marginLeft: i === 0 ? 0 : gap,
  });
  return (
    <div role="group" aria-label={`Team members, ${overflowCount} more not shown`}
      style={{ display: "flex", fontFamily: "system-ui, sans-serif", fontWeight: 600 }}>
      {MEMBERS.map((m, i) => (
        <span key={m.name} role="img" aria-label={m.name} style={itemStyle(m.color, i)}>{m.initials}</span>
      ))}
      {showOverflow && (
        <span role="img" aria-label={`${overflowCount} more members`}
          style={{ ...itemStyle(color, 1), fontSize: size * 0.3, fontWeight: 700 }}>
          +{overflowCount}
        </span>
      )}
    </div>
  );
}