Need help with react-user-avatar?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

138 Stars 23 Forks MIT License 37 Commits 9 Opened issues


React component for a user avatar with fallback to colored initials

Services available


Need anything else?

Contributors list

No Data

React UserAvatar

A bare-bones user avatar display with support for falling back to using the user's initials on a colored background as the avatar.


npm install -S react-user-avatar



This module uses react-style inline styles to narrow the api, yet allows for reasonable extensibility by exposing a number of DOM classes. Take a look (or simply use)

for ideas.

The fallback avatar's color may be set by passing in the

prop, or you can customize the range of colors used by passing in an array of
. The component uses a simple calculation to consistently use the same color for the same user's name every time.

If the component determines that the color chosen was visually light, it will apply a

class to the root element. If the color chosen was dark, it will apply
. Take advantage of these to use the appropriately colored text or border when styling the component.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.