Simple, customizable, pure HTML5/CSS profile avatar that supports square and circle shapes.
Widely used standard sizes (extra small, small, medium, large, and extra large) for various application scenarios.
Easily integrated with other components such as ListView, Card, NavBar, and Badge.

Trusted by the world’s leading companies

Vue vue avatar

Overview

Avatar is a pure CSS component used to add initials, icons, or images representing people or objects in different shapes and sizes. It can be easily integrated with ListView, Badge, Card, and other container components.

Profile or image avatar

The Vue Avatar component supports various types of images to represent users profiles like those in applications such as Gmail, Outlook, GitHub, and StackOverflow.

Vue profile or image avatar.

Vue initials avatar.

Initials avatar

Represent users’ initials in different sizes.

Text or word avatar

Create word or text avatars from user names.

Vue text or word avatar.

Vue Avatar media types.

Media types

The avatar supports well-known media types, icons, SVG, font icons, and text.

Shapes and sizes

The Vue Avatar component can be square or circular and in one of five sizes: extra small, small, medium, large, and extra large. By default, avatars are created in a square shape with a medium size.

Avatar shapes and sizes documentation

Vue Avatar shapes and sizes.

Vue Avatar UI customization.

UI customization

Completely customize the avatar attributes, like dimensions and colors.

Avatar customization documentation

Avatar generator

In applications like Gmail, StackOverflow, GitHub, user avatars are represented using Identicons, which are visual representations of hash values of IP addresses.

Use the Syncfusion Vue Avatar and Badge components to integrate dynamically generated Identicons by following the instructions in this blog:

Dynamically Generate and Integrate GitHub-Like User Avatar

Integration with other components

Easily integrate the Vue Avatar component with layout controls, specifically ListView and Card, to achieve different applications, such as a mobile contact list or Outlook-like appearance. Integrate it with the Badge component to show a notification count like in email applications.

Integrate Avatar with Badge documentation

Vue integration with other controls.

Other supported frameworks

The Avatar control is also available in React, Angular, and JavaScript frameworks. Check out the Avatar different platforms from the links below:

Not sure how to create your first Avatar? Our documentation can help.

I’d love to read it now

ALL COMPONENTS

SMART COMPONENTS

GRIDS

DATA VISUALIZATION

CALENDARS

DROPDOWNS

FILE VIEWERS & EDITORS

BUTTONS

INTERACTIVE CHAT

INPUTS

NAVIGATION

LAYOUT

FORMS

Query Builder UI

NOTIFICATIONS

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion^® reduces customers’ development time.
Here are some of their experiences.

Syncfusion helps small companies

Syncfusion has a very good service and innovative products. People at syncfusion is helpful and tries to give solution to customer needs. Essential Studio has enough controls for most business applications.

Regina V,

Programador informático, Small-Business

Perfect for any developer

The Syncfusion Essential Studio has excellent features that are updated or added constantly on a regular basis. The support is exceptional—fast and professional responses. The support team provides you with code samples. As for the bugs, they always try to include the fix in the next release.