# Avatars

Avatars can be used to represent people or objects. They come in different sizes and can be used in various scenarios.

## Examples

### Default

Avatars can be custom photos, uploaded by users, or custom placeholders with a background and the user’s name initials uppercased.

Show code
TC WS AE

    <span class="avatar bg-primary text-white">TC</span>

    <span class="avatar bg-warning text-white">WS</span>

    <span class="avatar bg-dark text-white">AE</span>

### Links

Show code
TC WS AE

    <a href="#" class="avatar bg-primary text-white">TC</a>

    <a href="#" class="avatar bg-warning text-white">WS</a>

    <a href="#" class="avatar bg-dark text-white">AE</a>

### Sizing

Show code
TC WS AE

    <span class="avatar bg-primary text-white avatar-sm">TC</span>

    <span class="avatar bg-warning text-white">WS</span>

    <span class="avatar bg-dark text-white avatar-lg">AE</span>

### Shape

Show code
TC WS AE

    <span class="avatar bg-primary text-white rounded-circle avatar-sm">TC</span>

    <span class="avatar bg-warning text-white rounded-circle">WS</span>

    <span class="avatar bg-dark text-white rounded-circle avatar-lg">AE</span>

### Image

Show code

    <img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar  avatar-sm">

    <img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar ">

    <img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar  avatar-lg">

Show code

    <img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar  rounded-circle avatar-sm">

    <img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar  rounded-circle">

    <img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar  rounded-circle avatar-lg">

## Avatar group

### Text

Show code
TC WS AE

    <div class="avatar-group">

    <span class="avatar bg-primary text-white rounded-circle">TC</span>

    <span class="avatar bg-warning text-white rounded-circle">WS</span>

    <span class="avatar bg-dark text-white rounded-circle">AE</span>
    </div>

### Image

Show code

    <div class="avatar-group">
        <img alt="Image placeholder" src="../../assets/img/theme/light/person-1.jpg" class="avatar  rounded-circle">

        <img alt="Image placeholder" src="../../assets/img/theme/light/person-2.jpg" class="avatar  rounded-circle">

        <img alt="Image placeholder" src="../../assets/img/theme/light/person-3.jpg" class="avatar  rounded-circle">

    </div>