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

mandynicole profile image

`grid` with reveal + resize on `hover`

mandynicole -

devsmitra profile image

Speech-to-Text Application In Few Lines of JavaScript and HTML

Rahul Sharma -

paharihacker profile image

10 Rarely Used HTML Tags You Should Start Using Today

Rajesh Dhiman -

khervie00 profile image

Design Struggles as a UI developer.

Khervie00 -