We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
SUPPORTED FRAMEWORKS

Overview

The Vue Avatar is a pure CSS component used to add initials, icons, or images representing people or objects in different shapes and sizes. Easily integrate the Avatar with other components like ListView, Card, NavBar, and Badge.


Profile or image avatar

The Vue Avatar component supports various types of images to represent user profile images like those in applications such as Mail, Outlook, GitHub, and StackOverflow.


Initial avatar

Represents a user’s initials in different sizes.


Text or word avatar

Create word or text avatars from user names.


Media types

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

Shapes and sizes

The Vue Avatar component can be either square or circular 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.


UI Customization

Completely customize the avatar attributes, like dimensions and colors.


Avatar generator

In applications like Gmail, StackOverflow, GitHub, and others, 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:


Integration with other components

Easily integrate Vue Avatar component with layout components, specifically listview and cards to achieve different applications, such as mobile contact, Mail, Outlook and more. Integrate with badge component to represent a notification count like in mail applications.


55+ VUE UI COMPONENTS

Transform your applications today by downloading our free evaluation versionDownload Free Trial

Scroll up icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon