Avatars are useful for chat UIs, profile pictures and account photos.

<div class="c-avatar u-super">
  <img class="c-avatar__img" src="https://unsplash.it/200/?image=823">
</div>
<div class="c-avatar u-xlarge">
  <img class="c-avatar__img" src="https://unsplash.it/200/?image=823">
</div>
<div class="c-avatar u-large">
  <img class="c-avatar__img" src="https://unsplash.it/200/?image=823">
</div>
<div class="c-avatar">
  <img class="c-avatar__img" src="https://unsplash.it/200/?image=823">
</div>
<div class="c-avatar u-small">
  <img class="c-avatar__img" src="https://unsplash.it/200/?image=823">
</div>
<div class="c-avatar u-xsmall">
  <img class="c-avatar__img" src="https://unsplash.it/200/?image=823">
</div> 

2 Images

<div class="c-avatar u-super">
  <img class="c-avatar__img" src="https://unsplash.it/200/?image=823">
  <img class="c-avatar__img" src="https://unsplash.it/200/?image=815">
</div>
<div class="c-avatar u-xlarge">
  <img class="c-avatar__img" src="https://unsplash.it/200/?image=823">
  <img class="c-avatar__img" src="https://unsplash.it/200/?image=815">
</div>
<div class="c-avatar u-large">
  <img class="c-avatar__img" src="https://unsplash.it/200/?image=823">
  <img class="c-avatar__img" src="https://unsplash.it/200/?image=815">
</div>
<div class="c-avatar">
  <img class="c-avatar__img" src="https://unsplash.it/200/?image=823">
  <img class="c-avatar__img" src="https://unsplash.it/200/?image=815">
</div>
<div class="c-avatar u-small">
  <img class="c-avatar__img" src="https://unsplash.it/200/?image=823">
  <img class="c-avatar__img" src="https://unsplash.it/200/?image=815">
</div>
<div class="c-avatar u-xsmall">
  <img class="c-avatar__img" src="https://unsplash.it/200/?image=823">
  <img class="c-avatar__img" src="https://unsplash.it/200/?image=815">
</div> 

Initials

<div class="c-avatar u-super" data-text="GP"></div>
<div class="c-avatar u-xlarge" data-text="GP"></div>
<div class="c-avatar u-large" data-text="GP"></div>
<div class="c-avatar u-medium" data-text="GP"></div>
<div class="c-avatar u-small" data-text="GP"></div>
<div class="c-avatar u-xsmall" data-text="GP"></div>