DEV Community

Cover image for Generating Awesome User Avatars is Easy
Ashik Chapagain
Ashik Chapagain

Posted on • Originally published at cb-ashik.hashnode.dev

Generating Awesome User Avatars is Easy

#html #tips #tutorials #ui

Hey Developers

Whenever user signups, we as a developer either ask them to upload an avatar or add a simple avatar placeholder that looks too boring.

So, today I'll be sharing, how you guys can create an amazing avatar for your users.

Let's Start

There's a tool name DiceBear Avatars which will help you create an amazing avatar using the user's name. And this is too easy to use. This will generate different avatars based on your options.

<img src="https://avatars.dicebear.com/api/male/Ashik%20Chapagain.svg"/>
Enter fullscreen mode Exit fullscreen mode

This is what you'll get.
image.png

This is just of one type. DiceBear Avatars provides you 10 types of avatars.

Let's look at them.

Avatars Types

Male 

<img src="https://avatars.dicebear.com/api/male/Lalit%20Kishore.svg"/>
Enter fullscreen mode Exit fullscreen mode

This is what you'll get.
image.png

Female 

<img src="https://avatars.dicebear.com/api/female/Some Girl Name.svg"/>
Enter fullscreen mode Exit fullscreen mode

You'll get something like this.
image.png

Human 

<img src="https://avatars.dicebear.com/api/human/Some Person Name.svg"/>
Enter fullscreen mode Exit fullscreen mode

Result:
image.png

Avataaars 

<img src="https://avatars.dicebear.com/api/avataaars/Some Person Name.svg"/>
Enter fullscreen mode Exit fullscreen mode

image.png

Bottts 

<img src="https://avatars.dicebear.com/api/bottts/Some Person Name.svg"/>
Enter fullscreen mode Exit fullscreen mode

image.png

Micah 

<img src="https://avatars.dicebear.com/api/micah/Some Person Name.svg"/>
Enter fullscreen mode Exit fullscreen mode

image.png

Initials 

<img src="https://avatars.dicebear.com/api/initials/Some Person Name.svg"/>
Enter fullscreen mode Exit fullscreen mode

image.png

Identicon 

<img src="https://avatars.dicebear.com/api/identicon/Ashik Chapagain.svg"/>
Enter fullscreen mode Exit fullscreen mode

image.png

Jdenticon 

<img src="https://avatars.dicebear.com/api/jdenticon/Ashik Chapagain.svg"/>
Enter fullscreen mode Exit fullscreen mode

image.png

Gridy 

<img src="https://avatars.dicebear.com/api/gridy/Ashik Chapagain.svg"/>
Enter fullscreen mode Exit fullscreen mode

image.png

That's it for today guys.

Top comments (0)

Read next

mattbug3 profile image

Create a Dropdown Menu Using HTML, CSS and JavaScript

Matt Adil -

javacodepoint profile image

Age Calculator Using HTML, CSS, and JavaScript: A Beginner’s Guide

Javacodepoint -

sntsella profile image

Primeiros passos com HTML

Ella -

pinky057 profile image

Cool Animated Codepen demos

ishrat -