<div class="avatar avatar--xl">
    <img class="avatar__img avatar__img--xl" src="https://i.pravatar.cc/300
                  " alt="avatar" />
</div>

<div class="avatar avatar--lg">
    <img class="avatar__img avatar__img--lg" src="https://i.pravatar.cc/300
                    " alt="avatar" />
</div>

<div class="avatar avatar--md">
    <img class="avatar__img avatar__img--md" src="https://i.pravatar.cc/300
                    " alt="avatar" />
</div>

<div class="avatar avatar--sm">
    <img class="avatar__img avatar__img--sm" src="https://i.pravatar.cc/300
                    " alt="avatar" />
</div>

<div class="avatar avatar--xs">
    <img class="avatar__img avatar__img--xs" src="https://i.pravatar.cc/300
                    " alt="avatar" />
</div>