Generate avatar or profile picture with username initials (lettered avatar) with React (2024)

A guide on how to generate lettered avatar for your users

Summary

• Introduction
• Lazy lettered avatar
• Lettered avatar from scratch
• Lettered avatar with third party libraries
• Conclusion

Why do we even use lettered avatar ?

The common use-case for avatar in general is for displaying a placeholder for user picture. A basic implementation of avatar placeholder might be the classic silhouette avatar.

That works fine when you are displaying a single user. What if you have a list of users ?

In some apps, illustration of animals are used as avatar. But if you have a lot of users to display you’d need a bunch of animal illustration :)

That’s were lettered avatar comes as a good approach: simple and user friendly

If you are not planing to install any third party library or code by your self you must think of using ui-avatars.com. And regardless of the framework or technology you are using you could easily implement the feature.

Ui-avatar is an API that generates you a lettered avatar as an image, based on given user name.

For example:

will generate you this:

There is much more parameters to send, like the format of image you want (svg, png), the number of caracter to display, the font-size etc…

Here we are going to create a component with react that take’s in the name (first name and last name) of the user and generate a rounded avatar with user initial, with a unique background color.

Ready ? Let’s go…

For doing so we’ll need two functions, one that returns the user initial and another one to generate a unique background color. We’ll call them respectively getInitials() and generateBackground().

Our getInitials() function will take in the user name and return initial like so

function getInitials(name) {
 return `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`;
}

and generateBackground() will generate random color based on user name

function generateBackground(name) {
 let hash = 0;
 let i;
 for (i = 0; i < 
name.length; i += 1) {
 hash = name.charCodeAt(i) + ((hash << 5) - hash);
 } 
 // name.charCodeAt() return an int between 0 and 65535
 // left shift (<<) operator moves to left by number of specified 
 // bites after <<. The whole for loop will create a color hash 
 // based on username length let color = '#';
 for (i = 0; i < 3; i += 1) {
 const value = (hash >> (i * 8)) & 0xff;
 color += `00${value.toString(16)}`.slice(-2);
 }
 return color;
}

If you’ve used mui avatar component before the above will look familiar to you.

Now let’s create our component

import React from "react";export default function LetteredAvatar ({ name }) {function getInitials(name) {...}
function generateBackground(name) {...}let initials = getInitials(name);
let color = generateBackground(name);
const customStyle =
{
 display: "flex",
 height: "50px",
 width: "50px",
 borderRadius: "100px",
 color: "white",
 background: color,
 margin: "auto"
}return (
<div style={customStyle}>
 <span style={{margin: 'auto'}}> {initials} </span>
</div>
);}

Here what our component will look like in action

I made a demo in code-sandbox here

-React-lettered-avatar package

This package generates you a lettered-avatar based on username. They have a demo so you can see how it works.

Good points: Customisable

• You can add your own array of background colors to differentiate users in a list
• You can customise the shape of the lettered avatar with the radius prop going from a scared avatar to a full rounded one.

Bad points:

• Can’t control the number of initials to display, you have to do the controls yourself
• Does not provide an image version of the generated avatar for storing purpose for example

-React-avatar package

This package generates you an avatar based on username with a fallback image if your users have provide already a profile picture.

Good points: Lot of prop

• Lots of props for custom look and behavior
• They support social media profil picture too
• You can customize the avatar shape here as well

Bad points

It’s not really a bad point, but their color and fgColor props migth be confusing.

Their color prop is used to set background color while fgColor will set text color :(

Avatar from user initials is a feature that helps you better the experience of your users. Based on your needs you might want to write a custom component or use a third party library, I just covered two of them in this article, but there is bunch libraries out there. As this is my first article on medium i’m really happy to share my discoveries with you guys, there will be more articles like this.

Thanks for reading.