logo polydile dile-components


This is a web component to create a user avatar interface that can be configured on diferent ways. In order of preference:

So, when an image is provided, the component uses the image. If not, the initial letter is used. If neither an image nor an initial is provided, the avatar shows a default user icon.


npm i @dile/ui


Import the component:

import '@dile/ui/components/avatar/avatar.js';

Use the component:

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


CSS Custom Properties

You can customize the avatar using these CSS Custom Properties.

Custom property Description Default
--dile-avatar-size The size of the avatar 36px
--dile-avatar-background-color background color for the avatar --dile-primary-color or #ddd
--dile-avatar-color Color for the initial letter #888
--dile-avatar-font-family Initial font family Arial, sans-serif

dile-avatar demos

Avatar configured with an image

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

Avatar configured with an initial letter

<dile-avatar initial="julian"></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>