The OdinAdmin template has just been developed — explore the new dashboard, modules and settings. See Details

Avatars

Initials, pictures and icons in six sizes and three shapes, with status dots, counters, groups, name blocks and a picture upload.

Sizes.avatar-xs … .avatar-xxl
NM NM NM NM NM NM
Julia Fischer Julia Fischer Julia Fischer Julia Fischer Julia Fischer Julia Fischer 
<span class="avatar avatar-lg c2">NM</span>
<span class="avatar avatar-lg"><img src="images/avatars/avatar-2.svg" alt="Julia Fischer"></span>
<!-- xs 24 · sm 32 · default 40 · lg 56 · xl 72 · xxl 96 px -->
Shapes & colours.avatar-rounded · .soft · .solid
Circle · rounded · square
AK AK AK Pieter Janssen Pieter Janssen Pieter Janssen
Gradient tones .c1 – .c5 (same as .av-sm)
TMNMJFCMPJ
Soft and solid .soft / .solid + colour class
OD ET MR SL OB AT HW LO 
<span class="avatar avatar-rounded c1">AK</span>
<span class="avatar soft success">ET</span>
<span class="avatar solid dark">HW</span>
Icons & placeholders.avatar-empty

Use an icon for teams, companies and the system, and .avatar-empty when there is no person yet (unassigned).

<span class="avatar soft violet"><i class="fas fa-users"></i></span>
<span class="avatar avatar-empty"><i class="fas fa-user"></i></span>
Status, counters & ring.avatar-status · .avatar-badge
Online · away · busy · offline
Nurdin Mukhambet Camille Martin JF PJ AK CM
Counter · icon badge · ring
Sophie Laurent3 NM Elif Toprak PJ 
<span class="avatar avatar-lg">
  <img src="…" alt="Nurdin Mukhambet">
  <span class="avatar-status online" title="Online"></span>
</span>
<span class="avatar c2">NM<span class="avatar-badge">3</span></span>
Groups.avatar-group
Default · hover lifts one
Nurdin Mukhambet Julia Fischer TM Pieter Janssen CM +6
Small, tight .is-tight · with add button
NM JF PJ +2
Liam O’Connor Marco Ricci
Large, rounded
Camille Martin Elif Toprak Sophie Laurent +9 
<div class="avatar-group">
  <span class="avatar c1" title="Thomas Müller">TM</span>
  <span class="avatar"><img src="…" alt="Julia Fischer"></span>
  <span class="avatar avatar-more">+6</span>
</div>
With name.avatar-item · .avatar-chip
Nurdin MukhambetAdministrator
JF
Julia Fischerjulia.fischer@odincms.io
Chips (assignees, mentions)
NMNurdin Julia PJPieter 
<div class="avatar-item">
  <span class="avatar c3">JF</span>
  <div><span class="ai-name">Julia Fischer</span><span class="ai-sub">Editor</span></div>
</div>
<span class="avatar-chip"><span class="avatar c2">NM</span>Nurdin</span>
Team listAvatars in a list
  • Nurdin MukhambetAdministrator · Bishkek
    Admin
  • Julia FischerEditor · in a meeting
    Editor
  • AK
    Aigerim KasymovaEditor
    Editor
  • Pieter JanssenAuthor · away for 20 min
    Author
  • Hannah WeberInvited · not signed in yet
    Invited
NM

Nurdin Mukhambet

Administrator · nurdin@odincms.io

Click the camera or drop an image on the avatar. JPG, PNG, WebP or SVG, up to 2 MB.

<div class="avatar-edit" data-avatar-upload data-max-size="2">
  <span class="avatar avatar-xl c2">NM</span>
  <input type="file" id="avatar-file" accept="image/*">
  <label class="avatar-edit-btn" for="avatar-file">
    <i class="fas fa-camera"></i>
  </label>
</div>
<!-- js/forms.js · odin:avatar-change { file } -->