Avatar

Visual representation of a person.

html

<span class="avatar avatar--circle" style="--c:#A8E6C1;width:44px;height:44px;font-size:calc(44px * 0.4);" role="img" aria-label="Priya Nair">
  
  <span aria-hidden="true">PN</span>
</span>
<style>
.avatar { display: inline-flex; align-items: center; justify-content: center; background: var(--c); color: #241430; font: 600 1em system-ui, sans-serif; overflow: hidden; flex: none; }
.avatar--circle { border-radius: 50%; }
.avatar--rounded { border-radius: 22%; }
.avatar--square { border-radius: 0; }
.avatar__icon { width: 65%; height: 65%; color: #241430; }
</style>

tailwind

<span class="avatar-tw avatar-tw--circle inline-flex items-center justify-center overflow-hidden flex-none font-semibold" style="background:#A8E6C1;width:44px;height:44px;font-size:calc(44px * 0.4);color:#241430;" role="img" aria-label="Priya Nair">
  
  <span aria-hidden="true">PN</span>
</span>
<style>
.avatar-tw--circle { border-radius: 9999px; }
.avatar-tw--rounded { border-radius: 22%; }
.avatar-tw--square { border-radius: 0; }
</style>

react

export function Avatar({
  name = "Priya Nair",
  initials = "PN",
  shape = "circle",
  color = "#A8E6C1",
  size = 44,
  icon = false,
}) {
  const radius = { circle: "50%", rounded: "22%", square: "0" }[shape] ?? "50%";
  return (
    <span role="img" aria-label={name} style={{
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      background: color, color: "#241430", width: size, height: size,
      fontSize: size * 0.4, fontWeight: 600, borderRadius: radius,
      overflow: "hidden", flex: "none", fontFamily: "system-ui, sans-serif",
    }}>
      {icon ? (
        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style={{ width: "65%", height: "65%" }}>
          <circle cx="12" cy="8" r="4" /><path d="M4 20c0-4.4 3.6-8 8-8s8 3.6 8 8" />
        </svg>
      ) : (
        <span aria-hidden="true">{initials}</span>
      )}
    </span>
  );
}