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

warish profile image

How to Create a Dark Mode Toggle with HTML, CSS, and JavaScript

Waricha -

amr-saafan profile image

Robots and CAPTCHA: Why AI Can’t Click ‘I’m Not a Robot’ on Websites

Amr Saafan -

safdarali profile image

Top 5 HTML Features You’re Not Using (But Should Be)

Safdar Ali -

matheusmcz profile image

maxLength input type=number

Matheus Vieira do Nascimento -