Accessibility Now
Join our upcoming webinar about building accessible web applications! June 7, 2022.
Blog

Best Web Components For Making Avatars

By  
Binh Bui
Binh Bui
·
On Dec 7, 2018 9:24:00 AM
·
Web Components Wednesday (WCW) blog series is created for two purposes: introducing easy-to-use components and educating people on the concept of Web Components. All the WCW blogs can be found here.

avatar web components thumbnail "A picture is worth ten thousand words", although you should not always be so quick to judge people by their profile image. Nowadays, an avatar can be just about anything, including the initials of the name, a generated sketch like GitHub or a person’s portrait.

This week, we are introducing some excellent web components, which can manage any of the formats above. The components will be segmented based on their characteristics.

Lrndesign-avatar by lrnwebcomponents & paper-avatar by Abe90 (Two initials, Jdenticon and Image Source)

The resemblance of these two components is uncanny. Both generate a rounded avatar, which you can fill using either initials, jdenticon or any image source. The two components also provide different CSS custom properties and component attributes to modify the background color and the size of the canvas.

One extra tip: with paper-avatar, you can include both attributes label and src, and label will act as a fallback if the image link returns 404.

Component

Demo

Library

Browsers

lrndesign-avatar

Link

Polymer#^1.11.1

C,S,O,F,E,I

paper-avatar

Link

Polymer#^1.0.0 || 2.0.0

C,S,O,F

Paper-userpicture by petja, paper-avatar by NeilujD & Fop-avatar by FriendsOfPolymer (Initials and Image Source)

Here are the options that these three share in common: displaying the first initial and getting an image from a source. Also, here are their individual traits:

Paper-userpicture

Paper-userpicture can show the name under the avatar with the attribute show-name.

Paper-avatar

Paper-avatar is clickable, with some events dedicated to it, which means you have more room to play around. For example, you can embed the profile link to the picture. Also, it has a default icon if the source is broken.

Fop-avatar

Fop-avatar can be selected by clicking on it. This can be handy when you build an app that needs to choose employees with the same name, as the profile image can be used to distinguish them easily. Upon clicking, a tick overlay will appear over the picture.

Component

Demo

Library

Browsers

paper-userpicture

Not available

Polymer#^1.4.0

C,S,O,F,E,I

paper-avatar

Link

Polymer#^2.0.0

C,S,O,F,E

fop-avatar

Not available

Polymer#^1.4.0

C,S,O,F,E,I

Initials-placeholder by JaySunSyn, K-avatar by K4ng & Dile-avatar by Polydile (Lightweight avatar components having only one option)

If you want to implement only one way of choosing an avatar and you’re looking for some lightweight components, then these are the most suitable components.

initials-placeholder

For instance, initials-placeholder can display only the initials, and you can either choose between showing one or two initials.

k-avatar

The concept of k-avatar is the same like initials-placeholder.

dile-avatar

On the other hand, dile-avatar accepts only an image source as the input.

By default, initials-placeholder and dile-avatar are rounded. K-avatar is square but you can change the border-radius quickly with its attribute.

Component

Demo

Library

Browsers

initials-placeholder

Not available

Polymer#^1.1.0

C,S,O,F,E,I

k-avatar

Not available

Polymer#^1.1.0

C,S,O,F,E,I

dile-avatar

Demo

Polymer#^2.0.0

C,S,O,F,E,I

Final Words

Considering the avatar is the first thing you see on a person’s profile, it’s crucial to implement a consistent system for choosing it. With these easy-to-use components, we hope you can find one that suits your application best.

Click here for more awesome web components

Relevant articles:

Binh Bui
Binh Bui
Binh is a Growth Marketer involved with multiple domains ranging from running experiments, campaigns to doing product-led growth stuff. He likes using his brain and he likes random discussions. Out of work, you can see Binh in the Schrodinger gym. Follow Binh on Twitter @buibaobin
Other posts by Binh Bui