Avatar

The Avatar component provides lightweight user profile visuals using native img and span elements.

Ignix Lite avatars support multiple sizes and text fallbacks for initials.

---

Preview

JD

Code

<img
  src="https://picsum.photos/100"
  alt="User"
  data-size="sm"
/>

<img
  src="https://picsum.photos/100"
  alt="User"
  data-size="md"
/>

<img
  src="https://picsum.photos/100"
  alt="User"
  data-size="lg"
/>

<span data-size="md">
  JD
</span>

Usage

Preview

Sarah Johnson

Product Designer

Code

  <img
    src="https://picsum.photos/100"
    alt="Sarah"
    data-size="md"
  />

 
    <strong>Sarah Johnson</strong>

    <p>Product Designer</p>

---

Attributes

Attribute	Type	Description
data-size	'sm' | 'md' | 'lg'	Controls avatar size
src	string	Avatar image source
alt	string	Accessible image description