paper-avatar | Vaadin

Polymer component to auto-generate user avatar

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

Published on


This component is made for generate a different random avatar for every member.


<style is="custom-style"> {
		--paper-avatar-color: red;
	paper-avatar.large {
		--paper-avatar-width: 60px;
<paper-avatar label="Abe90"></paper-avatar>
<paper-avatar label="Abe90" src=""></paper-avatar>
<paper-avatar label="Abe90" two-chars></paper-avatar>
<paper-avatar label="Abe90" class="red"></paper-avatar>
<paper-avatar label="Abe90" class="large"></paper-avatar>
<paper-avatar label="Abe90" jdenticon></paper-avatar>

Background color

The background color is automatically generated by hashing the label and selecting from an array of colors.

You can setting up this array passing the values in colors parameter.

Default colors

Default colors

Two chars

The two-chars parameter is used to show two chars in the generated avatar.

If the label is composed of a single word, you'll see the first two letters of that word; the first letter will always appear capitalized.

If instead the label is composed of two words, will be displayed the first letter of every word.


  • first: Fi
  • First: Fi
  • first second: Fs
  • First Second: FS


There is the opportunity to change some parameters to customize the generated avatar.

The css parameters --paper-avatar-color and --paper-avatar-width correspond to the background color and the size (width and height) of the avatar.

Jdenticon (

Jdenticon is a free Javascript library for generating highly recognizable identicons.

You can use this library adding jdenticon parameter. In this case the text will be replaced with white jdenticon image.

More information at


bower install --save Abe90/paper-avatar


Link to this version
ImportedReleased 01 June 2017Apache License 2.0
Framework Support
Polymer 2.0+
Also supported:
Polymer 1 (1.0.2)
Browser Compatibility
Install with
bower install --save Abe90/paper-avatar"#1.0.4"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 1.0.4


  • polymer#Polymer/polymer#^1.0.0 || ^2.0.0