Our React Avatar component is used to represent people or objects in your web projects. The avatar component usually displays a profile picture or a placeholder graphic if no image is available. Commonly places for avatars include: user profiles, comment sections, user lists, and anywhere else where a visual representation of a user is needed.
To jumpstart your development process, we offer a range of pre-designed Avatar examples that are ready to be integrated into your project. All our examples are based on React and styled with Tailwind CSS.
Avatar Examples
Get started with this simple avatar example that comes with a pre-set image, ensuring that your avatars look great from the start. You can easily replace the default src with any image URL to display user-specific avatars.
import { Avatar } from "@material-tailwind/react";
export function AvatarDefault() {
return <Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" />;
}Also, use the alt tag, set as "avatar", to make sure that the component is accessible. This feature is essential for screen readers, search engine optimization, and aligns with web accessibility standards
The Avatar component comes with 3 different variants that you can change using the variant prop.
import { Avatar } from "@material-tailwind/react";
export function AvatarVariants() {
return (
<div className="flex gap-4">
<Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" />
<Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" variant="rounded" />
<Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" variant="square" />
</div>
);
}As showcased in the example above, here are the avatar component variants:
ִ• default (circular) variant - perfect for social media platforms, forums, and chat applications.
• rounded variant - can be used in business applications, professional networks, or team collaboration tools.
• square variant - ideal for corporate environments, document management systems, or platforms where a more serious tone is preferred.
The Avatar component comes with 6 different sizes that you can change it using the size prop: extra-small (xs), small (sm), medium (md), large (lg), extra-large (xl), and double extra-large (XXL).
import { Avatar } from "@material-tailwind/react";
export function AvatarSizes() {
return (
<div className="flex w-max items-end gap-4">
<Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" size="xs" />
<Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" size="sm" />
<Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" size="md" />
<Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" size="lg" />
<Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" size="xl" />
<Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" size="xxl" />
</div>
);
}This range provides great flexibility, allowing the avatars to fit perfectly in diverse contexts.
Add an extra layer of visual appeal to your avatar with this example. You can add a border around the avatar using the withBorder prop. To change the color of the avatar border use the color prop, by default it's gray.
import { Avatar } from "@material-tailwind/react";
export function AvatarWithBorder() {
return (
<div className="flex gap-4">
<Avatar
src="https://docs.material-tailwind.com/img/face-2.jpg"
alt="avatar"
withBorder={true}
className="p-0.5"
/>
<Avatar
src="https://docs.material-tailwind.com/img/face-2.jpg"
alt="avatar"
variant="rounded"
withBorder={true}
color="green"
className="p-0.5"
/>
<Avatar
src="https://docs.material-tailwind.com/img/face-2.jpg"
alt="avatar"
variant="square"
withBorder={true}
color="pink"
className="p-0.5"
/>
</div>
);
}You can use avatar with other components as well, see the example below. This component showcases a combination of avatars and typography elements to create a complete user profile presentation.
Tania Andrew
Web Developer
Tania Andrew
Web Developer
Tania Andrew
Web Developer
import { Avatar, Typography } from "@material-tailwind/react";
export function AvatarWithText() {
return (
<div className="flex flex-col gap-6">
<div className="flex items-center gap-4">
<Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" />
<div>
<Typography variant="h6">Tania Andrew</Typography>
<Typography variant="small" color="gray" className="font-normal">
Web Developer
</Typography>
</div>
</div>
<div className="flex items-center gap-4">
<Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" variant="rounded" />
<div>
<Typography variant="h6">Tania Andrew</Typography>
<Typography variant="small" color="gray" className="font-normal">
Web Developer
</Typography>
</div>
</div>
<div className="flex items-center gap-4">
<Avatar src="https://docs.material-tailwind.com/img/face-2.jpg" alt="avatar" variant="square" />
<div>
<Typography variant="h6">Tania Andrew</Typography>
<Typography variant="small" color="gray" className="font-normal">
Web Developer
</Typography>
</div>
</div>
</div>
);
}Use this example of overlapped avatars to represent a group of users in a friendly and compact way. For example, showing multiple people involved in a team.
import { Avatar } from "@material-tailwind/react";
export function AvatarStack() {
return (
<div className="flex items-center -space-x-4">
<Avatar
variant="circular"
alt="user 1"
className="border-2 border-white hover:z-10 focus:z-10"
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
/>
<Avatar
variant="circular"
alt="user 2"
className="border-2 border-white hover:z-10 focus:z-10"
src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1061&q=80"
/>
<Avatar
variant="circular"
alt="user 3"
className="border-2 border-white hover:z-10 focus:z-10"
src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1288&q=80"
/>
<Avatar
variant="circular"
alt="user 4"
className="border-2 border-white hover:z-10 focus:z-10"
src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80"
/>
<Avatar
variant="circular"
alt="user 5"
className="border-2 border-white hover:z-10 focus:z-10"
src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80"
/>
</div>
);
}You can use the className prop to add custom styles to the Avatar component. Like in the example below - apply a border with border-green-500 for a pop of color and layered shadows shadow-xl shadow-green-900/20 for depth, creating a striking visual effect.
import { Avatar } from "@material-tailwind/react";
export function AvatarCustomStyles() {
return (
<Avatar
size="lg"
alt="avatar"
src="https://docs.material-tailwind.com/img/face-2.jpg"
className="border border-green-500 shadow-xl shadow-green-900/20 ring-4 ring-green-500/30"
/>
);
}The following props are available for the avatar component. These are the custom props that we've added for the avatar component and you can use all the other native image props as well.
| Attribute | Type | Description | Default |
|---|---|---|---|
variant | Variant | Change avatar variant | circular |
size | Size | Change avatar size | md |
color | Color | Change avatar border color | gray |
className | string | Add custom className for avatar | '' |
withBorder | boolean | Add 2px border around the avatar | false |
For TypeScript Only
Our avatar component is Typescript friendly. Use this to make sure that the correct prop types are passed to the component.
import type { AvatarProps } from "@material-tailwind/react";Set of predefined styling variants available for our React and Tailwind CSS Avatar component.
type variant = "rounded" | "circular";Check out Material Tailwind’s set of predefined sizes available for the Avatar component.
type size = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";Set of predefined colors available for our Avatar component. Choose from our extensive 20+ list of colors like: orange, brown, amber, yellow, blue, etc. Customize the component to fit your web project’s needs.
type color =
| "white"
| "blue-gray"
| "gray"
| "brown"
| "deep-orange"
| "orange"
| "amber"
| "yellow"
| "lime"
| "light-green"
| "green"
| "teal"
| "cyan"
| "light-blue"
| "blue"
| "indigo"
| "deep-purple"
| "purple"
| "pink"
| "red";Learn how to customize the theme and styles for avatar component, the theme object for avatar component has three main objects:
1. The defaultProps object for setting up the default value for props of avatar component.
2. The valid object for customizing the valid values for avatar component props.
3. The styles object for customizing the theme and styles of avatar component.
You can customize the theme and styles of avatar component by adding Tailwind CSS classes as key paired values for objects.
interface AvatarStyleTypes {
defaultProps: {
variant: string;
size: string;
className: string;
withBorder: boolean;
color: string;
};
valid: {
variants: string[];
sizes: string[];
colors: string[];
};
styles: {
base: {
initial: object;
withBorder: object;
};
sizes: {
xs: object;
sm: object;
md: object;
lg: object;
xl: object;
xxl: object;
};
variants: {
square: object;
rounded: object;
circular: object;
};
borderColor: object;
};
}For TypeScript Only
import type { AvatarStyleTypes } from "@material-tailwind/react";const theme = {
avatar: {
defaultProps: {
variant: "circular",
size: "md",
className: "",
withBorder: false,
color: "blue",
},
valid: {
variants: ["circular", "rounded", "square"],
sizes: ["xs", "sm", "md", "lg", "xl", "xxl"],
colors: [
"white",
"blue-gray",
"gray",
"brown",
"deep-orange",
"orange",
"amber",
"yellow",
"lime",
"light-green",
"green",
"teal",
"cyan",
"light-blue",
"blue",
"indigo",
"deep-purple",
"purple",
"pink",
"red",
],
},
styles: {
base: {
initial: {
display: "inline-block",
position: "relative",
objectFit: "object-cover",
objectPosition: "object-center",
},
withBorder: {
border: "border-2",
},
},
sizes: {
xs: {
width: "w-6",
height: "h-6",
borderRadius: "rounded-md",
},
sm: {
width: "w-9",
height: "h-9",
borderRadius: "rounded-md",
},
md: {
width: "w-12",
height: "h-12",
borderRadius: "rounded-lg",
},
lg: {
width: "w-[58px]",
height: "h-[58px]",
borderRadius: "rounded-lg",
},
xl: {
width: "w-[74px]",
height: "h-[74px]",
borderRadius: "rounded-xl",
},
xxl: {
width: "w-[110px]",
height: "h-[110px]",
borderRadius: "rounded-2xl",
},
},
variants: {
rounded: {},
square: {
borderRadius: "!rounded-none",
},
circular: {
borderRadius: "!rounded-full",
},
},
borderColor: {
white: {
borderColor: "border-white",
},
"blue-gray": {
borderColor: "border-blue-gray-500",
},
gray: {
borderColor: "border-gray-500",
},
brown: {
borderColor: "border-brown-500",
},
"deep-orange": {
borderColor: "border-deep-orange-500",
},
orange: {
borderColor: "border-orange-500",
},
amber: {
borderColor: "border-amber-500",
},
yellow: {
borderColor: "border-yellow-500",
},
lime: {
borderColor: "border-lime-500",
},
"light-green": {
borderColor: "border-light-green-500",
},
green: {
borderColor: "border-green-500",
},
teal: {
borderColor: "border-teal-500",
},
cyan: {
borderColor: "border-cyan-500",
},
"light-blue": {
borderColor: "border-light-blue-500",
},
blue: {
borderColor: "border-blue-500",
},
indigo: {
borderColor: "border-indigo-500",
},
"deep-purple": {
borderColor: "border-deep-purple-500",
},
purple: {
borderColor: "border-purple-500",
},
pink: {
borderColor: "border-pink-500",
},
red: {
borderColor: "border-red-500",
},
},
},
},
};