Avatar

Easily create avatar to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes.

Table of contents

• Usage
• Rounded
• Bordered
• Initials
• Dot indicator
• Stacked

Usage

To get started with the Avatar component, simply wrap your image inside the .uk-avatar and .uk-avatar-image classes.

Rounded

To create a circular avatar, simply apply the uk-avatar-rounded class to the wrapper.

Bordered

To add a border around your avatar, include the uk-avatar-bordered class along with any other modifiers you like.

Initials

If there’s no image available, display initials using the .uk-avatar-text element. This is useful for fallback states or text-based avatars.

Dot indicator

To indicate status or notifications, you can add a small dot using the uk-avatar-dot class. Or, choose one of the following classes to reposition the dot indicator:

Stacked

Stack multiple avatars together to represent a group or team. Use flex utilities and negative spacing to achieve the overlapping effect.