Bootstrap 5 Avatar
Avatar
The Avatar component is used to display circular user profile pictures. Avatars can portray people or objects and support images, icons, or letters.
🤖 Looking for the LLM-optimized version?View llm.md
Other frameworks
CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.
On this page
Image avatars
Showcase avatars using images. These avatars are typically circular and can display user profile pictures.
html
<divclass="avatar"><imgclass="avatar-img"src="/assets/img/avatars/1.jpg"alt="[email protected]"></div><divclass="avatar"><imgclass="avatar-img"src="/assets/img/avatars/2.jpg"alt="[email protected]"></div><divclass="avatar"><imgclass="avatar-img"src="/assets/img/avatars/3.jpg"alt="[email protected]"></div>Letter avatars
Use letters inside avatars to represent users or objects when images are not available. This can be useful for displaying initials.
CUI
CUI
CUI
html
<divclass="avatar bg-primary text-white">CUI</div><divclass="avatar bg-secondary">CUI</div><divclass="avatar bg-warning text-white">CUI</div>Icons avatars
Incorporate icons within avatars, allowing for a visual representation using scalable vector graphics (SVG).
html
<divclass="avatar bg-info text-white"><svgid="cib-coreui-c"class="icon"viewBox="0 0 32 32"><pathd="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path><pathd="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path></svg></div><divclass="avatar bg-success text-white"><svgid="cib-coreui-c"class="icon"viewBox="0 0 32 32"><pathd="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path><pathd="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path></svg></div><divclass="avatar bg-danger text-white"><svgid="cib-coreui-c"class="icon"viewBox="0 0 32 32"><pathd="M27.912 7.289l-10.324-5.961c-0.455-0.268-1.002-0.425-1.588-0.425s-1.133 0.158-1.604 0.433l0.015-0.008-10.324 5.961c-0.955 0.561-1.586 1.582-1.588 2.75v11.922c0.002 1.168 0.635 2.189 1.574 2.742l0.016 0.008 10.322 5.961c0.455 0.267 1.004 0.425 1.59 0.425 0.584 0 1.131-0.158 1.602-0.433l-0.014 0.008 10.322-5.961c0.955-0.561 1.586-1.582 1.588-2.75v-11.922c-0.002-1.168-0.633-2.189-1.573-2.742zM27.383 21.961c0 0.389-0.211 0.73-0.526 0.914l-0.004 0.002-10.324 5.961c-0.152 0.088-0.334 0.142-0.53 0.142s-0.377-0.053-0.535-0.145l0.005 0.002-10.324-5.961c-0.319-0.186-0.529-0.527-0.529-0.916v-11.922c0-0.389 0.211-0.73 0.526-0.914l0.004-0.002 10.324-5.961c0.152-0.090 0.334-0.143 0.53-0.143s0.377 0.053 0.535 0.144l-0.006-0.002 10.324 5.961c0.319 0.185 0.529 0.527 0.529 0.916z"></path><pathd="M22.094 19.451h-0.758c-0.188 0-0.363 0.049-0.515 0.135l0.006-0.004-4.574 2.512-5.282-3.049v-6.082l5.282-3.051 4.576 2.504c0.146 0.082 0.323 0.131 0.508 0.131h0.758c0.293 0 0.529-0.239 0.529-0.531v-0.716c0-0.2-0.11-0.373-0.271-0.463l-0.004-0.002-5.078-2.777c-0.293-0.164-0.645-0.26-1.015-0.26-0.39 0-0.756 0.106-1.070 0.289l0.010-0.006-5.281 3.049c-0.636 0.375-1.056 1.055-1.059 1.834v6.082c0 0.779 0.422 1.461 1.049 1.828l0.009 0.006 5.281 3.049c0.305 0.178 0.67 0.284 1.061 0.284 0.373 0 0.723-0.098 1.027-0.265l-0.012 0.006 5.080-2.787c0.166-0.091 0.276-0.265 0.276-0.465v-0.716c0-0.293-0.238-0.529-0.529-0.529z"></path></svg></div>Rounded avatars
Create avatars with rounded corners by adding the.rounded class. This gives a softer, less angular appearance.
CUI
CUI
CUI
html
<divclass="avatar rounded bg-primary text-white">CUI</div><divclass="avatar rounded bg-secondary">CUI</div><divclass="avatar rounded bg-warning text-white">CUI</div>Square avatars
Make avatars square by using the.rounded-0 class, removing any rounded edges for a sharper look.
CUI
CUI
CUI
html
<divclass="avatar rounded-0 bg-primary text-white">CUI</div><divclass="avatar rounded-0 bg-secondary">CUI</div><divclass="avatar rounded-0 bg-warning text-white">CUI</div>Sizes
Adjust the size of avatars using the.avatar-sm,.avatar-md,.avatar-lg, and.avatar-xl classes for larger or smaller versions.
CUI
CUI
CUI
CUI
CUI
html
<divclass="avatar avatar-xl bg-secondary">CUI</div><divclass="avatar avatar-lg bg-secondary">CUI</div><divclass="avatar avatar-md bg-secondary">CUI</div><divclass="avatar bg-secondary">CUI</div><divclass="avatar avatar-sm bg-secondary">CUI</div>Stacked avatars
Display multiple avatars in a stack to represent a group of users or items, with additional count if there are more avatars than can be displayed.
+2
html
<divclass="avatars-stack"><divclass="avatar"><imgclass="avatar-img"src="/assets/img/avatars/1.jpg"alt="[email protected]"></div><divclass="avatar"><imgclass="avatar-img"src="/assets/img/avatars/2.jpg"alt="[email protected]"></div><divclass="avatar"><imgclass="avatar-img"src="/assets/img/avatars/3.jpg"alt="[email protected]"></div><divclass="avatar bg-secondary"> +2</div></div>Avatars with status
Add a status indicator to avatars using the .avatar-status class to show online or offline status.
CUI
html
<divclass="avatar"><imgclass="avatar-img"src="/assets/img/avatars/1.jpg"alt="[email protected]"><spanclass="avatar-status bg-success"></span></div><divclass="avatar bg-secondary"> CUI<spanclass="avatar-status bg-danger"></span></div>Customizing
CSS variables
Avatars use local CSS variables on.avatar for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
scss/_avatar.scss
--cui-avatar-width:#{$avatar-width};--cui-avatar-height:#{$avatar-height};--cui-avatar-font-size:#{$avatar-font-size};--cui-avatar-border-radius:#{$avatar-border-radius};--cui-avatar-status-width:#{$avatar-status-width};--cui-avatar-status-height:#{$avatar-status-height};--cui-avatar-status-border-radius:#{$avatar-status-border-radius};SASS variables
scss/_variables.scss
$avatar-width:2rem;$avatar-height:2rem;$avatar-font-size:.8rem;$avatar-border-radius:50em;$avatar-status-width:.5rem;$avatar-status-height:.5rem;$avatar-status-border-radius:50em;$avatar-transition:margin.15s;$avatar-sizes:(sm:(width:1.5rem,height:1.5rem,font-size:.6rem,status-width:.4rem,status-height:.4rem),md:(width:2.5rem,height:2.5rem,font-size:1rem,status-width:.7rem,status-height:.7rem),lg:(width:3rem,height:3rem,font-size:1.2rem,status-width:.8rem,status-height:.8rem),xl:(width:4rem,height:4rem,font-size:1.6rem,status-width:1rem,status-height:1rem),);