paper-userpicture | Vaadin

Material Design User Avatar

[ This description is mirrored from at on 2019-05-22 ]

Paper User Picture

Published on

paper-userpicture lets you create user avatars. If user doesn't have picture set, we'll automatically create placeholder containing user name initials.


Custom property Description Default
--paper-userpicture-size The size of picture 5em
--paper-userpicture-text-size The font-size of the placeholder initials calc(var(--paper-userpicture-size) / 2)


Basic example

You only need user-id and user-name attributes defined

<paper-userpicture user-id="AAA" user-name="Petja"></paper-userpicture>
<paper-userpicture user-id="BBB" user-name="Oliver"></paper-userpicture>
<paper-userpicture user-id="CCC" user-name="Luke"></paper-userpicture>
<paper-userpicture user-id="DDD" user-name="Yusef"></paper-userpicture>

Show name under the picture

Add show-name attribute to show name of user under the picture

<paper-userpicture show-name user-id="EEE" user-name="Henry"></paper-userpicture>
<paper-userpicture show-name user-id="FFF" user-name="Thomas"></paper-userpicture>
<paper-userpicture show-name user-id="GGG" user-name="Michael"></paper-userpicture>
<paper-userpicture show-name user-id="HHH" user-name="Leo"></paper-userpicture>

Use real user picture

And of course, if user has its picture set, you can show it by using image attribute as the reference to the URL.

<paper-userpicture image="" user-id="III" user-name="Henry"></paper-userpicture>
<paper-userpicture image="" user-id="JJJ" user-name="Thomas"></paper-userpicture>
<paper-userpicture image="" user-id="KKK" user-name="Michael"></paper-userpicture>
<paper-userpicture image="" user-id="LLL" user-name="Leo"></paper-userpicture>


Link to this version
ImportedReleased 19 February 2017Other
Framework Support
Polymer 1.0+
Browser Independent
Install with
Release notes - Version 1.0.0



  • petja/paper-avatar-behavior#^1.0.0