Avatar
The Avatar component is typically used to display images, icons or initials representing people or other entities.
Create an avatar using a div with
.avatar
class, wrapping an image, icon or text.
Image avatars can be created by wrapping an image with a div with class name
.avatar
.

  <div className="avatar">
    <img
      alt=""
      src="/avatar.1a5c1c50.jpeg"
    />
  </div>
With Text#
Avatars containing simple character can be created by wrapping the characters in a div with class name
.avatar
. The text color and background color is not set and can be customized.
SK

  <div className="avatar bg-red-500 text-white">
    SK
  </div>
Avatars come in five sizes-
.avatar--sm
,
.avatar--md
(default),
avatar--lg
,
avatar--xl
and
avatar--2xl
. Just add the corresponding class in
.avatar
wrapping div.

  <div className="avatar avatar--xl">
    <img
      alt=""
      src="/avatar.1a5c1c50.jpeg"
    />
  </div>
Icon avatar can be created by adding
.avatar--icon
class in wrapping div. Background is transparent by default and can be set along with text color.

  <div className="avatar avatar--icon bg-blue-600 fill-white">
    <svg
      aria-hidden="true"
      focusable="false"
      viewBox="0 0 24 24"
    >
      <path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" />
    </svg>
  </div>
If you need square or rounded variants add the
.avatar--square
or
.avatar--rounded
class.

  <div className="avatar avatar--rounded avatar--lg">
    <img
      alt=""
      src="/avatar.1a5c1c50.jpeg"
    />
  </div>
Add a span element inside
.avatar
div and add classes as needed. Refer to Badge component for the badge classes.

  <div className="avatar avatar--rounded badge-wrapper">
    <img
      alt=""
      src="/avatar.1a5c1c50.jpeg"
    />
    <span className="badge-dot badge-dot--md bg-green-500 border-color-white" />
  </div>
On this page