1. Components
  2. Avatar

Components

Tailwind CSS Avatar

Use Tailwind Avatars as placeholders for user profile images, initials, or SVG icons. Choose from circled, rounded, with status indicators, badges, and more.

Shape

Circular avatars

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

Avatar Avatar Avatar Avatar

Rounded avatars

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

Avatar Avatar Avatar Avatar

Status

Circular avatars with top status

Circular avatars with all kinds of status indicators.

Avatar
Avatar
Avatar
Avatar

Rounded avatars with top status

Rounded avatars with all kinds of status indicators.

Avatar
Avatar
Avatar
Avatar

Circular avatars with bottom status

Circular avatars with all kinds of status indicators.

Avatar
Avatar
Avatar
Avatar

Rounded avatars with bottom status

Rounded avatars with all kinds of status indicators.

Avatar
Avatar
Avatar
Avatar

Avatar examples

Avatar examples with brand logos.

Avatar
Avatar

Placeholder

Placeholder icon

Circular avatars with placeholder icon.

Placeholder initials

Circular avatars with placeholder initials.

AC AC AC AC

Color variants

Solid color variants

Predefined solid color avatar styles.

AC AC AC AC AC AC AC

Soft color variants

Predefined soft color avatar styles.

AC AC AC AC AC AC AC

Outline color variants

Predefined outline color avatar styles.

AC AC AC AC AC AC AC

White color variants

Predefined white color avatar styles.

AC AC AC AC

Displaying a tooltip

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

Media

Circular avatar with text.

Avatar

Mark Wanner

mark@gmail.com