7

Generating Awesome User Avatars is Easy

 3 years ago
source link: https://dev.to/chapagainashik/generating-awesome-user-avatars-is-easy-cjj
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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 modeExit fullscreen mode

This is what you'll get.

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

Let's look at them.

Avatars Types 

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

This is what you'll get.

Female 

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

You'll get something like this.

Human 

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

Result:

Avataaars 

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

Bottts 

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

Micah 

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

Initials 

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

Identicon 

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

Jdenticon 

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

Gridy 

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

That's it for today guys.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK