TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

npm downloads NPM Version

react-hot-avatars - Try it out

The Best React Avatars in Town.

Lightweight, customizable and beautiful by default.
Cooked by Aime and Leila 👨‍🍳


With NPM:

npm install react-hot-avatars

With Yarn:

yarn add react-hot-avatars


Check live demo here Link

Getting Started

  1. Import the Avatar component from react-hot-avatars:

    import Avatar from 'react-hot-avatars';
  2. Start using it!


    <Avatar name="john doe" size="300" rounded />
    <Avatar name="_Leila" size="200" />

A React Component using react-hot-avatars

import Avatar from 'react-hot-avatars';

const App = () => {
  return (
     <Avatar name="aimed" size="300" />

Supported props

  1. name
  2. size
  3. rounded
You can pass anything to generate a unique avatar for


 john doe,, 😂Joy, etc

Other Options


Attribute Options Default Description
name string "default" Will be used to generate avatar based on the initials of the person
size string "80" Use values like "200", "300", etc for adjusting the size of the avatar.
rounded boolean false Can be true or false to make the avatar be rounded or not Default false

Request a feature

If you feel like you are missing a cool feature in our package, here are few steps to follow for you to request an new feature

  • Create an issue here
  • Add title of of the issue, eg: requesting an active badge feature
  • In your description try to add clear explanation about your feature with an image attached if possible.


Hello there 👋, We're very happy you want to contribute to this project. But be sure to follow the Contribution guide && code of conduct before submitting your contribution😊 .

Start contributing

To contribute follow these simple steps 😃

  1. Fork the repo and create your branch from main.
  2. Create a new issue
  3. Commit changes to your branch..
  4. Create pull request 🎉

Make sure to make a good branch name

Your branch should be name like your_name/issue_fix.
For example: gasaroleila/avatar-style


  • If you spot a problem, search if an issue already exists in the search the issue tracker. If a related issue doesn't exist, you can open a new issue using a relevant issue form.
  • If you want to simply solve issues, Find one to solve in the existing issues



MIT License


npm i react-hot-avatars

DownloadsWeekly Downloads






Unpacked Size

36.6 kB

Total Files


Last publish


  • igaimerca