Custom Avatar Components

Circular Avatars

• Preview
• Code

Small

Medium

Large

Extra Large

Copy

<div class="avatar-showcase-card"> <div class="avatar-showcase"> <div> <span class="avatar-showcase-label">Small</span> <div class="avatar avatar--circular avatar--sm"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> </div> <div> <span class="avatar-showcase-label">Medium</span> <div class="avatar avatar--circular avatar--md"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> </div> <div> <span class="avatar-showcase-label">Large</span> <div class="avatar avatar--circular avatar--lg"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> </div> <div> <span class="avatar-showcase-label">Extra Large</span> <div class="avatar avatar--circular avatar--xl"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> </div> </div> </div>

Rounded Avatars

• Preview
• Code

Small

Medium

Large

Extra Large

Copy

<div class="avatar-showcase-card"> <div class="avatar-showcase"> <div> <span class="avatar-showcase-label">Small</span> <div class="avatar avatar--rounded avatar--sm"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> </div> <div> <span class="avatar-showcase-label">Medium</span> <div class="avatar avatar--rounded avatar--md"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> </div> <div> <span class="avatar-showcase-label">Large</span> <div class="avatar avatar--rounded avatar--lg"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> </div> <div> <span class="avatar-showcase-label">Extra Large</span> <div class="avatar avatar--rounded avatar--xl"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> </div> </div> </div>

Circular Avatars with Top Notification

• Preview
• Code

Small

Medium

Large

Extra Large

Copy

<div class="avatar-showcase-card"> <div class="avatar-showcase"> <div> <span class="avatar-showcase-label">Small</span> <div class="avatar avatar--circular avatar--sm"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> <span class="avatar__notification avatar__notification--top avatar__notification--success"></span> </div> </div> <div> <span class="avatar-showcase-label">Medium</span> <div class="avatar avatar--circular avatar--md"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> <span class="avatar__notification avatar__notification--top avatar__notification--danger"></span> </div> </div> <div> <span class="avatar-showcase-label">Large</span> <div class="avatar avatar--circular avatar--lg"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> <span class="avatar__notification avatar__notification--top avatar__notification--warning"></span> </div> </div> <div> <span class="avatar-showcase-label">Extra Large</span> <div class="avatar avatar--circular avatar--xl"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> <span class="avatar__notification avatar__notification--top avatar__notification--info"></span> </div> </div> </div> </div>

Circular Avatars with Bottom Notification

• Preview
• Code

Small

Medium

Large

Extra Large

Copy

<div class="avatar-showcase-card"> <div class="avatar-showcase"> <div> <span class="avatar-showcase-label">Small</span> <div class="avatar avatar--circular avatar--sm"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> <span class="avatar__notification avatar__notification--bottom avatar__notification--success"></span> </div> </div> <div> <span class="avatar-showcase-label">Medium</span> <div class="avatar avatar--circular avatar--md"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> <span class="avatar__notification avatar__notification--bottom avatar__notification--danger"></span> </div> </div> <div> <span class="avatar-showcase-label">Large</span> <div class="avatar avatar--circular avatar--lg"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> <span class="avatar__notification avatar__notification--bottom avatar__notification--warning"></span> </div> </div> <div> <span class="avatar-showcase-label">Extra Large</span> <div class="avatar avatar--circular avatar--xl"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> <span class="avatar__notification avatar__notification--bottom avatar__notification--info"></span> </div> </div> </div> </div>

Rounded Avatars with Top Notification

• Preview
• Code

Small

Medium

Large

Extra Large

Copy

<div class="avatar-showcase-card"> <div class="avatar-showcase"> <div> <span class="avatar-showcase-label">Small</span> <div class="avatar avatar--rounded avatar--sm"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> <span class="avatar__notification avatar__notification--top avatar__notification--success"></span> </div> </div> <div> <span class="avatar-showcase-label">Medium</span> <div class="avatar avatar--rounded avatar--md"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> <span class="avatar__notification avatar__notification--top avatar__notification--danger"></span> </div> </div> <div> <span class="avatar-showcase-label">Large</span> <div class="avatar avatar--rounded avatar--lg"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> <span class="avatar__notification avatar__notification--top avatar__notification--warning"></span> </div> </div> <div> <span class="avatar-showcase-label">Extra Large</span> <div class="avatar avatar--rounded avatar--xl"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> <span class="avatar__notification avatar__notification--top avatar__notification--info"></span> </div> </div> </div> </div>

Rounded Avatars with Bottom Notification

• Preview
• Code

Small

Medium

Large

Extra Large

Copy

<div class="avatar-showcase-card"> <div class="avatar-showcase"> <div> <span class="avatar-showcase-label">Small</span> <div class="avatar avatar--rounded avatar--sm"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> <span class="avatar__notification avatar__notification--bottom avatar__notification--success"></span> </div> </div> <div> <span class="avatar-showcase-label">Medium</span> <div class="avatar avatar--rounded avatar--md"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> <span class="avatar__notification avatar__notification--bottom avatar__notification--danger"></span> </div> </div> <div> <span class="avatar-showcase-label">Large</span> <div class="avatar avatar--rounded avatar--lg"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> <span class="avatar__notification avatar__notification--bottom avatar__notification--warning"></span> </div> </div> <div> <span class="avatar-showcase-label">Extra Large</span> <div class="avatar avatar--rounded avatar--xl"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> <span class="avatar__notification avatar__notification--bottom avatar__notification--info"></span> </div> </div> </div> </div>

Circular Avatars with Placeholder Icon

Circular Avatars with Placeholder Initials

Circular Avatar Groups

• Preview
• Code

Small

SK

+3

Medium

SK

+3

Large

SK

+3

Copy

<div class="avatar-showcase-card"> <span class="avatar-showcase-label">Small</span> <div class="avatar-group avatar-group--stacked"> <div class="avatar avatar--circular avatar--sm"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--circular avatar--sm"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--circular avatar--sm"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--circular avatar--sm"> <div class="avatar__placeholder"> <span class="avatar__placeholder--initials">SK</span> </div> </div> <div class="avatar avatar-group__count avatar--circular avatar--sm"> <span>+3</span> </div> </div> </div> <div class="avatar-showcase-card"> <span class="avatar-showcase-label">Medium</span> <div class="avatar-group avatar-group--stacked"> <div class="avatar avatar--circular avatar--md"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--circular avatar--md"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--circular avatar--md"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--circular avatar--md"> <div class="avatar__placeholder"> <span class="avatar__placeholder--initials">SK</span> </div> </div> <div class="avatar avatar-group__count avatar--circular avatar--md"> <span>+3</span> </div> </div> </div> <div class="avatar-showcase-card"> <span class="avatar-showcase-label">Large</span> <div class="avatar-group avatar-group--stacked"> <div class="avatar avatar--circular avatar--lg"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--circular avatar--lg"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--circular avatar--lg"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--circular avatar--lg"> <div class="avatar__placeholder"> <span class="avatar__placeholder--initials">SK</span> </div> </div> <div class="avatar avatar-group__count avatar--circular avatar--lg"> <span>+3</span> </div> </div> </div>

Rounded Avatar Groups

• Preview
• Code

Small

SK

+3

Medium

+3

Large

+3

Extra Large

+3

Copy

<div class="avatar-showcase-card"> <span class="avatar-showcase-label">Small</span> <div class="avatar-group avatar-group--stacked"> <div class="avatar avatar--rounded avatar--sm"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--rounded avatar--sm"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--rounded avatar--sm"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--rounded avatar--sm"> <div class="avatar__placeholder"> <span class="avatar__placeholder--initials">SK</span> </div> </div> <div class="avatar avatar-group__count avatar--rounded avatar--sm"> <span>+3</span> </div> </div> </div> <div class="avatar-showcase-card"> <span class="avatar-showcase-label">Medium</span> <div class="avatar-group avatar-group--stacked"> <div class="avatar avatar--rounded avatar--md"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--rounded avatar--md"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--rounded avatar--md"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--rounded avatar--md"> <div class="avatar__placeholder"> <i data-lucide="user" class="avatar__placeholder--icon"></i> </div> </div> <div class="avatar avatar-group__count avatar--rounded avatar--md"> <span>+3</span> </div> </div> </div> <div class="avatar-showcase-card"> <span class="avatar-showcase-label">Large</span> <div class="avatar-group avatar-group--stacked"> <div class="avatar avatar--rounded avatar--lg"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--rounded avatar--lg"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--rounded avatar--lg"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--rounded avatar--lg"> <div class="avatar__placeholder"> <i data-lucide="user" class="avatar__placeholder--icon"></i> </div> </div> <div class="avatar avatar-group__count avatar--rounded avatar--lg"> <span>+3</span> </div> </div> </div> <div class="avatar-showcase-card"> <span class="avatar-showcase-label">Extra Large</span> <div class="avatar-group avatar-group--stacked"> <div class="avatar avatar--rounded avatar--xl"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--rounded avatar--xl"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--rounded avatar--xl"> <img class="avatar__img" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" alt="User avatar" /> </div> <div class="avatar avatar--rounded avatar--xl"> <div class="avatar__placeholder"> <i data-lucide="user" class="avatar__placeholder--icon"></i> </div> </div> <div class="avatar avatar-group__count avatar--rounded avatar--xl"> <span>+3</span> </div> </div> </div>