Jane Doe View Profile

Do you know the latest update of 2022? 🎉 Our roadmap is alive for future updates.

My Cart
1 Item
Smart Watches 3

By Sony
Remove Item

$59.00

Notifications
4 New
New message received 💌 24 unread messages.
Congratulations team 🎉 You have 12 new sales!
Network Error ⛔️ Operation couldn’t be completed
Disk Utility 💥 You have not enough disk capacity
Profile Settings View Profile
Explore Creators
Help Desk
Logout

Avatar

Avatars can be used to represent people or objects. It supports images, Icons, or letters.

Basic

Three sizes and two shapes are available. 

                            
<div>
    <div class="avatar-item d-flex align-items-center justify-content-center hp-bg-primary-4 hp-text-color-primary-1 rounded-circle" style="width: 64px; height: 64px;">
        <i class="iconly-Curved-User" style="font-size: 46px; letter-spacing: -2px;"></i>
    </div>

    <div class="avatar-item d-flex align-items-center justify-content-center avatar-lg hp-bg-primary-4 hp-text-color-primary-1 rounded-circle">
        <i class="iconly-Curved-User"></i>
    </div>

    <div class="avatar-item d-flex align-items-center justify-content-center hp-bg-primary-4 hp-text-color-primary-1 rounded-circle">
        <i class="iconly-Curved-User"></i>
    </div>

    <div class="avatar-item d-flex align-items-center justify-content-center avatar-sm hp-bg-primary-4 hp-text-color-primary-1 rounded-circle">
        <i class="iconly-Curved-User"></i>
    </div>
</div>

<div>
  <div class="avatar-item d-flex align-items-center justify-content-center hp-bg-primary-4 hp-text-color-primary-1 rounded" style="width: 64px; height: 64px;">
      <i class="iconly-Curved-User" style="font-size: 46px; letter-spacing: -2px;"></i>
  </div>
  
  <div class="avatar-item d-flex align-items-center justify-content-center avatar-lg hp-bg-primary-4 hp-text-color-primary-1 rounded">
      <i class="iconly-Curved-User"></i>
  </div>
  
  <div class="avatar-item d-flex align-items-center justify-content-center hp-bg-primary-4 hp-text-color-primary-1 rounded">
      <i class="iconly-Curved-User"></i>
  </div>
  
  <div class="avatar-item d-flex align-items-center justify-content-center avatar-sm hp-bg-primary-4 hp-text-color-primary-1 rounded">
      <i class="iconly-Curved-User"></i>
  </div>
</div>

Avatar Group

Avatar group display.

User
K
User
K
+4
User
K
+2 
                            
<div class="avatar-group">
    <div class="avatar-item d-flex align-items-center justify-content-center hp-bg-primary-4 hp-text-color-primary-1 rounded-circle">
        <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="User">
    </div>

    <div class="avatar-item d-flex align-items-center justify-content-center hp-bg-danger-4 hp-text-color-danger-1 rounded-circle"> K </div>
   
    <div data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="User">
        <div class="avatar-item d-flex align-items-center justify-content-center rounded-circle">
            <i class="iconly-Curved-User" style="font-size: 22px; letter-spacing: -2px;"></i>
        </div>
    </div>

    <div class="avatar-item d-flex align-items-center justify-content-center hp-bg-info-4 hp-text-color-info-1 rounded-circle">
        <i class="ri-reactjs-line" style="font-size: 18px; letter-spacing: -2px;"></i>
    </div>
</div>

<div class="divider"></div>

<div class="avatar-group" data-max="2">
    <div class="avatar-item d-flex align-items-center justify-content-center hp-bg-primary-4 hp-text-color-primary-1 rounded-circle">
        <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="User">
    </div>

    <div class="avatar-item d-flex align-items-center justify-content-center hp-bg-warning-4 hp-text-color-warning-1 rounded-circle"> K </div>
    
    <div data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="User">
        <div class="avatar-item d-flex align-items-center justify-content-center rounded-circle">
            <i class="iconly-Curved-User"></i>
        </div>
    </div>

    <div class="avatar-item d-flex align-items-center justify-content-center hp-bg-info-4 hp-text-color-info-1 rounded-circle">
        <i class="ri-reactjs-line"></i>
    </div>

    <div class="avatar-item avatar-item-max-count d-none bg-danger-4 hp-bg-dark-danger text-danger">
        <span></span>

        <div class="avatar-group-dropdown">
            <div class="avatar-group-dropdown-container"></div>
        </div>
    </div>
</div>

<div class="divider"></div>

<div class="avatar-group">
    <div class="avatar-item d-flex align-items-center justify-content-center avatar-lg hp-bg-primary-4 hp-text-color-primary-1 rounded-circle">
        <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="User">
    </div>
   
    <div class="avatar-item d-flex align-items-center justify-content-center avatar-lg hp-bg-warning-4 hp-text-color-warning-1 rounded-circle"> K </div>
   
    <div class="avatar-item avatar-lg avatar-item-max-count hp-bg-danger-4 hp-text-color-danger-1">
        <span>+2</span>

        <div class="avatar-group-dropdown">
            <div class="avatar-group-dropdown-container">
                <div data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title="User">
                    <div class="avatar-item d-flex align-items-center justify-content-center avatar-lg rounded-circle">
                        <i class="iconly-Curved-User"></i>
                    </div>
                </div>

                <div class="avatar-item d-flex align-items-center justify-content-center avatar-lg hp-bg-info-4 hp-text-color-info-1 rounded-circle">
                    <i class="ri-reactjs-line"></i>
                </div>
            </div>
        </div>
    </div>
</div>

Type

Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.

S
USER
D 
                            
<div class="avatar-item d-flex align-items-center justify-content-center hp-bg-primary-4 hp-text-color-primary-1 rounded-circle">
    <i class="iconly-Curved-User"></i>
</div>

<div class="avatar-item d-flex align-items-center justify-content-center hp-bg-primary-4 hp-text-color-primary-1 rounded-circle"> S </div>

<div class="avatar-item d-flex align-items-center justify-content-center hp-bg-primary-4 hp-text-color-primary-1 rounded-circle" style="width: 40px; height: 40px;">
    <span style="font-size: 12px;">USER</span>
</div>

<div class="avatar-item d-flex align-items-center justify-content-center hp-bg-danger-4 hp-text-color-danger-1 rounded-circle"> D </div>

<div class="avatar-item d-flex align-items-center justify-content-center hp-bg-success-4 hp-text-color-success-1 rounded-circle">
    <i class="iconly-Curved-User"></i>
</div>

With Badge

Usually used for reminders and notifications.

1 
                            
<div class="position-relative">
    <div class="avatar-item d-flex align-items-center justify-content-center avatar-lg hp-bg-primary-4 hp-text-color-primary-1 rounded">
        <i class="iconly-Curved-User"></i>
    </div>

    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary"> 1 </span>
</div>

<div class="position-relative">
    <div class="avatar-item d-flex align-items-center justify-content-center avatar-lg hp-bg-primary-4 hp-text-color-primary-1 rounded">
        <i class="iconly-Curved-User"></i>
    </div>

    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger d-block p-0" style="width: 6px; height: 6px;"></span>
</div>
Customise your YODA Preview in Real Time
THEME Dark & Light
CONTENT WIDTH FULL Width & Boxed