View as Markdown

Avatar

Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes

Loading... 
<div class="flex items-center justify-center gap-4">
    <twig:Avatar>
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Default avatar" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Rounded avatar" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
</div>

Installation

php bin/console ux:install avatar --kit flowbite-4

Install the following Composer dependencies:

composer require twig/extra-bundle twig/html-extra:^3.12.0 tales-from-a-dev/twig-tailwind-extra:^1.0.0 symfony/ux-icons

Copy the following file(s) into your app:

{# @prop size &#039;xs&#039;|&#039;sm&#039;|&#039;md&#039;|&#039;lg&#039;|&#039;xl&#039;|&#039;2xl&#039; The avatar size. #}
{# @prop shape &#039;circle&#039;|&#039;rounded&#039; The avatar shape. #}
{# @prop border &#039;none&#039;|&#039;bordered&#039; Whether to show a ring border. #}
{# @block content The avatar content, typically `Avatar:Image` and `Avatar:Fallback`. #}
{%- props size = &#039;md&#039;, shape = &#039;circle&#039;, border = &#039;none&#039; -%}

{%- set style = html_cva(
    base: &#039;group/avatar relative inline-flex shrink-0 select-none overflow-hidden&#039;,
    variants: {
        size: {
            xs: &#039;size-6&#039;,
            sm: &#039;size-8&#039;,
            md: &#039;size-10&#039;,
            lg: &#039;size-12&#039;,
            xl: &#039;size-14&#039;,
            &#039;2xl&#039;: &#039;size-16&#039;,
        },
        shape: {
            circle: &#039;rounded-full&#039;,
            rounded: &#039;rounded-base&#039;,
        },
        border: {
            bordered: &#039;p-1 ring-2 ring-default&#039;,
        },
    },
    compound_variants: [{
        size: [&#039;xs&#039;],
        shape: [&#039;rounded&#039;],
        class: &#039;rounded-sm&#039;,
    }],
) -%}

&lt;span
    data-size=&quot;{{ size }}&quot;
    class=&quot;{{ style.apply({size: size, shape: shape, border: border}, attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/span&gt;

{# @block content The fallback content displayed when no image is available, typically initials or a placeholder icon. #}
&lt;span
    data-avatar-fallback
    class=&quot;{{ (&#039;bg-neutral-tertiary text-body rounded-[inherit] flex size-full items-center justify-center font-medium text-sm group-data-[size=xs]/avatar:text-xs group-data-[size=sm]/avatar:text-xs group-data-[size=lg]/avatar:text-base group-data-[size=xl]/avatar:text-lg group-data-[size=2xl]/avatar:text-lg &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}
        &lt;twig:ux:icon name=&quot;flowbite:user-solid&quot; /&gt;
    {% endblock -%}
&lt;/span&gt;

{# @block content The grouped avatars, typically multiple `Avatar` components. #}
&lt;div
    class=&quot;{{ (&#039;group/avatar-group flex -space-x-4 rtl:space-x-reverse *:border-2 *:border-buffer &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/div&gt;

{# @prop as string The avatar group tag. #}
{# @block content The count indicator, e.g. &quot;+99&quot;. #}
{%- props as = &#039;div&#039; -%}

&lt;{{ as }}
    class=&quot;{{ (&#039;relative flex items-center justify-center size-10 text-xs font-medium text-white bg-dark-strong rounded-full hover:bg-dark group-has-data-[size=xs]/avatar-group:size-6 group-has-data-[size=sm]/avatar-group:size-8 group-has-data-[size=lg]/avatar-group:size-12 group-has-data-[size=xl]/avatar-group:size-14 group-has-data-[size=2xl]/avatar-group:size-16 &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/{{ as }}&gt;

&lt;img
    data-avatar-image
    class=&quot;{{ (&#039;hidden rounded-[inherit] aspect-square size-full object-cover &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    onload=&quot;this.classList.remove(&#039;hidden&#039;); this.closest(&#039;.group\\/avatar&#039;)?.querySelector(&#039;[data-avatar-fallback]&#039;)?.classList.add(&#039;hidden&#039;);&quot;
    {{ attributes.defaults({alt: &#039;&#039;}) }}
/&gt;

Usage

<twig:Avatar
    size="xs | sm | md | lg | xl | 2xl"
    shape="circle | rounded"
    border="none | bordered"
>
    <twig:Avatar:Image src="https://example.com/avatar.jpg" alt="User avatar" />
    <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
</twig:Avatar>

Examples

Bordered

Apply a border around the avatar component you can use the ring-{color} class from Tailwind CSS.

Loading... 
<div class="flex items-center justify-center gap-4">
    <twig:Avatar border="bordered">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Bordered avatar" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar border="bordered" shape="rounded">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Bordered rounded avatar" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
</div>

Placeholder

This example can be used to show an icon placeholder or the initials of the user’s first and last name as a placeholder when no profile picture is available.

Loading... 
<div class="flex items-center justify-center gap-4">
    <twig:Avatar>
        <twig:Avatar:Fallback />
    </twig:Avatar>
    <twig:Avatar>
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded">
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
</div>

Dot indicator

Use the Indicator component relative to the avatar component as an indicator for the user (eg. online or offline status).

Loading... 
<div class="flex items-center justify-center gap-6">
    <div class="relative">
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Online user" />
            <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Indicator class="absolute top-0 right-0 border-2 border-buffer" variant="success"/>
    </div>
    <div class="relative">
        <twig:Avatar shape="rounded">
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Offline user" />
            <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Indicator class="absolute -top-1 -right-1 border-2 border-buffer" variant="danger"/>
    </div>
    <div class="relative">
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Online user" />
            <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Indicator class="absolute bottom-0 right-0 border-2 border-buffer" variant="success"/>
    </div>
    <div class="relative">
        <twig:Avatar shape="rounded">
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Online user" />
            <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Indicator class="absolute -bottom-1 -right-1 border-2 border-buffer" variant="success"/>
    </div>
</div>

Stacked

Use Avatar:Group if you want to stack a group of users by overlapping the avatar components.

Loading... 
<div class="flex flex-col items-center gap-6">
    <twig:Avatar:Group>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="" />
            <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-2.jpg" alt="" />
            <twig:Avatar:Fallback>BG</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-3.jpg" alt="" />
            <twig:Avatar:Fallback>TL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-4.jpg" alt="" />
            <twig:Avatar:Fallback>RL</twig:Avatar:Fallback>
        </twig:Avatar>
    </twig:Avatar:Group>

    <twig:Avatar:Group>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="" />
            <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-2.jpg" alt="" />
            <twig:Avatar:Fallback>BG</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-3.jpg" alt="" />
            <twig:Avatar:Fallback>TL</twig:Avatar:Fallback>
        </twig:Avatar>
        <twig:Avatar:GroupCount as="a" href="#">+99</twig:Avatar:GroupCount>
    </twig:Avatar:Group>
</div>

Avatar with text

This example can be used if you want to show additional information in the form of text elements such as the user’s name and join date

Loading... 
<div class="flex items-center justify-center gap-2.5">
    <twig:Avatar>
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Jese Leos" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <div class="font-medium text-heading">
        <div>Jese Leos</div>
        <div class="text-sm font-normal text-body">Joined in August 2014</div>
    </div>
</div>

User dropdown

Use this example if you want to show a dropdown menu when clicking on the avatar component.

Loading... 
<twig:Dropdown id="user-dropdown" placement="bottom-start">
    <twig:Dropdown:Trigger>
        <twig:Avatar class="cursor-pointer" {{ ...dropdown_trigger_attrs }}>
            <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Default avatar" />
            <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
        </twig:Avatar>
    </twig:Dropdown:Trigger>

    <twig:Dropdown:Content>
        <twig:Dropdown:Header>
            <div class="font-medium">Bonnie Green</div>
            <div class="truncate">name@flowbite.com</div>
        </twig:Dropdown:Header>
        <twig:Dropdown:Group>
            <twig:Dropdown:Item>Dashboard</twig:Dropdown:Item>
            <twig:Dropdown:Item>Settings</twig:Dropdown:Item>
            <twig:Dropdown:Item>Earnings</twig:Dropdown:Item>
            <twig:Dropdown:Item class="text-fg-danger">Sign out</twig:Dropdown:Item>
        </twig:Dropdown:Group>
    </twig:Dropdown:Content>
</twig:Dropdown>

Sizes

Use the size prop to change the avatar dimensions.

Loading... 
<div class="flex items-center justify-center gap-4">
    <twig:Avatar shape="rounded" size="xs">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Extra small" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded" size="sm">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Small" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded" size="md">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Medium" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded" size="lg">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Large" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded" size="xl">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Extra large" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
    <twig:Avatar shape="rounded" size="2xl">
        <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Big" />
        <twig:Avatar:Fallback>JL</twig:Avatar:Fallback>
    </twig:Avatar>
</div>

API Reference

<twig:Avatar>

Prop Type Default
size 
 'xs'|'sm'|'md'|'lg'|'xl'|'2xl' 'md'
shape 
 'circle'|'rounded' 'circle'
border 
 'none'|'bordered' 'none'
Block Description
content The avatar content, typically Avatar:Image and Avatar:Fallback.

<twig:Avatar:Fallback>

Block Description
content The fallback content displayed when no image is available, typically initials or a placeholder icon.

<twig:Avatar:Group>

Block Description
content The grouped avatars, typically multiple Avatar components.

<twig:Avatar:GroupCount>

Prop Type Default
as 
 string 'div'
Block Description
content The count indicator, e.g. "+99".