logo polydile dile-components


Webcomponent to create a user avatar interface, configured on diferent ways, in order of preference:

When a image is provided, the component uses the image. If not, then the initial letter is used. If is not provided image nor initial, then the avatar shows a default user icon.


npm i @dile/dile-avatar


Import the component:

import '@dile/dile-avatar/dile-avatar.js';

Use the component:

<dile-avatar src="./images/user.jpg"></dile-avatar>


CSS Custom Properties

You can customize the avatar using this CSS Custom Properties.

Custom propertyDescriptionDefault
--dile-avatar-sizeThe size of the avatar36px
--dile-avatar-background-colorbackground color for the avatar. Is only visible when the image src is not provided#ddd
--dile-avatar-colorColor for the initial letter#888

dile-avatar demos

Avatar configured with an image

<dile-avatar src="/images/logo-polydile.png"></dile-avatar>

Avatar configured with an initial letter

<dile-avatar initial="j"></dile-avatar>

Avatar without configuration


Styled avatars

  #avatar {
    --dile-avatar-background-color: #936;
    --dile-avatar-color: #fff;
    --dile-avatar-size: 48px;
<dile-avatar initial="M" id="avatar"></dile-avatar>

  #avatar2 {
    --dile-avatar-size: 48px;
    --dile-avatar-background-color: #eee;
<dile-avatar src="/images/logo-polydile.png" id="avatar2"></dile-avatar>

  #avatar3 {
    --dile-avatar-size: 48px;
    --dile-avatar-background-color: #bef;
<dile-avatar id="avatar3"></dile-avatar>