Avatar

The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.

Round Image Avatar

<img
class="avatar-round avatar-lg"
src="https://bit.ly/dan-abramov"
alt=""
/>
<img
class="avatar-round avatar-md"
src="https://bit.ly/dan-abramov"
alt=""
/>
<img
class="avatar-round avatar-sm"
src="https://bit.ly/dan-abramov"
alt=""
/>
<img
class="avatar-round avatar-xsm"
src="https://bit.ly/dan-abramov"
alt=""
/>
view raw gistfile1.txt hosted with ❤ by GitHub

Squared Image Avatar

<img
class="avatar-square avatar-lg"
src="https://bit.ly/dan-abramov"
alt=""
/>
<img
class="avatar-square avatar-md"
src="https://bit.ly/dan-abramov"
alt=""
/>
<img
class="avatar-square avatar-sm"
src="https://bit.ly/dan-abramov"
alt=""
/>
<img
class="avatar-square avatar-xsm"
src="https://bit.ly/dan-abramov"
alt=""
/>
view raw square-img-avatar hosted with ❤ by GitHub

Round Text Avatar

  • Avatar
  • Avatar
  • Avatar
  • Avatar
<div class="avatar-name avatar-lg text-lg">Avatar</div>
<div class="avatar-name avatar-md text-md">Avatar</div>
<div class="avatar-name avatar-sm text-sm">Avatar</div>
<div class="avatar-name avatar-xsm text-xsm">Avatar</div>
view raw gistfile1.txt hosted with ❤ by GitHub