React Avatar Component | HTML5/CSS Profile Image Editor

Overview

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

Profile or image avatar

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

Avatar shapes and sizes documentation

UI Customization

Completely customize the avatar attributes, like dimensions and colors.

Avatar customization documentation

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

Integrate Avatar with Badge documentation

Other supported frameworks

Avatar component is also available in Vue, Angular, and JavaScript frameworks. Check out the different Avatar platforms from the links below,

React Avatar Code Example

Easily get started with the React Avatar using a few simple lines of TSX code example as demonstrated below. Also explore our React Avatar Example that shows you how to render and configure a Avatar in React.

tsx
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { SampleBase } from '../common/sample-base';
import './default.css';

// tslint:disable:max-line-length

// *  Sample for CSS avatar component

export class Default extends SampleBase<{}, {}> {

render() {
    return (
         <div className='control-pane'>
            <div className="sample_container avatar-default">
                <div className="avatar-block">
                    <div className="e-card e-avatar-showcase">
                        <div className="e-card-content">
                            {/* <!-- xSmall Avatar--> */}
                            <div className="e-avatar e-avatar-xsmall image"></div>
                            {/* <!-- Small Avatar--> */}
                            <div className="e-avatar e-avatar-small image"></div>
                            {/* <!-- Avatar--> */}
                            <div className="e-avatar image"></div>
                            {/* <!-- Large Avatar--> */}
                            <div className="e-avatar e-avatar-large image"></div>
                            {/* <!-- xLarge Avatar--> */}
                            <div className="e-avatar e-avatar-xlarge image"></div>
                        </div>
                        <div className="e-card-content">
                            <div>Default</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}
}

What do our customers say about us?

We're using the file formats and Windows/JavaScript list controls a lot. They're fast, easy to use, and the documentation is good and contains examples. Tickets with questions or suggestions were answered within a day, so we're happy to use the Syncfusion libraries.

Daniel Persidok

wpd onshore GmbH & Co. KG

Using Syncfusion Angular and JavaScript controls makes front-end web development a piece of cake. Each component has many properties that can be configured as per your desire, methods that can be used to interact with the element, and a lot of events that trigger at different stages, which makes modifying your components according to the state of the application an easy task. Also, their support is amazing! They always offer a sample working project, which makes it very simple to solve your question about your code.