Avatars - Documentation - tabler.github.io - a responsive, flat and full featured admin template

Jane Pearson Administrator

# Documentation

Browse source code
Introduction
Alerts Avatars Buttons Colors Cards Charts Form components Tags Typography
Edit this page

## Avatars

### Simple avatar

    <span class="avatar" style="background-image: url(./demo/faces/male/21.jpg)"></span>
    <span class="avatar" style="background-image: url(./demo/faces/male/25.jpg)"></span>
    <span class="avatar" style="background-image: url(./demo/faces/female/5.jpg)"></span>
    <span class="avatar" style="background-image: url(./demo/faces/female/17.jpg)"></span>
    <span class="avatar" style="background-image: url(./demo/faces/male/40.jpg)"></span>

### Avatar size

    <span class="avatar avatar-sm" style="background-image: url(./demo/faces/male/9.jpg)"></span>
    <span class="avatar" style="background-image: url(./demo/faces/female/8.jpg)"></span>
    <span class="avatar avatar-md" style="background-image: url(./demo/faces/male/4.jpg)"></span>
    <span class="avatar avatar-lg" style="background-image: url(./demo/faces/male/35.jpg)"></span>
    <span class="avatar avatar-xl" style="background-image: url(./demo/faces/female/29.jpg)"></span>
    <span class="avatar avatar-xxl" style="background-image: url(./demo/faces/male/2.jpg)"></span>

### Avatar status

    <span class="avatar" style="background-image: url(./demo/faces/male/2.jpg)"></span>
    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)">
      <span class="avatar-status"></span>
    </span>
    <span class="avatar" style="background-image: url(./demo/faces/male/9.jpg)">
      <span class="avatar-status bg-red"></span>
    </span>
    <span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)">
      <span class="avatar-status bg-green"></span>
    </span>
    <span class="avatar" style="background-image: url(./demo/faces/female/16.jpg)">
      <span class="avatar-status bg-yellow"></span>
    </span>

### Avatar placeholder

RB KH BK

    <span class="avatar">RB</span>
    <span class="avatar">KH</span>
    <span class="avatar">BK</span>
    <span class="avatar avatar-placeholder"></span>
    <span class="avatar"><i class="fe fe-more-horizontal"></i></span>

NG AM RB PR WH MR DB PP JR RB KH BK CA CW

    <span class="avatar avatar-blue">NG</span>
    <span class="avatar avatar-azure">AM</span>
    <span class="avatar avatar-indigo">RB</span>
    <span class="avatar avatar-purple">PR</span>
    <span class="avatar avatar-pink">WH</span>
    <span class="avatar avatar-red">MR</span>
    <span class="avatar avatar-orange">DB</span>
    <span class="avatar avatar-yellow">PP</span>
    <span class="avatar avatar-lime">JR</span>
    <span class="avatar avatar-green">RB</span>
    <span class="avatar avatar-teal">KH</span>
    <span class="avatar avatar-cyan">BK</span>
    <span class="avatar avatar-gray">CA</span>
    <span class="avatar avatar-gray-dark">CW</span>

### Avatars list

    <div class="avatar-list">
      <span class="avatar" style="background-image: url(./demo/faces/male/21.jpg)"></span>
      <span class="avatar" style="background-image: url(./demo/faces/male/25.jpg)"></span>
      <span class="avatar" style="background-image: url(./demo/faces/female/5.jpg)"></span>
      <span class="avatar" style="background-image: url(./demo/faces/female/17.jpg)"></span>
      <span class="avatar" style="background-image: url(./demo/faces/male/40.jpg)"></span>
    </div>

+8

    <div class="avatar-list avatar-list-stacked">
      <span class="avatar" style="background-image: url(./demo/faces/female/12.jpg)"></span>
      <span class="avatar" style="background-image: url(./demo/faces/female/21.jpg)"></span>
      <span class="avatar" style="background-image: url(./demo/faces/female/29.jpg)"></span>
      <span class="avatar" style="background-image: url(./demo/faces/female/2.jpg)"></span>
      <span class="avatar" style="background-image: url(./demo/faces/male/34.jpg)"></span>
      <span class="avatar">+8</span>
    </div>