Tailwind CSS Avatar - React

Use our Tailwind CSS Avatar component to portray people or objects in your web projects. The Avatar can be used as a visual identifier for a user profile on your website.

See below our beautiful Avatar example that you can use in your Tailwind CSS and React project. The example also comes in different styles and colors so you can adapt it easily to your needs.


avatar
import { Avatar } from "@material-tailwind/react";
 
export default function Example() {
  return <Avatar src="/img/face-2.jpg" alt="avatar" />;
}

Avatar Variants

The Avatar component comes with 2 different variants that you can change it using the variant prop.

avataravatar
import { Avatar } from "@material-tailwind/react";
 
export default function Variants() {
  return (
    <div className="flex gap-4">
      <Avatar src="/img/face-2.jpg" alt="avatar" />
      <Avatar src="/img/face-2.jpg" alt="avatar" variant="circular" />
    </div>
  );
}

Avatar Sizes

The Avatar component comes with 6 different sizes that you can change it using the size prop.

avataravataravataravataravataravatar
import { Avatar } from "@material-tailwind/react";
 
export default function Sizes() {
  return (
    <div className="flex w-max items-end gap-4">
      <Avatar src="/img/face-2.jpg" alt="avatar" size="xs" />
      <Avatar src="/img/face-2.jpg" alt="avatar" size="sm" />
      <Avatar src="/img/face-2.jpg" alt="avatar" size="md" />
      <Avatar src="/img/face-2.jpg" alt="avatar" size="lg" />
      <Avatar src="/img/face-2.jpg" alt="avatar" size="xl" />
      <Avatar src="/img/face-2.jpg" alt="avatar" size="xxl" />
    </div>
  );
}

Related

Props

Learn more about props definition and types of avatar component.

Theme

Learn how to customize the theme and styles for avatar component.

alert

breadcrumbs

Edit this page on Github