Avatar
Avatars are found throughout material design with uses in everything from tables to dialog menus.
UsageNg Avatar
Basic
<div class="D-flex Justify-content-center">
<div class='W-25 W-lg-20 Avatar Sign-top Sqr F-shadow'>
<div class='Centered'>
<svg role="img" xmlns="http://www.w3.org/2000/svg">
<title>Jane Doe</title>
<mask id="circle-Test-0">
<circle fill="white" r="50%"/>
<circle fill="black" r="10%"/>
</mask>
<g mask="url(#circle-Test-0)">
<image xlink:href="https://i.pravatar.cc/300" width="100%" height="100%"></image>
<!-- Inner Border -->
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
<div class="Avatar-badge"></div>
</div>
</div>
<div class='W-25 W-lg-20 Avatar Sign-bottom Sqr F-shadow'>
<div class='Centered'>
<svg role="img" xmlns="http://www.w3.org/2000/svg">
<title>Jane Doe</title>
<mask id="circle-Test-1">
<circle fill="white" r="50%"/>
<circle fill="black" r="10%"/>
</mask>
<g mask="url(#circle-Test-1)">
<image xlink:href="https://i.pravatar.cc/300" width="100%" height="100%"></image>
<!-- Inner Border -->
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
<div class="Avatar-badge"></div>
</div>
</div>
</div>
Examples
Image avatars
Image avatars can be created by passing standard Img props to the component.
<div class="D-flex Justify-content-center">
<div class='W-25 W-lg-15 Avatar Sqr F-shadow'>
<div class='Centered'>
<svg role="img" xmlns="http://www.w3.org/2000/svg">
<title>Jane Doe</title>
<mask id="circle-ImageAvatar-1">
<circle fill="white" r="50%"/>
<circle fill="black" r="10%"/>
</mask>
<g mask="url(#circle-ImageAvatar-1)">
<image xlink:href="https://i.pravatar.cc/500" width="100%" height="100%"></image>
<!-- Inner Border -->
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
</div>
</div>
</div>
Letter avatars
Avatars containing simple characters.
<div class="D-flex Justify-content-center">
<div class='W-25 W-lg-15 Avatar Sqr F-shadow'>
<div class='Centered'>
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.8 35.8">
<title>I</title>
<mask id="circle-LetterAvatar-1">
<circle fill="white" r="50%"/>
<circle fill="black" r="10%"/>
</mask>
<g mask="url(#circle-LetterAvatar-1)">
<!-- Letter -->
<circle [attr.fill]="'#25C0F4'" r="50%"/>
<text color="black" x="50%" y="50%" font-size="90%">I</text>
<!-- Inner Border -->
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
</div>
</div>
</div>
Sizes
You can change the size of the avatar with the Css Classes or height and width CSS properties.
<div class="D-flex Justify-content-center">
<div class='W-20 Avatar Sqr F-shadow'>
<div class='Centered'>
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<title>Jane Doe</title>
<mask id="circle-Size-1">
<circle fill="white" r="50%"/>
<circle fill="black" r="10%"/>
</mask>
<g mask="url(#circle-Size-1)">
<image xlink:href="https://i.pravatar.cc/500" width="100%" height="100%"></image>
<!-- Inner Border -->
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
</div>
</div>
<div class='Avatar Sqr F-shadow' style="width: 5%;">
<div class='Centered'>
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<title>Jane Doe</title>
<mask id="circle-Size-3">
<circle fill="white" r="50%"/>
<circle fill="black" r="10%"/>
</mask>
<g mask="url(#circle-Size-3)">
<image xlink:href="https://i.pravatar.cc/500" width="100%" height="100%"></image>
<!-- Inner Border -->
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
</div>
</div>
</div>
Icon avatars
Icon avatars are created by passing an icon as children.
<div class="D-flex Justify-content-center">
<div class='W-10 Avatar Sqr F-shadow Fg-white'>
<div class='Centered'>
<!-- Icons -->
<div class="Position-absolute Top-50 Start-50 Translate-middle">
<i class="fa-solid fa-bars"></i>
</div>
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<mask id="circle-Icons-1">
<circle fill="white" r="50%"/>
<circle fill="black" r="10%"/>
</mask>
<g mask="url(#circle-Icons-1)">
<!-- Letter -->
<circle [attr.fill]="'#25C0F4'" r="50%"/>
<!-- Inner Border -->
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
</div>
</div>
</div>
Variants
If you need square or rounded avatars, use the Variant prop.
<div class="D-flex Justify-content-center">
<!-- Circle -->
<div class='W-15 Avatar Sqr F-shadow'>
<div class='Centered'>
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<mask id="circle-Variants-1">
<circle fill="white" r="50%"/>
<circle fill="black" r="10%"/>
</mask>
<g mask="url(#circle-Variants-1)">
<image xlink:href="https://i.pravatar.cc/500" width="100%" height="100%"></image>
<!-- Inner Border -->
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
</div>
</div>
<!-- Rectangle: Round -->
<div class='W-15 Avatar Sqr F-shadow'>
<div class='Centered'>
<svg role="img" xmlns="http://www.w3.org/2000/svg">
<mask id="rect-Variants-2">
<rect fill="white" rx="8" ry="8" width="85%" height="85%"></rect>
<circle fill="black" r="10%"/>
</mask>
<g mask="url(#rect-Variants-2)">
<image xlink:href="https://i.pravatar.cc/500" width="100%" height="100%"></image>
<!-- Inner Border -->
<rect class="Avatar-border Round" rx="8" ry="8" width="85%" height="85%"></rect>
</g>
</svg>
</div>
</div>
<!-- Rectangle -->
<div class='W-15 Avatar Sqr F-shadow'>
<div class='Centered'>
<svg role="img" xmlns="http://www.w3.org/2000/svg">
<mask id="rect-Variants-3">
<rect fill="white" rx="8" ry="8" width="85%" height="85%"></rect>
<circle fill="black" r="10%"/>
</mask>
<g mask="url(#rect-Variants-3)">
<image xlink:href="https://i.pravatar.cc/500" width="100%" height="100%"></image>
<!-- Inner Border -->
<rect class="Avatar-border" rx="8" ry="8" width="85%" height="85%"></rect>
</g>
</svg>
</div>
</div>
</div>
With badge
<div class="D-flex Justify-content-center">
<div class='W-15 Avatar Sqr Sign-bottom F-shadow'>
<div class='Centered'>
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<title>Jane Doe</title>
<mask id="circle-Badge-1">
<circle fill="white" r="50%"/>
<circle fill="black" r="10%"/>
</mask>
<g mask="url(#circle-Badge-1)">
<image xlink:href="https://i.pravatar.cc/500" width="100%" height="100%"></image>
<!-- Inner Border -->
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
<div class="Avatar-badge Online"></div>
</div>
</div>
<div class='W-15 Avatar Sign-top Sqr F-shadow'>
<div class='Centered'>
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<title>Jane Doe</title>
<mask id="rect-Badge-2">
<rect class="Round" fill="white" rx="8" ry="8" width="85%" height="85%"></rect>
<circle fill="black" r="10%"/>
</mask>
<g mask="url(#rect-Badge-2)">
<image xlink:href="https://i.pravatar.cc/500" width="100%" height="100%"></image>
<!-- Inner Border -->
<rect class="Avatar-border Round" rx="8" ry="8" width="85%" height="85%"></rect>
</g>
</svg>
<div class="Avatar-badge"></div>
</div>
</div>
</div>
Inner Border
<div class='W-15 Avatar Sqr F-shadow'>
<div class='Centered'>
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<mask id="circle-Border-1">
<circle fill="white" r="50%"/>
<circle fill="black" r="10%"/>
</mask>
<g mask="url(#circle-Border-1)">
<!-- Letter -->
<circle [attr.fill]="'#25C0F4'" r="50%"/>
<!-- Inner Border -->
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
</div>
</div>
Grouped
Avatar Group
.Avatar-group stacks after 3th. Use .Avatar-group-reversed class for reversed group.
<div class="D-flex Justify-content-center">
<div class='W-100 W-lg-40 Avatar-group F-shadow'>
<div class="Sqr" *ngFor="let i of [0,3,6,9,12,15,18]; let first=first;">
<div class="Centered">
<svg role="img" xmlns="http://www.w3.org/2000/svg">
<mask id="mask-AvatarGroup-{/{i}/}">
<circle fill="white" r="50%"/>
<circle fill="black" r="50%" *ngIf="!first"/>
</mask>
<g [attr.mask]="'url(#mask-AvatarGroup-'+i+')'">
<image width="100%" height="100%" [attr.xlink:href]="'https://i.pravatar.cc/'+(400 + i)"></image>
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
</div>
</div>
</div>
<div class='W-100 W-lg-40 Avatar-group Avatar-group-reversed F-shadow'>
<div class="Sqr" *ngFor="let i of [18,15,12,9,6,3,0]; let last = last;">
<div class="Centered">
<svg role="img" xmlns="http://www.w3.org/2000/svg">
<mask id="mask-AvatarGroupReversed-{/{i}/}">
<circle fill="white" r="50%"/>
<circle fill="black" r="50%" *ngIf="!last"/>
</mask>
<g [attr.mask]="'url(#mask-AvatarGroupReversed-'+i+')'">
<image width="100%" height="100%" [attr.xlink:href]="'https://i.pravatar.cc/'+(400 + i)"></image>
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
</div>
</div>
</div>
</div>
Use the More prop to show counts.
<div class="D-flex Justify-content-center">
<div class='W-100 W-lg-40 Avatar-group Quadruplet F-shadow'>
<div class="Sqr" *ngFor="let i of [0,3,6]; let first=first;">
<div class="Centered">
<svg role="img" xmlns="http://www.w3.org/2000/svg">
<mask id="maskGroupPlus-{/{i}/}">
<circle fill="white" r="50%"/>
<circle fill="black" r="50%" *ngIf="!first"/>
</mask>
<g [attr.mask]="'url(#maskGroupPlus-'+i+')'">
<image width="100%" height="100%" [attr.xlink:href]="'https://i.pravatar.cc/'+(400 + i)"></image>
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
</div>
</div>
<div class="Sqr Fg-yellow">
<div class="Centered">
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.8 35.8">
<mask id="maskGroupPlus-Num">
<circle fill="white" r="50%"/>
<circle fill="black" r="50%"/>
</mask>
<g [attr.mask]="'url(#maskGroupPlus-Num)'">
<circle fill="white" r="50%"/>
<text x="50%" y="50%" font-size="80%">+5</text>
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
</div>
</div>
</div>
<div class='W-100 W-lg-40 Avatar-group Avatar-group-reversed Quadruplet F-shadow'>
<div class="Sqr Fg-yellow">
<div class="Centered">
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.8 35.8">
<mask id="maskGroupReversedPlus-Num">
<circle fill="white" r="50%"/>
<circle fill="black" r="50%"/>
</mask>
<g [attr.mask]="'url(#maskGroupReversedPlus-Num)'">
<circle fill="white" r="50%"/>
<text x="50%" y="50%" font-size="80%">5+</text>
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
</div>
</div>
<div class="Sqr" *ngFor="let i of [6,3,0];let last = last;">
<div class="Centered">
<svg role="img" xmlns="http://www.w3.org/2000/svg">
<mask id="maskGroupReversedPlus-{/{i}/}">
<circle fill="white" r="50%"/>
<circle fill="black" r="50%" *ngIf="!last"/>
</mask>
<g [attr.mask]="'url(#maskGroupReversedPlus-'+i+')'">
<image width="100%" height="100%" [attr.xlink:href]="'https://i.pravatar.cc/'+(400 + i)"></image>
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
</div>
</div>
</div>
</div>
Fixed up to 4th images. Use .Twin, .Triplet & .Quadruplet classes.
<div class="Row G-1">
<!-- Twin -->
<div class="Col-12 Col-lg-3 Border PX-4">
<div class='Avatar-group Twin F-shadow'>
<div class="Sqr" *ngFor="let i of [0,3]; let first=first;">
<div class="Centered">
<svg role="img" xmlns="http://www.w3.org/2000/svg">
<mask id="maskGroupTw-{/{i}/}">
<circle fill="white" r="50%"/>
<circle fill="black" r="50%" *ngIf="!first"/>
</mask>
<g [attr.mask]="'url(#maskGroupTw-'+i+')'">
<image width="100%" height="100%" [attr.xlink:href]="'https://i.pravatar.cc/'+(400 + i)"></image>
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
</div>
</div>
</div>
</div>
<!-- Triplet -->
<div class="Col-12 Col-lg-4 Border PX-4">
<div class='Avatar-group Triplet F-shadow'>
<div class="Sqr" *ngFor="let i of [0,3,6]; let first=first;">
<div class="Centered">
<svg role="img" xmlns="http://www.w3.org/2000/svg">
<mask id="maskGroupTr-{/{i}/}">
<circle fill="white" r="50%"/>
<circle fill="black" r="50%" *ngIf="!first"/>
</mask>
<g [attr.mask]="'url(#maskGroupTr-'+i+')'">
<image width="100%" height="100%" [attr.xlink:href]="'https://i.pravatar.cc/'+(400 + i)"></image>
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
</div>
</div>
</div>
</div>
<!-- Quadruplet -->
<div class="Col-12 Col-lg-5 Border PX-4">
<div class='Avatar-group Quadruplet F-shadow'>
<div class="Sqr" *ngFor="let i of [0,3,6,9]; let first=first;">
<div class="Centered">
<svg role="img" xmlns="http://www.w3.org/2000/svg">
<mask id="maskGroupQ-{/{i}/}">
<circle fill="white" r="50%"/>
<circle fill="black" r="50%" *ngIf="!first"/>
</mask>
<g [attr.mask]="'url(#maskGroupQ-'+i+')'">
<image width="100%" height="100%" [attr.xlink:href]="'https://i.pravatar.cc/'+(400 + i)"></image>
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="Row G-1">
<!-- Twin -->
<div class="Col-12 Col-lg-3 Border PX-4">
<div class='Avatar-group Avatar-group-reversed Twin F-shadow'>
<div class="Sqr" *ngFor="let i of [0,3]; let last = last;">
<div class="Centered">
<svg role="img" xmlns="http://www.w3.org/2000/svg">
<mask id="maskGroupReversedTW-{/{i}/}">
<circle fill="white" r="50%"/>
<circle fill="black" r="50%" *ngIf="!last"/>
</mask>
<g [attr.mask]="'url(#maskGroupReversedTW-'+i+')'">
<image width="100%" height="100%" [attr.xlink:href]="'https://i.pravatar.cc/'+(400 + i)"></image>
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
</div>
</div>
</div>
</div>
<!-- Triplet -->
<div class="Col-12 Col-lg-4 Border PX-4">
<div class='Avatar-group Avatar-group-reversed Triplet F-shadow'>
<div class="Sqr" *ngFor="let i of [0,3,6]; let last = last;">
<div class="Centered">
<svg role="img" xmlns="http://www.w3.org/2000/svg">
<mask id="maskGroupReversedTr-{/{i}/}">
<circle fill="white" r="50%"/>
<circle fill="black" r="50%" *ngIf="!last"/>
</mask>
<g [attr.mask]="'url(#maskGroupReversedTr-'+i+')'">
<image width="100%" height="100%" [attr.xlink:href]="'https://i.pravatar.cc/'+(400 + i)"></image>
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
</div>
</div>
</div>
</div>
<!-- Quadruplet -->
<div class="Col-12 Col-lg-5 Border PX-4">
<div class='Avatar-group Avatar-group-reversed Quadruplet F-shadow'>
<div class="Sqr" *ngFor="let i of [0,3,6,9]; let last = last;">
<div class="Centered">
<svg role="img" xmlns="http://www.w3.org/2000/svg">
<mask id="maskGroupReversedQ-{/{i}/}">
<circle fill="white" r="50%"/>
<circle fill="black" r="50%" *ngIf="!last"/>
</mask>
<g [attr.mask]="'url(#maskGroupReversedQ-'+i+')'">
<image width="100%" height="100%" [attr.xlink:href]="'https://i.pravatar.cc/'+(400 + i)"></image>
<circle class="Avatar-border" r="50%"/>
</g>
</svg>
</div>
</div>
</div>
</div>
</div>
Deprecated
With CSS mask [radial-gradient]:
<div class='W-20 Avatar-CSSMask Sqr F-shadow MX-auto'>
<div class="Centered">
<img src="https://i.pravatar.cc/300" alt=""/>
<div class="Avatar-badge"></div>
</div>
</div>
//
// Deprecated ways!!
// Avatar - with CSS Mask [radial-gradient]
//
.Avatar-CSSMask {
position: relative;
display: block;
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
// mask-image: radial-gradient(circle 20px at calc(100% - 30px) calc(100% - 30px), transparent 30px, #000 0);
mask-image: radial-gradient(circle at calc(100% - calc(15% - 0px)) calc(100% - calc(15% - 0px)), transparent calc(10% - 2px), #000 0);
}
}
With Svg clipPath clip-path: url("#clipPathId");:
<div class='Avatar-ClipPath Sqr F-shadow MX-auto'>
<div class='Centered'>
<img src="https://i.pravatar.cc/300" alt=""/>
<div class="Avatar-badge Online"></div>
</div>
</div>
<svg class="Position-absolute Top-0" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clipPathId" clipPathUnits="objectBoundingBox">
<path
d="M0.5,0 C0.776,0,1,0.224,1,0.5 C1,0.603,0.969,0.7,0.915,0.779 C0.897,0.767,0.876,0.76,0.853,0.76 C0.794,0.76,0.747,0.808,0.747,0.867 C0.747,0.888,0.753,0.908,0.764,0.925 C0.687,0.972,0.597,1,0.5,1 C0.224,1,0,0.776,0,0.5 C0,0.224,0.224,0,0.5,0"></path>
</clipPath>
</defs>
</svg>
//
// Deprecated ways!!
// Avatar - with Svg clipPath
//
.Avatar-ClipPath {
position: relative;
display: block;
width: 150px;
height: 150px;
:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid;
opacity: 0.2;
clip-path: url("#clipPathId");
}
img {
display: block;
width: 100%;
height: 100%;
min-height: 150px;
object-fit: cover;
border-radius: 50%;
clip-path: url("#clipPathId");
}
.Avatar-badge {
right: 6%;
bottom: 5%;
width: 17%;
height: 17%;
}
}