How to create an Avatar generator app in ReactJS ?

Last Updated : 24 Jul, 2025

In this article, we are going to make a simple avatar generator app that generates random images. In this avatar generator, we have several buttons for different categories to choose from, the next button to generate random images, and a download button to finally download your favorite avatar.

Prerequisites: The pre-requisites for this project are:

React
Functional components
React Hooks
React Axios & API
Javascript ES6

Basic setup: Start a project by the following command:

npx create-react-app avatarApp

Now, go to the project folder i.e avatarApp:

cd avatarApp

👁 Image

Now, go to the src folder and create a Components folder and a Styles folder. Under the Components folder, create a file 'Avatar.jsx' and under the Styles folder, create a file 'Avatar.css'

👁 Image

Now, open the console and install the Axios npm package:

npm install axios

index.js:

App.js: App component renders a single Avatar component

App.css: This sets the background of our app to a nice CSS gradient

.App {
 margin: 0;
 padding: 0;
 background-color: #b8c6db;
 background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 74%);
}

Avatar.jsx: This file contains all the logic. We will be using a free opensource API (no auth required) called 'DiceBear Avatars' to fetch random avatars based on several parameters.

Avatar.css: Use this file to decorate our app

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap');

.nav{
 height: 6vh;
 width: 100%;
 background-color: #313442;
 display: flex;
 justify-content: center;
 align-items: center;
 color: white;
 font-family: 'Zen Tokyo Zoo', cursive;
 font-size: 35px;
}
.home{
 box-sizing: border-box;
 height: 94vh;
 width: 100%;
 gap: 15px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}
.avatar{
 height: 50%;
 width: 50%;
 max-width: 400px;
 max-height: 400px;
 margin-top: 40px;
 margin-bottom: 45px;
}
.btns{
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
}
button{
 width: 6em;
 height: 2.5em;
 margin: 10px;
 font-size: 20px;
 font-weight: 600;
 font-family: 'Roboto Mono', monospace;
 background-color: rgb(231, 231, 231);
 box-shadow: 2px 3px 5px rgb(102, 101, 101);
 border-radius: 15px;
 border: none;
 transition: 0.2s;
}
button:active{
 box-shadow: none;
}
.btns > button:hover{
 background-color: #ffffff;
}
#gen{
 background-color: #4361ee;
 color: white;
}
#down{
 background-color: #EB3349;
 color: white;
}