Advanced Badges
Documentation and examples for badges, our small count and labeling component.
Polygon badges
Add any preset modifier classes to change the appearance of a badge.
<div class="badge-icon badge-icon-lg text-warning">
<div class="badge-icon-wrap">
<i class="ri-flashlight-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="polygon" viewBox="0 0 127 139.4"><g data-name="Polygon 7" transform="translate(119 5.675)rotate(90)" fill="currentColor"><path d="M87.3 115L40.7 115C37.3 115 34 114.1 31.2 112.5 28.3 110.8 25.9 108.4 24.2 105.5L0.9 65C-0.8 62.1-1.7 58.8-1.7 55.5 -1.7 52.2-0.8 48.9 0.9 46L24.2 5.5C25.9 2.6 28.3 0.2 31.2-1.5 34-3.1 37.3-4 40.7-4L87.3-4C90.7-4 94-3.1 96.8-1.5 99.7 0.2 102.1 2.6 103.8 5.5L127.1 46C128.8 48.9 129.7 52.2 129.7 55.5 129.7 58.8 128.8 62.1 127.1 65L103.8 105.5C102.1 108.4 99.7 110.8 96.8 112.5 94 114.1 90.7 115 87.3 115Z"/><path d="M40.7 0C35.3 0 30.3 2.9 27.7 7.5L4.3 48C1.6 52.6 1.6 58.4 4.3 63L27.7 103.5C30.3 108.1 35.3 111 40.7 111L87.3 111C92.7 111 97.7 108.1 100.3 103.5L123.7 63C126.4 58.4 126.4 52.6 123.7 48L100.3 7.5C97.7 2.9 92.7 0 87.3 0L40.7 0M40.7-8L87.3-8C95.5-8 103.2-3.6 107.3 3.5L130.6 44C134.7 51.1 134.7 59.9 130.6 67L107.3 107.5C103.2 114.6 95.5 119 87.3 119L40.7 119C32.5 119 24.8 114.6 20.7 107.5L-2.6 67C-6.7 59.9-6.7 51.1-2.6 44L20.7 3.5C24.8-3.6 32.5-8 40.7-8Z" fill="currentColor"/></g></svg>
</div>
<div class="badge-icon badge-icon-md text-light">
<div class="badge-icon-wrap">
<i class="ri-spy-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="polygon" viewBox="0 0 127 139.4"><g data-name="Polygon 7" transform="translate(119 5.675)rotate(90)" fill="currentColor"><path d="M87.3 115L40.7 115C37.3 115 34 114.1 31.2 112.5 28.3 110.8 25.9 108.4 24.2 105.5L0.9 65C-0.8 62.1-1.7 58.8-1.7 55.5 -1.7 52.2-0.8 48.9 0.9 46L24.2 5.5C25.9 2.6 28.3 0.2 31.2-1.5 34-3.1 37.3-4 40.7-4L87.3-4C90.7-4 94-3.1 96.8-1.5 99.7 0.2 102.1 2.6 103.8 5.5L127.1 46C128.8 48.9 129.7 52.2 129.7 55.5 129.7 58.8 128.8 62.1 127.1 65L103.8 105.5C102.1 108.4 99.7 110.8 96.8 112.5 94 114.1 90.7 115 87.3 115Z"/><path d="M40.7 0C35.3 0 30.3 2.9 27.7 7.5L4.3 48C1.6 52.6 1.6 58.4 4.3 63L27.7 103.5C30.3 108.1 35.3 111 40.7 111L87.3 111C92.7 111 97.7 108.1 100.3 103.5L123.7 63C126.4 58.4 126.4 52.6 123.7 48L100.3 7.5C97.7 2.9 92.7 0 87.3 0L40.7 0M40.7-8L87.3-8C95.5-8 103.2-3.6 107.3 3.5L130.6 44C134.7 51.1 134.7 59.9 130.6 67L107.3 107.5C103.2 114.6 95.5 119 87.3 119L40.7 119C32.5 119 24.8 114.6 20.7 107.5L-2.6 67C-6.7 59.9-6.7 51.1-2.6 44L20.7 3.5C24.8-3.6 32.5-8 40.7-8Z" fill="currentColor"/></g></svg>
</div>
<div class="badge-icon text-dark">
<div class="badge-icon-wrap">
<i class="ri-vip-crown-2-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="polygon" viewBox="0 0 127 139.4"><g data-name="Polygon 7" transform="translate(119 5.675)rotate(90)" fill="currentColor"><path d="M87.3 115L40.7 115C37.3 115 34 114.1 31.2 112.5 28.3 110.8 25.9 108.4 24.2 105.5L0.9 65C-0.8 62.1-1.7 58.8-1.7 55.5 -1.7 52.2-0.8 48.9 0.9 46L24.2 5.5C25.9 2.6 28.3 0.2 31.2-1.5 34-3.1 37.3-4 40.7-4L87.3-4C90.7-4 94-3.1 96.8-1.5 99.7 0.2 102.1 2.6 103.8 5.5L127.1 46C128.8 48.9 129.7 52.2 129.7 55.5 129.7 58.8 128.8 62.1 127.1 65L103.8 105.5C102.1 108.4 99.7 110.8 96.8 112.5 94 114.1 90.7 115 87.3 115Z"/><path d="M40.7 0C35.3 0 30.3 2.9 27.7 7.5L4.3 48C1.6 52.6 1.6 58.4 4.3 63L27.7 103.5C30.3 108.1 35.3 111 40.7 111L87.3 111C92.7 111 97.7 108.1 100.3 103.5L123.7 63C126.4 58.4 126.4 52.6 123.7 48L100.3 7.5C97.7 2.9 92.7 0 87.3 0L40.7 0M40.7-8L87.3-8C95.5-8 103.2-3.6 107.3 3.5L130.6 44C134.7 51.1 134.7 59.9 130.6 67L107.3 107.5C103.2 114.6 95.5 119 87.3 119L40.7 119C32.5 119 24.8 114.6 20.7 107.5L-2.6 67C-6.7 59.9-6.7 51.1-2.6 44L20.7 3.5C24.8-3.6 32.5-8 40.7-8Z" fill="currentColor"/></g></svg>
</div>
<div class="badge-icon badge-icon-sm text-blue">
<div class="badge-icon-wrap">
<i class="ri-vip-diamond-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="polygon" viewBox="0 0 127 139.4"><g data-name="Polygon 7" transform="translate(119 5.675)rotate(90)" fill="currentColor"><path d="M87.3 115L40.7 115C37.3 115 34 114.1 31.2 112.5 28.3 110.8 25.9 108.4 24.2 105.5L0.9 65C-0.8 62.1-1.7 58.8-1.7 55.5 -1.7 52.2-0.8 48.9 0.9 46L24.2 5.5C25.9 2.6 28.3 0.2 31.2-1.5 34-3.1 37.3-4 40.7-4L87.3-4C90.7-4 94-3.1 96.8-1.5 99.7 0.2 102.1 2.6 103.8 5.5L127.1 46C128.8 48.9 129.7 52.2 129.7 55.5 129.7 58.8 128.8 62.1 127.1 65L103.8 105.5C102.1 108.4 99.7 110.8 96.8 112.5 94 114.1 90.7 115 87.3 115Z"/><path d="M40.7 0C35.3 0 30.3 2.9 27.7 7.5L4.3 48C1.6 52.6 1.6 58.4 4.3 63L27.7 103.5C30.3 108.1 35.3 111 40.7 111L87.3 111C92.7 111 97.7 108.1 100.3 103.5L123.7 63C126.4 58.4 126.4 52.6 123.7 48L100.3 7.5C97.7 2.9 92.7 0 87.3 0L40.7 0M40.7-8L87.3-8C95.5-8 103.2-3.6 107.3 3.5L130.6 44C134.7 51.1 134.7 59.9 130.6 67L107.3 107.5C103.2 114.6 95.5 119 87.3 119L40.7 119C32.5 119 24.8 114.6 20.7 107.5L-2.6 67C-6.7 59.9-6.7 51.1-2.6 44L20.7 3.5C24.8-3.6 32.5-8 40.7-8Z" fill="currentColor"/></g></svg>
</div>
<div class="badge-icon badge-icon-xs text-pink">
<div class="badge-icon-wrap">
<i class="ri-rocket-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="polygon" viewBox="0 0 127 139.4"><g data-name="Polygon 7" transform="translate(119 5.675)rotate(90)" fill="currentColor"><path d="M87.3 115L40.7 115C37.3 115 34 114.1 31.2 112.5 28.3 110.8 25.9 108.4 24.2 105.5L0.9 65C-0.8 62.1-1.7 58.8-1.7 55.5 -1.7 52.2-0.8 48.9 0.9 46L24.2 5.5C25.9 2.6 28.3 0.2 31.2-1.5 34-3.1 37.3-4 40.7-4L87.3-4C90.7-4 94-3.1 96.8-1.5 99.7 0.2 102.1 2.6 103.8 5.5L127.1 46C128.8 48.9 129.7 52.2 129.7 55.5 129.7 58.8 128.8 62.1 127.1 65L103.8 105.5C102.1 108.4 99.7 110.8 96.8 112.5 94 114.1 90.7 115 87.3 115Z"/><path d="M40.7 0C35.3 0 30.3 2.9 27.7 7.5L4.3 48C1.6 52.6 1.6 58.4 4.3 63L27.7 103.5C30.3 108.1 35.3 111 40.7 111L87.3 111C92.7 111 97.7 108.1 100.3 103.5L123.7 63C126.4 58.4 126.4 52.6 123.7 48L100.3 7.5C97.7 2.9 92.7 0 87.3 0L40.7 0M40.7-8L87.3-8C95.5-8 103.2-3.6 107.3 3.5L130.6 44C134.7 51.1 134.7 59.9 130.6 67L107.3 107.5C103.2 114.6 95.5 119 87.3 119L40.7 119C32.5 119 24.8 114.6 20.7 107.5L-2.6 67C-6.7 59.9-6.7 51.1-2.6 44L20.7 3.5C24.8-3.6 32.5-8 40.7-8Z" fill="currentColor"/></g></svg>
</div>
<div class="badge-icon badge-icon-xxs text-teal">
<div class="badge-icon-wrap">
<i class="ri-rocket-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="polygon" viewBox="0 0 127 139.4"><g data-name="Polygon 7" transform="translate(119 5.675)rotate(90)" fill="currentColor"><path d="M87.3 115L40.7 115C37.3 115 34 114.1 31.2 112.5 28.3 110.8 25.9 108.4 24.2 105.5L0.9 65C-0.8 62.1-1.7 58.8-1.7 55.5 -1.7 52.2-0.8 48.9 0.9 46L24.2 5.5C25.9 2.6 28.3 0.2 31.2-1.5 34-3.1 37.3-4 40.7-4L87.3-4C90.7-4 94-3.1 96.8-1.5 99.7 0.2 102.1 2.6 103.8 5.5L127.1 46C128.8 48.9 129.7 52.2 129.7 55.5 129.7 58.8 128.8 62.1 127.1 65L103.8 105.5C102.1 108.4 99.7 110.8 96.8 112.5 94 114.1 90.7 115 87.3 115Z"/><path d="M40.7 0C35.3 0 30.3 2.9 27.7 7.5L4.3 48C1.6 52.6 1.6 58.4 4.3 63L27.7 103.5C30.3 108.1 35.3 111 40.7 111L87.3 111C92.7 111 97.7 108.1 100.3 103.5L123.7 63C126.4 58.4 126.4 52.6 123.7 48L100.3 7.5C97.7 2.9 92.7 0 87.3 0L40.7 0M40.7-8L87.3-8C95.5-8 103.2-3.6 107.3 3.5L130.6 44C134.7 51.1 134.7 59.9 130.6 67L107.3 107.5C103.2 114.6 95.5 119 87.3 119L40.7 119C32.5 119 24.8 114.6 20.7 107.5L-2.6 67C-6.7 59.9-6.7 51.1-2.6 44L20.7 3.5C24.8-3.6 32.5-8 40.7-8Z" fill="currentColor"/></g></svg>
</div>
| Class | Values |
|---|---|
class="badge-icon badge-icon-[value]" |
lg / md / sm / xs / xxs |
class="badge-icon text-[value]" |
primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke |
Circular badges
Add any preset modifier classes to change the appearance of a badge.
<div class="badge-icon badge-circle badge-icon-lg text-warning">
<div class="badge-icon-wrap">
<i class="ri-flashlight-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
<g data-name="Ellipse 302" transform="translate(8 8)" stroke-width="3" vector-effect="non-scaling-stroke">
<circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor"/>
<circle cx="55.5" cy="55.5" r="59.5" vector-effect="non-scaling-stroke" fill="currentColor"/>
</g>
</svg>
</div>
<div class="badge-icon badge-circle badge-icon-md text-light">
<div class="badge-icon-wrap">
<i class="ri-spy-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
<g data-name="Ellipse 302" transform="translate(8 8)" stroke-width="3" vector-effect="non-scaling-stroke">
<circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor"/>
<circle cx="55.5" cy="55.5" r="59.5" vector-effect="non-scaling-stroke" fill="currentColor"/>
</g>
</svg>
</div>
<div class="badge-icon badge-circle text-dark">
<div class="badge-icon-wrap">
<i class="ri-vip-crown-2-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
<g data-name="Ellipse 302" transform="translate(8 8)" stroke-width="3" vector-effect="non-scaling-stroke">
<circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor"/>
<circle cx="55.5" cy="55.5" r="59.5" vector-effect="non-scaling-stroke" fill="currentColor"/>
</g>
</svg>
</div>
<div class="badge-icon badge-circle badge-icon-sm text-blue">
<div class="badge-icon-wrap">
<i class="ri-vip-diamond-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
<g data-name="Ellipse 302" transform="translate(8 8)" stroke-width="3" vector-effect="non-scaling-stroke">
<circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor"/>
<circle cx="55.5" cy="55.5" r="59.5" vector-effect="non-scaling-stroke" fill="currentColor"/>
</g>
</svg>
</div>
<div class="badge-icon badge-circle badge-icon-xs text-pink">
<div class="badge-icon-wrap">
<i class="ri-rocket-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
<g data-name="Ellipse 302" transform="translate(8 8)" stroke-width="3" vector-effect="non-scaling-stroke">
<circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor"/>
<circle cx="55.5" cy="55.5" r="59.5" vector-effect="non-scaling-stroke" fill="currentColor"/>
</g>
</svg>
</div>
<div class="badge-icon badge-circle badge-icon-xxs text-teal">
<div class="badge-icon-wrap">
<i class="ri-rocket-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
<g data-name="Ellipse 302" transform="translate(8 8)" stroke-width="3" vector-effect="non-scaling-stroke">
<circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor"/>
<circle cx="55.5" cy="55.5" r="59.5" vector-effect="non-scaling-stroke" fill="currentColor"/>
</g>
</svg>
</div>
| Class | Values |
|---|---|
class="badge-icon badge-circle badge-icon-[value]" |
lg / md / sm / xs / xxs |
class="badge-icon badge-circle text-[value]" |
primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke |
Badges on badge
.position-bottom-end-overflow-1 .position-top-end-overflow-1
<div class="badge-icon text-pink position-relative">
<div class="badge-icon-wrap">
<i class="ri-fire-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141 154.246">
<g transform="translate(-79 -802.684)">
<path d="M105.432,0a30,30,0,0,1,25.949,14.945l23.5,40.5a30,30,0,0,1,0,30.11l-23.5,40.5A30,30,0,0,1,105.432,141H58.181a30,30,0,0,1-25.949-14.945l-23.5-40.5a30,30,0,0,1,0-30.11l23.5-40.5A30,30,0,0,1,58.181,0Z" transform="translate(79 961.613) rotate(-90)" fill="currentColor"/>
<path d="M87.334,0a15,15,0,0,1,12.995,7.508l23.351,40.5a15,15,0,0,1,0,14.985l-23.351,40.5A15,15,0,0,1,87.334,111H40.666a15,15,0,0,1-12.995-7.508L4.32,62.992a15,15,0,0,1,0-14.985l23.351-40.5A15,15,0,0,1,40.666,0Z" transform="translate(94 944) rotate(-90)" fill="currentColor"/>
</g>
</svg>
<div class="badge-icon badge-icon-xs text-yellow position-top-end-overflow-1">
<div class="badge-icon-wrap">
<i class="ri-vip-diamond-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="139" height="139" viewBox="0 0 139 139" fill="none">
<path d="M69.5 130C102.913 130 130 102.913 130 69.5C130 36.0868 102.913 9 69.5 9C36.0868 9 9 36.0868 9 69.5C9 102.913 36.0868 130 69.5 130Z" fill="black" stroke="white" stroke-width="10"/>
<path d="M69.5 134C105.122 134 134 105.122 134 69.5C134 33.8776 105.122 5 69.5 5C33.8776 5 5 33.8776 5 69.5C5 105.122 33.8776 134 69.5 134Z" fill="currentColor" stroke="white" stroke-width="10"/>
</svg>
</div>
</div>
<div class="badge-icon text-pink position-relative">
<div class="badge-icon-wrap">
<i class="ri-fire-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141 154.246">
<g transform="translate(-79 -802.684)">
<path d="M105.432,0a30,30,0,0,1,25.949,14.945l23.5,40.5a30,30,0,0,1,0,30.11l-23.5,40.5A30,30,0,0,1,105.432,141H58.181a30,30,0,0,1-25.949-14.945l-23.5-40.5a30,30,0,0,1,0-30.11l23.5-40.5A30,30,0,0,1,58.181,0Z" transform="translate(79 961.613) rotate(-90)" fill="currentColor"/>
<path d="M87.334,0a15,15,0,0,1,12.995,7.508l23.351,40.5a15,15,0,0,1,0,14.985l-23.351,40.5A15,15,0,0,1,87.334,111H40.666a15,15,0,0,1-12.995-7.508L4.32,62.992a15,15,0,0,1,0-14.985l23.351-40.5A15,15,0,0,1,40.666,0Z" transform="translate(94 944) rotate(-90)" fill="currentColor"/>
</g>
</svg>
<div class="badge-icon badge-icon-xs text-yellow position-bottom-end-overflow-1">
<div class="badge-icon-wrap">
<i class="ri-vip-diamond-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="139" height="139" viewBox="0 0 139 139" fill="none">
<path d="M69.5 130C102.913 130 130 102.913 130 69.5C130 36.0868 102.913 9 69.5 9C36.0868 9 9 36.0868 9 69.5C9 102.913 36.0868 130 69.5 130Z" fill="black" stroke="white" stroke-width="10"/>
<path d="M69.5 134C105.122 134 134 105.122 134 69.5C134 33.8776 105.122 5 69.5 5C33.8776 5 5 33.8776 5 69.5C5 105.122 33.8776 134 69.5 134Z" fill="currentColor" stroke="white" stroke-width="10"/>
</svg>
</div>
</div>
<div class="badge-icon text-pink position-relative">
<div class="badge-icon-wrap">
<i class="ri-fire-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
<g data-name="Ellipse 302" transform="translate(8 8)" stroke-width="3" vector-effect="non-scaling-stroke">
<circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor"/>
<circle cx="55.5" cy="55.5" r="59.5" vector-effect="non-scaling-stroke" fill="currentColor"/>
</g>
</svg>
<div class="badge-icon badge-icon-xs text-yellow position-top-end-overflow-1">
<div class="badge-icon-wrap">
<i class="ri-vip-diamond-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="139" height="139" viewBox="0 0 139 139" fill="none">
<path d="M69.5 130C102.913 130 130 102.913 130 69.5C130 36.0868 102.913 9 69.5 9C36.0868 9 9 36.0868 9 69.5C9 102.913 36.0868 130 69.5 130Z" fill="black" stroke="white" stroke-width="10"/>
<path d="M69.5 134C105.122 134 134 105.122 134 69.5C134 33.8776 105.122 5 69.5 5C33.8776 5 5 33.8776 5 69.5C5 105.122 33.8776 134 69.5 134Z" fill="currentColor" stroke="white" stroke-width="10"/>
</svg>
</div>
</div>
<div class="badge-icon text-pink position-relative">
<div class="badge-icon-wrap">
<i class="ri-fire-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
<g data-name="Ellipse 302" transform="translate(8 8)" stroke-width="3" vector-effect="non-scaling-stroke">
<circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor"/>
<circle cx="55.5" cy="55.5" r="59.5" vector-effect="non-scaling-stroke" fill="currentColor"/>
</g>
</svg>
<div class="badge-icon badge-icon-xs text-yellow position-bottom-end-overflow-1">
<div class="badge-icon-wrap">
<i class="ri-vip-diamond-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="139" height="139" viewBox="0 0 139 139" fill="none">
<path d="M69.5 130C102.913 130 130 102.913 130 69.5C130 36.0868 102.913 9 69.5 9C36.0868 9 9 36.0868 9 69.5C9 102.913 36.0868 130 69.5 130Z" fill="black" stroke="white" stroke-width="10"/>
<path d="M69.5 134C105.122 134 134 105.122 134 69.5C134 33.8776 105.122 5 69.5 5C33.8776 5 5 33.8776 5 69.5C5 105.122 33.8776 134 69.5 134Z" fill="currentColor" stroke="white" stroke-width="10"/>
</svg>
</div>
</div>
| Class | Values |
|---|---|
class="badge-icon badge-icon-xs position-[value]-overflow-1" |
top-end / bottom-end |
Badges level
Use .badge-level modifier class.
<div class="badge-icon badge-icon-lg text-yellow badge-level">
<div class="badge-icon-wrap">
<i class="ri-fire-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="polygon" viewBox="0 0 127 139.4"><g data-name="Polygon 7" transform="translate(119 5.675)rotate(90)" fill="currentColor"><path d="M87.3 115L40.7 115C37.3 115 34 114.1 31.2 112.5 28.3 110.8 25.9 108.4 24.2 105.5L0.9 65C-0.8 62.1-1.7 58.8-1.7 55.5 -1.7 52.2-0.8 48.9 0.9 46L24.2 5.5C25.9 2.6 28.3 0.2 31.2-1.5 34-3.1 37.3-4 40.7-4L87.3-4C90.7-4 94-3.1 96.8-1.5 99.7 0.2 102.1 2.6 103.8 5.5L127.1 46C128.8 48.9 129.7 52.2 129.7 55.5 129.7 58.8 128.8 62.1 127.1 65L103.8 105.5C102.1 108.4 99.7 110.8 96.8 112.5 94 114.1 90.7 115 87.3 115Z"/><path d="M40.7 0C35.3 0 30.3 2.9 27.7 7.5L4.3 48C1.6 52.6 1.6 58.4 4.3 63L27.7 103.5C30.3 108.1 35.3 111 40.7 111L87.3 111C92.7 111 97.7 108.1 100.3 103.5L123.7 63C126.4 58.4 126.4 52.6 123.7 48L100.3 7.5C97.7 2.9 92.7 0 87.3 0L40.7 0M40.7-8L87.3-8C95.5-8 103.2-3.6 107.3 3.5L130.6 44C134.7 51.1 134.7 59.9 130.6 67L107.3 107.5C103.2 114.6 95.5 119 87.3 119L40.7 119C32.5 119 24.8 114.6 20.7 107.5L-2.6 67C-6.7 59.9-6.7 51.1-2.6 44L20.7 3.5C24.8-3.6 32.5-8 40.7-8Z" fill="currentColor"/></g></svg>
<span title="1">1</span>
</div>
<div class="badge-icon badge-circle badge-icon-md text-yellow badge-level">
<div class="badge-icon-wrap">
<i class="ri-fire-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
<g data-name="Ellipse 302" transform="translate(8 8)" stroke-width="3" vector-effect="non-scaling-stroke">
<circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor"/>
<circle cx="55.5" cy="55.5" r="59.5" vector-effect="non-scaling-stroke" fill="currentColor"/>
</g>
</svg>
<span title="2">2</span>
</div>
<div class="badge-icon text-yellow badge-level">
<div class="badge-icon-wrap">
<i class="ri-fire-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="polygon" viewBox="0 0 127 139.4"><g data-name="Polygon 7" transform="translate(119 5.675)rotate(90)" fill="currentColor"><path d="M87.3 115L40.7 115C37.3 115 34 114.1 31.2 112.5 28.3 110.8 25.9 108.4 24.2 105.5L0.9 65C-0.8 62.1-1.7 58.8-1.7 55.5 -1.7 52.2-0.8 48.9 0.9 46L24.2 5.5C25.9 2.6 28.3 0.2 31.2-1.5 34-3.1 37.3-4 40.7-4L87.3-4C90.7-4 94-3.1 96.8-1.5 99.7 0.2 102.1 2.6 103.8 5.5L127.1 46C128.8 48.9 129.7 52.2 129.7 55.5 129.7 58.8 128.8 62.1 127.1 65L103.8 105.5C102.1 108.4 99.7 110.8 96.8 112.5 94 114.1 90.7 115 87.3 115Z"/><path d="M40.7 0C35.3 0 30.3 2.9 27.7 7.5L4.3 48C1.6 52.6 1.6 58.4 4.3 63L27.7 103.5C30.3 108.1 35.3 111 40.7 111L87.3 111C92.7 111 97.7 108.1 100.3 103.5L123.7 63C126.4 58.4 126.4 52.6 123.7 48L100.3 7.5C97.7 2.9 92.7 0 87.3 0L40.7 0M40.7-8L87.3-8C95.5-8 103.2-3.6 107.3 3.5L130.6 44C134.7 51.1 134.7 59.9 130.6 67L107.3 107.5C103.2 114.6 95.5 119 87.3 119L40.7 119C32.5 119 24.8 114.6 20.7 107.5L-2.6 67C-6.7 59.9-6.7 51.1-2.6 44L20.7 3.5C24.8-3.6 32.5-8 40.7-8Z" fill="currentColor"/></g></svg>
<span title="3">3</span>
</div>
<div class="badge-icon badge-circle badge-icon-sm text-yellow badge-level">
<div class="badge-icon-wrap">
<i class="ri-fire-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
<g data-name="Ellipse 302" transform="translate(8 8)" stroke-width="3" vector-effect="non-scaling-stroke">
<circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor"/>
<circle cx="55.5" cy="55.5" r="59.5" vector-effect="non-scaling-stroke" fill="currentColor"/>
</g>
</svg>
<span title="4">4</span>
</div>
<div class="badge-icon badge-icon-xs badge-level text-yellow">
<div class="badge-icon-wrap">
<i class="ri-fire-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="polygon" viewBox="0 0 127 139.4"><g data-name="Polygon 7" transform="translate(119 5.675)rotate(90)" fill="currentColor"><path d="M87.3 115L40.7 115C37.3 115 34 114.1 31.2 112.5 28.3 110.8 25.9 108.4 24.2 105.5L0.9 65C-0.8 62.1-1.7 58.8-1.7 55.5 -1.7 52.2-0.8 48.9 0.9 46L24.2 5.5C25.9 2.6 28.3 0.2 31.2-1.5 34-3.1 37.3-4 40.7-4L87.3-4C90.7-4 94-3.1 96.8-1.5 99.7 0.2 102.1 2.6 103.8 5.5L127.1 46C128.8 48.9 129.7 52.2 129.7 55.5 129.7 58.8 128.8 62.1 127.1 65L103.8 105.5C102.1 108.4 99.7 110.8 96.8 112.5 94 114.1 90.7 115 87.3 115Z"/><path d="M40.7 0C35.3 0 30.3 2.9 27.7 7.5L4.3 48C1.6 52.6 1.6 58.4 4.3 63L27.7 103.5C30.3 108.1 35.3 111 40.7 111L87.3 111C92.7 111 97.7 108.1 100.3 103.5L123.7 63C126.4 58.4 126.4 52.6 123.7 48L100.3 7.5C97.7 2.9 92.7 0 87.3 0L40.7 0M40.7-8L87.3-8C95.5-8 103.2-3.6 107.3 3.5L130.6 44C134.7 51.1 134.7 59.9 130.6 67L107.3 107.5C103.2 114.6 95.5 119 87.3 119L40.7 119C32.5 119 24.8 114.6 20.7 107.5L-2.6 67C-6.7 59.9-6.7 51.1-2.6 44L20.7 3.5C24.8-3.6 32.5-8 40.7-8Z" fill="currentColor"/></g></svg>
<span title="5">5</span>
</div>
<div class="badge-icon badge-circle badge-icon-xxs badge-level text-yellow">
<div class="badge-icon-wrap">
<i class="ri-fire-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127">
<g data-name="Ellipse 302" transform="translate(8 8)" stroke-width="3" vector-effect="non-scaling-stroke">
<circle cx="55.5" cy="55.5" r="55.5" stroke="currentColor"/>
<circle cx="55.5" cy="55.5" r="59.5" vector-effect="non-scaling-stroke" fill="currentColor"/>
</g>
</svg>
<span title="6">6</span>
</div>
Avatar Badges
Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.
PR
PR
<div class="avatar position-relative">
<img src="dist/img/avatar12.jpg" alt="user" class="avatar-img">
<div class="badge-icon badge-icon-xxs text-blue position-bottom-end-overflow">
<div class="badge-icon-wrap">
<i class="ri-flashlight-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="161" height="176" viewBox="0 0 161 176" fill="none">
<path d="M62.9358 10.7231L62.9356 10.7233L22.4358 34.2232C22.4358 34.2232 22.4357 34.2232 22.4356 34.2233C17.1324 37.3001 12.7305 41.7161 9.67057 47.0291C6.61059 52.3421 4.99999 58.3658 5 64.497L5 111.748C4.99999 117.879 6.61059 123.903 9.67057 129.216C12.7305 134.529 17.1324 138.945 22.4356 142.022C22.4357 142.022 22.4358 142.022 22.4358 142.022L62.9356 165.522L62.9358 165.522C68.2717 168.618 74.3311 170.248 80.5 170.248C86.6689 170.248 92.7283 168.618 98.0642 165.522L98.0644 165.522L138.564 142.022C138.564 142.022 138.564 142.022 138.564 142.022C143.868 138.945 148.27 134.529 151.329 129.216C154.389 123.903 156 117.879 156 111.748V64.497C156 58.3658 154.389 52.3421 151.329 47.0291C148.27 41.7161 143.868 37.3001 138.564 34.2233C138.564 34.2232 138.564 34.2232 138.564 34.2232L98.0644 10.7233L98.0642 10.7231C92.7283 7.62738 86.6689 5.9969 80.5 5.9969C74.3311 5.9969 68.2717 7.62738 62.9358 10.7231Z" fill="currentColor" stroke="white" stroke-width="10"></path>
</svg>
</div>
</div>
<div class="avatar position-relative">
<img src="dist/img/avatar12.jpg" alt="user" class="avatar-img">
<div class="badge-icon badge-icon-xxs text-blue position-top-end-overflow">
<div class="badge-icon-wrap">
<i class="ri-flashlight-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="161" height="176" viewBox="0 0 161 176" fill="none">
<path d="M62.9358 10.7231L62.9356 10.7233L22.4358 34.2232C22.4358 34.2232 22.4357 34.2232 22.4356 34.2233C17.1324 37.3001 12.7305 41.7161 9.67057 47.0291C6.61059 52.3421 4.99999 58.3658 5 64.497L5 111.748C4.99999 117.879 6.61059 123.903 9.67057 129.216C12.7305 134.529 17.1324 138.945 22.4356 142.022C22.4357 142.022 22.4358 142.022 22.4358 142.022L62.9356 165.522L62.9358 165.522C68.2717 168.618 74.3311 170.248 80.5 170.248C86.6689 170.248 92.7283 168.618 98.0642 165.522L98.0644 165.522L138.564 142.022C138.564 142.022 138.564 142.022 138.564 142.022C143.868 138.945 148.27 134.529 151.329 129.216C154.389 123.903 156 117.879 156 111.748V64.497C156 58.3658 154.389 52.3421 151.329 47.0291C148.27 41.7161 143.868 37.3001 138.564 34.2233C138.564 34.2232 138.564 34.2232 138.564 34.2232L98.0644 10.7233L98.0642 10.7231C92.7283 7.62738 86.6689 5.9969 80.5 5.9969C74.3311 5.9969 68.2717 7.62738 62.9358 10.7231Z" fill="currentColor" stroke="white" stroke-width="10"></path>
</svg>
</div>
</div>
<div class="avatar position-relative avatar-rounded">
<img src="dist/img/avatar12.jpg" alt="user" class="avatar-img">
<div class="badge-icon badge-icon-xxs text-blue position-bottom-end-overflow-1">
<div class="badge-icon-wrap">
<i class="ri-flashlight-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="161" height="176" viewBox="0 0 161 176" fill="none">
<path d="M62.9358 10.7231L62.9356 10.7233L22.4358 34.2232C22.4358 34.2232 22.4357 34.2232 22.4356 34.2233C17.1324 37.3001 12.7305 41.7161 9.67057 47.0291C6.61059 52.3421 4.99999 58.3658 5 64.497L5 111.748C4.99999 117.879 6.61059 123.903 9.67057 129.216C12.7305 134.529 17.1324 138.945 22.4356 142.022C22.4357 142.022 22.4358 142.022 22.4358 142.022L62.9356 165.522L62.9358 165.522C68.2717 168.618 74.3311 170.248 80.5 170.248C86.6689 170.248 92.7283 168.618 98.0642 165.522L98.0644 165.522L138.564 142.022C138.564 142.022 138.564 142.022 138.564 142.022C143.868 138.945 148.27 134.529 151.329 129.216C154.389 123.903 156 117.879 156 111.748V64.497C156 58.3658 154.389 52.3421 151.329 47.0291C148.27 41.7161 143.868 37.3001 138.564 34.2233C138.564 34.2232 138.564 34.2232 138.564 34.2232L98.0644 10.7233L98.0642 10.7231C92.7283 7.62738 86.6689 5.9969 80.5 5.9969C74.3311 5.9969 68.2717 7.62738 62.9358 10.7231Z" fill="currentColor" stroke="white" stroke-width="10"></path>
</svg>
</div>
</div>
<div class="avatar position-relative avatar-rounded">
<img src="dist/img/avatar12.jpg" alt="user" class="avatar-img">
<div class="badge-icon badge-icon-xxs text-blue position-top-end-overflow-1">
<div class="badge-icon-wrap">
<i class="ri-flashlight-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="161" height="176" viewBox="0 0 161 176" fill="none">
<path d="M62.9358 10.7231L62.9356 10.7233L22.4358 34.2232C22.4358 34.2232 22.4357 34.2232 22.4356 34.2233C17.1324 37.3001 12.7305 41.7161 9.67057 47.0291C6.61059 52.3421 4.99999 58.3658 5 64.497L5 111.748C4.99999 117.879 6.61059 123.903 9.67057 129.216C12.7305 134.529 17.1324 138.945 22.4356 142.022C22.4357 142.022 22.4358 142.022 22.4358 142.022L62.9356 165.522L62.9358 165.522C68.2717 168.618 74.3311 170.248 80.5 170.248C86.6689 170.248 92.7283 168.618 98.0642 165.522L98.0644 165.522L138.564 142.022C138.564 142.022 138.564 142.022 138.564 142.022C143.868 138.945 148.27 134.529 151.329 129.216C154.389 123.903 156 117.879 156 111.748V64.497C156 58.3658 154.389 52.3421 151.329 47.0291C148.27 41.7161 143.868 37.3001 138.564 34.2233C138.564 34.2232 138.564 34.2232 138.564 34.2232L98.0644 10.7233L98.0642 10.7231C92.7283 7.62738 86.6689 5.9969 80.5 5.9969C74.3311 5.9969 68.2717 7.62738 62.9358 10.7231Z" fill="currentColor" stroke="white" stroke-width="10"></path>
</svg>
</div>
</div>
<div class="avatar avatar-soft-primary position-relative avatar-rounded">
<span class="initial-wrap">PR</span>
<div class="badge-icon badge-icon-xxs text-blue position-bottom-end-overflow-1">
<div class="badge-icon-wrap">
<i class="ri-flashlight-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="161" height="176" viewBox="0 0 161 176" fill="none">
<path d="M62.9358 10.7231L62.9356 10.7233L22.4358 34.2232C22.4358 34.2232 22.4357 34.2232 22.4356 34.2233C17.1324 37.3001 12.7305 41.7161 9.67057 47.0291C6.61059 52.3421 4.99999 58.3658 5 64.497L5 111.748C4.99999 117.879 6.61059 123.903 9.67057 129.216C12.7305 134.529 17.1324 138.945 22.4356 142.022C22.4357 142.022 22.4358 142.022 22.4358 142.022L62.9356 165.522L62.9358 165.522C68.2717 168.618 74.3311 170.248 80.5 170.248C86.6689 170.248 92.7283 168.618 98.0642 165.522L98.0644 165.522L138.564 142.022C138.564 142.022 138.564 142.022 138.564 142.022C143.868 138.945 148.27 134.529 151.329 129.216C154.389 123.903 156 117.879 156 111.748V64.497C156 58.3658 154.389 52.3421 151.329 47.0291C148.27 41.7161 143.868 37.3001 138.564 34.2233C138.564 34.2232 138.564 34.2232 138.564 34.2232L98.0644 10.7233L98.0642 10.7231C92.7283 7.62738 86.6689 5.9969 80.5 5.9969C74.3311 5.9969 68.2717 7.62738 62.9358 10.7231Z" fill="currentColor" stroke="white" stroke-width="10"></path>
</svg>
</div>
</div>
<div class="avatar avatar-soft-primary position-relative avatar-rounded">
<span class="initial-wrap">PR</span>
<div class="badge-icon badge-icon-xxs text-blue position-top-end-overflow-1">
<div class="badge-icon-wrap">
<i class="ri-flashlight-fill"></i>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="161" height="176" viewBox="0 0 161 176" fill="none">
<path d="M62.9358 10.7231L62.9356 10.7233L22.4358 34.2232C22.4358 34.2232 22.4357 34.2232 22.4356 34.2233C17.1324 37.3001 12.7305 41.7161 9.67057 47.0291C6.61059 52.3421 4.99999 58.3658 5 64.497L5 111.748C4.99999 117.879 6.61059 123.903 9.67057 129.216C12.7305 134.529 17.1324 138.945 22.4356 142.022C22.4357 142.022 22.4358 142.022 22.4358 142.022L62.9356 165.522L62.9358 165.522C68.2717 168.618 74.3311 170.248 80.5 170.248C86.6689 170.248 92.7283 168.618 98.0642 165.522L98.0644 165.522L138.564 142.022C138.564 142.022 138.564 142.022 138.564 142.022C143.868 138.945 148.27 134.529 151.329 129.216C154.389 123.903 156 117.879 156 111.748V64.497C156 58.3658 154.389 52.3421 151.329 47.0291C148.27 41.7161 143.868 37.3001 138.564 34.2233C138.564 34.2232 138.564 34.2232 138.564 34.2232L98.0644 10.7233L98.0642 10.7231C92.7283 7.62738 86.6689 5.9969 80.5 5.9969C74.3311 5.9969 68.2717 7.62738 62.9358 10.7231Z" fill="currentColor" stroke="white" stroke-width="10"></path>
</svg>
</div>
</div>