1. Components
  2. Avatar

Components

Tailwind CSS Avatar

Examples for opting different size of image sizes.

Circular avatars

Use the .rounded-full utility class to make avatars circular.

Image Description Image Description Image Description Image Description

Rounded avatars

Use the border radius utility classes to make avatars more rounded.

Image Description Image Description Image Description Image Description

Circular avatars with top status

Circular avatars with all kinds of status indicators.

Image Description
Image Description
Image Description
Image Description

Rounded avatars with top status

Rounded avatars with all kinds of status indicators.

Image Description
Image Description
Image Description
Image Description

Circular avatars with bottom status

Circular avatars with all kinds of status indicators.

Image Description
Image Description
Image Description
Image Description

Rounded avatars with bottom status

Rounded avatars with all kinds of status indicators.

Image Description
Image Description
Image Description
Image Description

Avatar examples New

Avatar examples with brand logos.

Image Description
Image Description

Placeholder icon

Circular avatars with placeholder icon.

Placeholder initials

Circular avatars with placeholder initials.

AC AC AC AC

Solid color variants New

Predefined solid color avatar styles.

AC AC AC AC AC AC AC

Soft color variants New

Predefined soft color avatar styles.

AC AC AC AC AC AC AC

Outline color variants New

Predefined outline color avatar styles.

AC AC AC AC AC AC AC

White color variants New

Predefined white color avatar styles.

AC AC AC AC

Displaying a tooltip New

A tooltip can be used with an avatar to be displayed on focus or hover.

Media

Circular avatar with text.

Image Description

Mark Wanner

mark@gmail.com