Symbol is a custom component for avatars or labels with content colors.
										
									 
									
									
									
										
										
										 
										
										
										Refer to below example to use Symbol for avatar image display:
										
										
										
										
										
										
											
											
												copy 
												
													
<div class="symbol symbol-50px">
    <img src="assets/media/avatars/300-6.jpg" alt=""/>
</div>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Refer to below example to place avatar as background image:
										
										
										
										
										
										
											
											
												copy 
												
													
<div class="symbol symbol-50px">
    <div class="symbol-label" style="background-image:url('assets/media/avatars/300-12.jpg')"></div>
</div>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Use
										.symbol-2by3class to set avatar background image with 2 by 3 ratio:
										
										
										
										
										
										
											
											
												copy 
												
													
<div class="symbol symbol-50px symbol-2by3">
    <img src="assets/media/avatars/300-6.jpg" alt=""/>
</div>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Set symbol label within
										.symbol-labelelement and style it with text and background utility classes:
										
										
										
										
										
										
											
											
												copy 
												
													
<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-bold bg-danger text-inverse-danger">L</div>
</div>
<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-bold text-danger">C</div>
</div>
<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-bold bg-primary text-inverse-primary">T</div>
</div>
<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-bold text-warning">X</div>
</div>
<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-bold bg-info text-inverse-info">S</div>
</div>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Add a badge element using
										.badgecomponent inside a symbol element:
										
										
										
										
										
										
											
											
												copy 
												
													
<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-bold">A</div>
    <span class="symbol-badge badge badge-circle bg-danger start-100">3</span>
</div>
<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-bold">A</div>
    <span class="symbol-badge badge badge-circle bg-success top-100 start-100">3</span>
</div>
<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-bold">A</div>
    <span class="symbol-badge badge badge-circle bg-primary start-0">3</span>
</div>
<div class="symbol symbol-50px">
    <div class="symbol-label fs-2 fw-bold">A</div>
    <span class="symbol-badge badge badge-circle bg-warning start-0 top-100">3</span>
</div>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Use
										.symbol-circleand
										.symbol-squareclasses to change a symbol element's style:
										
										
										
										
										
										
											
											
												copy 
												
													
<div class="symbol symbol-50px">
    <div class="symbol-label" style="background-image:url(assets/media/avatars/300-6.jpg)"></div>
</div>
<div class="symbol symbol-50px">
<div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-50px symbol-circle">
    <div class="symbol-label" style="background-image:url(assets/media/avatars/300-6.jpg)"></div>
</div>
<div class="symbol symbol-50px symbol-circle">
    <div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-50px symbol-square">
    <div class="symbol-label" style="background-image:url(assets/media/avatars/300-6.jpg)"></div>
</div>
<div class="symbol symbol-50px symbol-square">
    <div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Assign responsive-friendly size to a symbol element with shorthand classes. The classes are named using the format
										.symbol-{size}for
										xsand
										.symbol-{breakpoint}-{size}for
										sm,
										md,
										lg,
										xl, and
										xxl.
										
										
										Where
										
sizeis one of:
										
											
											20px- for classes that set height and width to 20px 
											
											25px- for classes that set height and width to 25px 
											
											30px- for classes that set height and width to 30px 
											
											35px- for classes that set height and width to 35px 
											
											40px- for classes that set height and width to 40px 
											
											45px- for classes that set height and width to 45px 
											
											50px- for classes that set height and width to 50px 
											
											55px- for classes that set height and width to 55px 
											
											60px- for classes that set height and width to 60px 
											
											65px- for classes that set height and width to 65px 
											
											70px- for classes that set height and width to 70px 
											
											75px- for classes that set height and width to 75px 
											
											100px- for classes that set height and width to 100px 
											
											125px- for classes that set height and width to 125px 
											
											150px- for classes that set height and width to 150px 
											
											160px- for classes that set height and width to 160px 
											
											175px- for classes that set height and width to 175px 
											
											200px- for classes that set height and width to 200px 
										 
											
											
												copy 
												
													
<div class="symbol symbol-30px">
  <div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-50px">
  <div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-75px">
  <div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-100px">
  <div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-125px">
  <div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
<div class="symbol symbol-150px">
  <div class="symbol-label fs-2 fw-bold text-success">A</div>
</div>
 
												 
											 
											
										 
										
									 
									
									
									
										
										
										 
										
										
										Wrap symbols with
										.symbol-groupclass to have a group with slighly overlapped symbols:
										
										
										
										
										
										
											
											
												copy 
												
													
<div class="symbol-group symbol-hover">
    <div class="symbol symbol-circle symbol-50px">
        <img src="assets/media/avatars/300-6.jpg" alt=""/>
    </div>
    <div class="symbol symbol-circle symbol-50px">
        <img src="assets/media/avatars/300-1.jpg" alt=""/>
    </div>
    <div class="symbol symbol-circle symbol-50px">
        <img src="assets/media/avatars/300-2.jpg" alt=""/>
    </div>
    <div class="symbol symbol-circle symbol-50px">
        <img src="assets/media/avatars/300-5.jpg" alt=""/>
    </div>
    <div class="symbol symbol-circle symbol-50px">
        <img src="assets/media/avatars/300-20.jpg" alt=""/>
    </div>
    <div class="symbol symbol-circle symbol-50px">
        <img src="assets/media/avatars/300-23.jpg" alt=""/>
    </div>
</div>