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

<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

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

That's it!

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 Symfony app:

templates/components/Avatar.html.twig

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

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

<span
    data-size="{{ size }}"
    class="{{ style.apply({size: size, shape: shape, border: border}, attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</span>

templates/components/Avatar/Fallback.html.twig

{# @block content The fallback content displayed when no image is available, typically initials or a placeholder icon #}
<span
    data-avatar-fallback
    class="{{ ('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 ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}
        <twig:ux:icon name="flowbite:user-solid" />
    {% endblock -%}
</span>

templates/components/Avatar/Group.html.twig

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

templates/components/Avatar/GroupCount.html.twig

{# @prop string as The avatar group tag. Defaults to `div` #}
{# @block content The count indicator, e.g. "+99" #}
{%- props as = 'div' -%}

<{{ as }}
    class="{{ ('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 ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</{{ as }}>

templates/components/Avatar/Image.html.twig

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

Happy coding!

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.

<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.

<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).

<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.

<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

<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>

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

<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.

<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

Avatar

Prop	Type	Description
`size`	`'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'`	The avatar size. Defaults to `md`
`shape`	`'circle'\|'rounded'`	The avatar shape. Defaults to `circle`
`border`	`'none'\|'bordered'`	Whether to show a ring border. Defaults to `none`

Block	Description
`content`	The avatar content, typically `Avatar:Image` and `Avatar:Fallback`

Avatar:Fallback

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

Avatar:Group

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

Avatar:GroupCount

Prop	Type	Description
`string`	`as`	The avatar group tag. Defaults to `div`

Block	Description
`content`	The count indicator, e.g. "+99"

Avatar

Installation

Usage

Examples

Bordered

Placeholder

Dot indicator

Stacked

Avatar with text

User dropdown

Sizes

API Reference

Avatar

Avatar:Fallback

Avatar:Group

Avatar:GroupCount