Tailwind CSS Avatar - Taco Svelte

The Avatar is used to portray people or objects on web projects - a visual identifier for a user profile. Below we are presenting a dynamic example of the Avatar component that you can use in your project.

avatar
<Avatar 
src="https://docs.material-tailwind.com/img/face-2.jpg" 
size="md" 
variant="rounded" 
>
</Avatar>

Avatar Variants

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

avatar avatar
<Avatar 
src="https://docs.material-tailwind.com/img/face-2.jpg" 
size="md" 
variant="rounded" 
/>
<Avatar 
src="https://docs.material-tailwind.com/img/face-2.jpg" 
size="md" 
variant="circular" 
/>

Avatar Sizes

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

avataravataravataravataravataravatar
<Avatar 
src="https://docs.material-tailwind.com/img/face-2.jpg" 
size="xs" 
variant="rounded" 
/>
<Avatar 
src="https://docs.material-tailwind.com/img/face-2.jpg" 
size="sm" 
variant="rounded" 
/>
<Avatar 
src="https://docs.material-tailwind.com/img/face-2.jpg" 
size="md" 
variant="rounded" 
/>
<Avatar 
src="https://docs.material-tailwind.com/img/face-2.jpg" 
size="lg" 
variant="rounded" 
/>
<Avatar 
src="https://docs.material-tailwind.com/img/face-2.jpg" 
size="xl" 
variant="rounded" 
/>
<Avatar 
src="https://docs.material-tailwind.com/img/face-2.jpg" 
size="xxl" 
variant="rounded" 
/>

Avatar Custom

avatar
<Avatar 
        src="https://docs.material-tailwind.com/img/face-2.jpg" 
        size="md" 
        variant="circular" 
    >
</Avatar>