Skip to main content
You are currently viewing the documentation for Filament 3.x, which is a previous version of Filament.Looking for the current stable version? Visit the 5.x documentation.

ā€‹
Overview

The avatar component is used to render a circular or square image, often used to represent a user or entity as their ā€œprofile pictureā€: 
<x-filament::avatar
    src="https://filamentphp.com/dan.jpg"
    alt="Dan Harrin"
/>

ā€‹
Setting the rounding of an avatar

Avatars are fully rounded by default, but you may make them square by setting the circular attribute to false: 
<x-filament::avatar
    src="https://filamentphp.com/dan.jpg"
    alt="Dan Harrin"
    :circular="false"
/>

ā€‹
Setting the size of an avatar

By default, the avatar will be ā€œmediumā€ size. You can set the size to either sm, md, or lg using the size attribute: 
<x-filament::avatar
    src="https://filamentphp.com/dan.jpg"
    alt="Dan Harrin"
    size="lg"
/>
You can also pass your own custom size classes into the size attribute: 
<x-filament::avatar
    src="https://filamentphp.com/dan.jpg"
    alt="Dan Harrin"
    size="w-12 h-12"
/>

<EditOnGitHub version="3.x" path="packages/support/docs/09-blade-components/02-avatar.md" />

<Footer />