Badge

Ícone carrinho sem borda

Preview

HTML

   <div class="cart">
      <input type="checkbox">
      <figure class="cart__element">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path
               d="M3.99999 6.41439L0.756989 3.17239L2.17199 1.75739L5.41399 5.00039H20.656C20.8119 5.00037 20.9656 5.0368 21.1049 5.10675C21.2441 5.17671 21.3652 5.27825 21.4582 5.40328C21.5513 5.52831 21.6138 5.67337 21.6409 5.82687C21.6679 5.98038 21.6587 6.13808 21.614 6.28739L19.214 14.2874C19.1522 14.4935 19.0257 14.6741 18.8531 14.8026C18.6805 14.931 18.4711 15.0004 18.256 15.0004H5.99999V17.0004H17V19.0004H4.99999C4.73477 19.0004 4.48042 18.895 4.29288 18.7075C4.10535 18.52 3.99999 18.2656 3.99999 18.0004V6.41439ZM5.99999 7.00039V13.0004H17.512L19.312 7.00039H5.99999ZM5.49999 23.0004C5.10216 23.0004 4.72063 22.8424 4.43933 22.561C4.15802 22.2797 3.99999 21.8982 3.99999 21.5004C3.99999 21.1026 4.15802 20.721 4.43933 20.4397C4.72063 20.1584 5.10216 20.0004 5.49999 20.0004C5.89781 20.0004 6.27934 20.1584 6.56065 20.4397C6.84195 20.721 6.99999 21.1026 6.99999 21.5004C6.99999 21.8982 6.84195 22.2797 6.56065 22.561C6.27934 22.8424 5.89781 23.0004 5.49999 23.0004ZM17.5 23.0004C17.1022 23.0004 16.7206 22.8424 16.4393 22.561C16.158 22.2797 16 21.8982 16 21.5004C16 21.1026 16.158 20.721 16.4393 20.4397C16.7206 20.1584 17.1022 20.0004 17.5 20.0004C17.8978 20.0004 18.2793 20.1584 18.5606 20.4397C18.842 20.721 19 21.1026 19 21.5004C19 21.8982 18.842 22.2797 18.5606 22.561C18.2793 22.8424 17.8978 23.0004 17.5 23.0004Z"
               fill="#000" />
         </svg>
      </figure>
   </div>

CSS

.cart {
   position: relative;
}

.cart .cart__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid transparent;
}

.cart .cart__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.cart input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.cart input[type="checkbox"]:hover~.cart__element {
   border: 1px solid #E3E3E3;
}

.cart input:checked[type="checkbox"]~.cart__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

Ícone carrinho sem borda e com dot de notificação

Preview

HTML

<div class="cart">
   <input type="checkbox">
   <figure class="cart__element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M3.99999 6.41439L0.756989 3.17239L2.17199 1.75739L5.41399 5.00039H20.656C20.8119 5.00037 20.9656 5.0368 21.1049 5.10675C21.2441 5.17671 21.3652 5.27825 21.4582 5.40328C21.5513 5.52831 21.6138 5.67337 21.6409 5.82687C21.6679 5.98038 21.6587 6.13808 21.614 6.28739L19.214 14.2874C19.1522 14.4935 19.0257 14.6741 18.8531 14.8026C18.6805 14.931 18.4711 15.0004 18.256 15.0004H5.99999V17.0004H17V19.0004H4.99999C4.73477 19.0004 4.48042 18.895 4.29288 18.7075C4.10535 18.52 3.99999 18.2656 3.99999 18.0004V6.41439ZM5.99999 7.00039V13.0004H17.512L19.312 7.00039H5.99999ZM5.49999 23.0004C5.10216 23.0004 4.72063 22.8424 4.43933 22.561C4.15802 22.2797 3.99999 21.8982 3.99999 21.5004C3.99999 21.1026 4.15802 20.721 4.43933 20.4397C4.72063 20.1584 5.10216 20.0004 5.49999 20.0004C5.89781 20.0004 6.27934 20.1584 6.56065 20.4397C6.84195 20.721 6.99999 21.1026 6.99999 21.5004C6.99999 21.8982 6.84195 22.2797 6.56065 22.561C6.27934 22.8424 5.89781 23.0004 5.49999 23.0004ZM17.5 23.0004C17.1022 23.0004 16.7206 22.8424 16.4393 22.561C16.158 22.2797 16 21.8982 16 21.5004C16 21.1026 16.158 20.721 16.4393 20.4397C16.7206 20.1584 17.1022 20.0004 17.5 20.0004C17.8978 20.0004 18.2793 20.1584 18.5606 20.4397C18.842 20.721 19 21.1026 19 21.5004C19 21.8982 18.842 22.2797 18.5606 22.561C18.2793 22.8424 17.8978 23.0004 17.5 23.0004Z"
            fill="#000" />
      </svg>
   </figure>
   <span class="cart__dot"></span>
</div>

CSS

.cart {
   position: relative;
}

.cart .cart__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid transparent;
}

.cart .cart__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.cart input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.cart input[type="checkbox"]:hover~.cart__element {
   border: 1px solid #E3E3E3;
}

.cart input:checked[type="checkbox"]~.cart__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

.cart .cart__dot {
   display: block;
   text-align: center;
   position: absolute;
   width: 16px;
   height: 16px;
   border-radius: 99px;
   border: 2px solid #FFF;
   background: #FF3939;
   top: 6px;
   right: 6px;
   color: #FFF;
   cursor: pointer;
}

Ícone carrinho sem borda e com badge superior esquerdo

Preview

HTML

<div class="cart">
   <input type="checkbox">
   <figure class="cart__element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M3.99999 6.41439L0.756989 3.17239L2.17199 1.75739L5.41399 5.00039H20.656C20.8119 5.00037 20.9656 5.0368 21.1049 5.10675C21.2441 5.17671 21.3652 5.27825 21.4582 5.40328C21.5513 5.52831 21.6138 5.67337 21.6409 5.82687C21.6679 5.98038 21.6587 6.13808 21.614 6.28739L19.214 14.2874C19.1522 14.4935 19.0257 14.6741 18.8531 14.8026C18.6805 14.931 18.4711 15.0004 18.256 15.0004H5.99999V17.0004H17V19.0004H4.99999C4.73477 19.0004 4.48042 18.895 4.29288 18.7075C4.10535 18.52 3.99999 18.2656 3.99999 18.0004V6.41439ZM5.99999 7.00039V13.0004H17.512L19.312 7.00039H5.99999ZM5.49999 23.0004C5.10216 23.0004 4.72063 22.8424 4.43933 22.561C4.15802 22.2797 3.99999 21.8982 3.99999 21.5004C3.99999 21.1026 4.15802 20.721 4.43933 20.4397C4.72063 20.1584 5.10216 20.0004 5.49999 20.0004C5.89781 20.0004 6.27934 20.1584 6.56065 20.4397C6.84195 20.721 6.99999 21.1026 6.99999 21.5004C6.99999 21.8982 6.84195 22.2797 6.56065 22.561C6.27934 22.8424 5.89781 23.0004 5.49999 23.0004ZM17.5 23.0004C17.1022 23.0004 16.7206 22.8424 16.4393 22.561C16.158 22.2797 16 21.8982 16 21.5004C16 21.1026 16.158 20.721 16.4393 20.4397C16.7206 20.1584 17.1022 20.0004 17.5 20.0004C17.8978 20.0004 18.2793 20.1584 18.5606 20.4397C18.842 20.721 19 21.1026 19 21.5004C19 21.8982 18.842 22.2797 18.5606 22.561C18.2793 22.8424 17.8978 23.0004 17.5 23.0004Z"
            fill="#000" />
      </svg>
   </figure>
   <span class="cart__badge">99+</span>
</div>

CSS

.cart {
   position: relative;
}

.cart .cart__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid transparent;
}

.cart .cart__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.cart input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.cart input[type="checkbox"]:hover~.cart__element {
   border: 1px solid #E3E3E3;
}

.cart input:checked[type="checkbox"]~.cart__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

.cart .cart__badge {
   display: block;
   text-align: center;
   position: absolute;
   min-width: 18px;
   min-height: 18px;
   border-radius: 100px;
   border: 2px solid #FFF;
   background: #FF3939;
   top: -8px;
   left: -8px;
   color: #FFF;
   font-family: inherit;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: 16.8px;
   padding: 2px 8px;
}

Ícone carrinho sem borda e com badge superior direito

Preview

HTML

<div class="cart">
   <input type="checkbox">
   <figure class="cart__element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M3.99999 6.41439L0.756989 3.17239L2.17199 1.75739L5.41399 5.00039H20.656C20.8119 5.00037 20.9656 5.0368 21.1049 5.10675C21.2441 5.17671 21.3652 5.27825 21.4582 5.40328C21.5513 5.52831 21.6138 5.67337 21.6409 5.82687C21.6679 5.98038 21.6587 6.13808 21.614 6.28739L19.214 14.2874C19.1522 14.4935 19.0257 14.6741 18.8531 14.8026C18.6805 14.931 18.4711 15.0004 18.256 15.0004H5.99999V17.0004H17V19.0004H4.99999C4.73477 19.0004 4.48042 18.895 4.29288 18.7075C4.10535 18.52 3.99999 18.2656 3.99999 18.0004V6.41439ZM5.99999 7.00039V13.0004H17.512L19.312 7.00039H5.99999ZM5.49999 23.0004C5.10216 23.0004 4.72063 22.8424 4.43933 22.561C4.15802 22.2797 3.99999 21.8982 3.99999 21.5004C3.99999 21.1026 4.15802 20.721 4.43933 20.4397C4.72063 20.1584 5.10216 20.0004 5.49999 20.0004C5.89781 20.0004 6.27934 20.1584 6.56065 20.4397C6.84195 20.721 6.99999 21.1026 6.99999 21.5004C6.99999 21.8982 6.84195 22.2797 6.56065 22.561C6.27934 22.8424 5.89781 23.0004 5.49999 23.0004ZM17.5 23.0004C17.1022 23.0004 16.7206 22.8424 16.4393 22.561C16.158 22.2797 16 21.8982 16 21.5004C16 21.1026 16.158 20.721 16.4393 20.4397C16.7206 20.1584 17.1022 20.0004 17.5 20.0004C17.8978 20.0004 18.2793 20.1584 18.5606 20.4397C18.842 20.721 19 21.1026 19 21.5004C19 21.8982 18.842 22.2797 18.5606 22.561C18.2793 22.8424 17.8978 23.0004 17.5 23.0004Z"
            fill="#000" />
      </svg>
   </figure>
   <span class="cart__badge">99+</span>
</div>

CSS

.cart {
   position: relative;
}

.cart .cart__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid transparent;
}

.cart .cart__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.cart input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.cart input[type="checkbox"]:hover~.cart__element {
   border: 1px solid #E3E3E3;
}

.cart input:checked[type="checkbox"]~.cart__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

.cart .cart__badge {
   display: block;
   text-align: center;
   position: absolute;
   min-width: 18px;
   min-height: 18px;
   border-radius: 100px;
   border: 2px solid #FFF;
   background: #FF3939;
   top: -8px;
   right: -11px;
   color: #FFF;
   font-family: inherit;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: 16.8px;
   padding: 2px 8px;
}

Ícone carrinho sem borda e com badge inferior esquerdo

Preview

HTML

<div class="cart">
   <input type="checkbox">
   <figure class="cart__element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M3.99999 6.41439L0.756989 3.17239L2.17199 1.75739L5.41399 5.00039H20.656C20.8119 5.00037 20.9656 5.0368 21.1049 5.10675C21.2441 5.17671 21.3652 5.27825 21.4582 5.40328C21.5513 5.52831 21.6138 5.67337 21.6409 5.82687C21.6679 5.98038 21.6587 6.13808 21.614 6.28739L19.214 14.2874C19.1522 14.4935 19.0257 14.6741 18.8531 14.8026C18.6805 14.931 18.4711 15.0004 18.256 15.0004H5.99999V17.0004H17V19.0004H4.99999C4.73477 19.0004 4.48042 18.895 4.29288 18.7075C4.10535 18.52 3.99999 18.2656 3.99999 18.0004V6.41439ZM5.99999 7.00039V13.0004H17.512L19.312 7.00039H5.99999ZM5.49999 23.0004C5.10216 23.0004 4.72063 22.8424 4.43933 22.561C4.15802 22.2797 3.99999 21.8982 3.99999 21.5004C3.99999 21.1026 4.15802 20.721 4.43933 20.4397C4.72063 20.1584 5.10216 20.0004 5.49999 20.0004C5.89781 20.0004 6.27934 20.1584 6.56065 20.4397C6.84195 20.721 6.99999 21.1026 6.99999 21.5004C6.99999 21.8982 6.84195 22.2797 6.56065 22.561C6.27934 22.8424 5.89781 23.0004 5.49999 23.0004ZM17.5 23.0004C17.1022 23.0004 16.7206 22.8424 16.4393 22.561C16.158 22.2797 16 21.8982 16 21.5004C16 21.1026 16.158 20.721 16.4393 20.4397C16.7206 20.1584 17.1022 20.0004 17.5 20.0004C17.8978 20.0004 18.2793 20.1584 18.5606 20.4397C18.842 20.721 19 21.1026 19 21.5004C19 21.8982 18.842 22.2797 18.5606 22.561C18.2793 22.8424 17.8978 23.0004 17.5 23.0004Z"
            fill="#000" />
      </svg>
   </figure>
   <span class="cart__badge">99+</span>
</div>

CSS

.cart {
   position: relative;
}

.cart .cart__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid transparent;
}

.cart .cart__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.cart input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.cart input[type="checkbox"]:hover~.cart__element {
   border: 1px solid #E3E3E3;
}

.cart input:checked[type="checkbox"]~.cart__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

.cart .cart__badge {
   display: block;
   text-align: center;
   position: absolute;
   min-width: 18px;
   min-height: 18px;
   border-radius: 100px;
   border: 2px solid #FFF;
   background: #FF3939;
   bottom: -9px;
   left: -12px;
   color: #FFF;
   font-family: inherit;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: 16.8px;
   padding: 2px 8px;
}

Ícone carrinho sem borda e com badge inferior direito

Preview

HTML

<div class="cart">
   <input type="checkbox">
   <figure class="cart__element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M3.99999 6.41439L0.756989 3.17239L2.17199 1.75739L5.41399 5.00039H20.656C20.8119 5.00037 20.9656 5.0368 21.1049 5.10675C21.2441 5.17671 21.3652 5.27825 21.4582 5.40328C21.5513 5.52831 21.6138 5.67337 21.6409 5.82687C21.6679 5.98038 21.6587 6.13808 21.614 6.28739L19.214 14.2874C19.1522 14.4935 19.0257 14.6741 18.8531 14.8026C18.6805 14.931 18.4711 15.0004 18.256 15.0004H5.99999V17.0004H17V19.0004H4.99999C4.73477 19.0004 4.48042 18.895 4.29288 18.7075C4.10535 18.52 3.99999 18.2656 3.99999 18.0004V6.41439ZM5.99999 7.00039V13.0004H17.512L19.312 7.00039H5.99999ZM5.49999 23.0004C5.10216 23.0004 4.72063 22.8424 4.43933 22.561C4.15802 22.2797 3.99999 21.8982 3.99999 21.5004C3.99999 21.1026 4.15802 20.721 4.43933 20.4397C4.72063 20.1584 5.10216 20.0004 5.49999 20.0004C5.89781 20.0004 6.27934 20.1584 6.56065 20.4397C6.84195 20.721 6.99999 21.1026 6.99999 21.5004C6.99999 21.8982 6.84195 22.2797 6.56065 22.561C6.27934 22.8424 5.89781 23.0004 5.49999 23.0004ZM17.5 23.0004C17.1022 23.0004 16.7206 22.8424 16.4393 22.561C16.158 22.2797 16 21.8982 16 21.5004C16 21.1026 16.158 20.721 16.4393 20.4397C16.7206 20.1584 17.1022 20.0004 17.5 20.0004C17.8978 20.0004 18.2793 20.1584 18.5606 20.4397C18.842 20.721 19 21.1026 19 21.5004C19 21.8982 18.842 22.2797 18.5606 22.561C18.2793 22.8424 17.8978 23.0004 17.5 23.0004Z"
            fill="#000" />
      </svg>
   </figure>
   <span class="cart__badge">99+</span>
</div>

CSS

.cart {
   position: relative;
}

.cart .cart__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid transparent;
}

.cart .cart__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.cart input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.cart input[type="checkbox"]:hover~.cart__element {
   border: 1px solid #E3E3E3;
}

.cart input:checked[type="checkbox"]~.cart__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

.cart .cart__badge {
   display: block;
   text-align: center;
   position: absolute;
   min-width: 18px;
   min-height: 18px;
   border-radius: 100px;
   border: 2px solid #FFF;
   background: #FF3939;
   bottom: -8px;
   left: 15px;
   color: #FFF;
   font-family: inherit;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: 16.8px;
   padding: 2px 8px;
}

Ícone carrinho com borda

Preview

HTML

   <div class="cart">
      <input type="checkbox">
      <figure class="cart__element">
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
            <path
               d="M3.99999 6.41439L0.756989 3.17239L2.17199 1.75739L5.41399 5.00039H20.656C20.8119 5.00037 20.9656 5.0368 21.1049 5.10675C21.2441 5.17671 21.3652 5.27825 21.4582 5.40328C21.5513 5.52831 21.6138 5.67337 21.6409 5.82687C21.6679 5.98038 21.6587 6.13808 21.614 6.28739L19.214 14.2874C19.1522 14.4935 19.0257 14.6741 18.8531 14.8026C18.6805 14.931 18.4711 15.0004 18.256 15.0004H5.99999V17.0004H17V19.0004H4.99999C4.73477 19.0004 4.48042 18.895 4.29288 18.7075C4.10535 18.52 3.99999 18.2656 3.99999 18.0004V6.41439ZM5.99999 7.00039V13.0004H17.512L19.312 7.00039H5.99999ZM5.49999 23.0004C5.10216 23.0004 4.72063 22.8424 4.43933 22.561C4.15802 22.2797 3.99999 21.8982 3.99999 21.5004C3.99999 21.1026 4.15802 20.721 4.43933 20.4397C4.72063 20.1584 5.10216 20.0004 5.49999 20.0004C5.89781 20.0004 6.27934 20.1584 6.56065 20.4397C6.84195 20.721 6.99999 21.1026 6.99999 21.5004C6.99999 21.8982 6.84195 22.2797 6.56065 22.561C6.27934 22.8424 5.89781 23.0004 5.49999 23.0004ZM17.5 23.0004C17.1022 23.0004 16.7206 22.8424 16.4393 22.561C16.158 22.2797 16 21.8982 16 21.5004C16 21.1026 16.158 20.721 16.4393 20.4397C16.7206 20.1584 17.1022 20.0004 17.5 20.0004C17.8978 20.0004 18.2793 20.1584 18.5606 20.4397C18.842 20.721 19 21.1026 19 21.5004C19 21.8982 18.842 22.2797 18.5606 22.561C18.2793 22.8424 17.8978 23.0004 17.5 23.0004Z"
               fill="#000" />
         </svg>
      </figure>
   </div>

CSS

.cart {
   position: relative;
}

.cart .cart__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid #E6E6E6;
}

.cart .cart__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.cart input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.cart input[type="checkbox"]:hover~.cart__element {
   border: 1px solid #A7A7A7;
}

.cart input:checked[type="checkbox"]~.cart__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

Ícone carrinho com borda e com dot de notificação

Preview

HTML

<div class="cart">
   <input type="checkbox">
   <figure class="cart__element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M3.99999 6.41439L0.756989 3.17239L2.17199 1.75739L5.41399 5.00039H20.656C20.8119 5.00037 20.9656 5.0368 21.1049 5.10675C21.2441 5.17671 21.3652 5.27825 21.4582 5.40328C21.5513 5.52831 21.6138 5.67337 21.6409 5.82687C21.6679 5.98038 21.6587 6.13808 21.614 6.28739L19.214 14.2874C19.1522 14.4935 19.0257 14.6741 18.8531 14.8026C18.6805 14.931 18.4711 15.0004 18.256 15.0004H5.99999V17.0004H17V19.0004H4.99999C4.73477 19.0004 4.48042 18.895 4.29288 18.7075C4.10535 18.52 3.99999 18.2656 3.99999 18.0004V6.41439ZM5.99999 7.00039V13.0004H17.512L19.312 7.00039H5.99999ZM5.49999 23.0004C5.10216 23.0004 4.72063 22.8424 4.43933 22.561C4.15802 22.2797 3.99999 21.8982 3.99999 21.5004C3.99999 21.1026 4.15802 20.721 4.43933 20.4397C4.72063 20.1584 5.10216 20.0004 5.49999 20.0004C5.89781 20.0004 6.27934 20.1584 6.56065 20.4397C6.84195 20.721 6.99999 21.1026 6.99999 21.5004C6.99999 21.8982 6.84195 22.2797 6.56065 22.561C6.27934 22.8424 5.89781 23.0004 5.49999 23.0004ZM17.5 23.0004C17.1022 23.0004 16.7206 22.8424 16.4393 22.561C16.158 22.2797 16 21.8982 16 21.5004C16 21.1026 16.158 20.721 16.4393 20.4397C16.7206 20.1584 17.1022 20.0004 17.5 20.0004C17.8978 20.0004 18.2793 20.1584 18.5606 20.4397C18.842 20.721 19 21.1026 19 21.5004C19 21.8982 18.842 22.2797 18.5606 22.561C18.2793 22.8424 17.8978 23.0004 17.5 23.0004Z"
            fill="#000" />
      </svg>
   </figure>
   <span class="cart__dot"></span>
</div>

CSS

.cart {
   position: relative;
}

.cart .cart__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid #E6E6E6;
}

.cart .cart__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.cart input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.cart input[type="checkbox"]:hover~.cart__element {
   border: 1px solid #A7A7A7;
}

.cart input:checked[type="checkbox"]~.cart__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

.cart .cart__dot {
   display: block;
   text-align: center;
   position: absolute;
   width: 16px;
   height: 16px;
   border-radius: 99px;
   border: 2px solid #FFF;
   background: #FF3939;
   top: -6px;
   right: -6px;
   color: #FFF;
   cursor: pointer;
}

Ícone carrinho com borda e com badge superior esquerdo

Preview

HTML

<div class="cart">
   <input type="checkbox">
   <figure class="cart__element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M3.99999 6.41439L0.756989 3.17239L2.17199 1.75739L5.41399 5.00039H20.656C20.8119 5.00037 20.9656 5.0368 21.1049 5.10675C21.2441 5.17671 21.3652 5.27825 21.4582 5.40328C21.5513 5.52831 21.6138 5.67337 21.6409 5.82687C21.6679 5.98038 21.6587 6.13808 21.614 6.28739L19.214 14.2874C19.1522 14.4935 19.0257 14.6741 18.8531 14.8026C18.6805 14.931 18.4711 15.0004 18.256 15.0004H5.99999V17.0004H17V19.0004H4.99999C4.73477 19.0004 4.48042 18.895 4.29288 18.7075C4.10535 18.52 3.99999 18.2656 3.99999 18.0004V6.41439ZM5.99999 7.00039V13.0004H17.512L19.312 7.00039H5.99999ZM5.49999 23.0004C5.10216 23.0004 4.72063 22.8424 4.43933 22.561C4.15802 22.2797 3.99999 21.8982 3.99999 21.5004C3.99999 21.1026 4.15802 20.721 4.43933 20.4397C4.72063 20.1584 5.10216 20.0004 5.49999 20.0004C5.89781 20.0004 6.27934 20.1584 6.56065 20.4397C6.84195 20.721 6.99999 21.1026 6.99999 21.5004C6.99999 21.8982 6.84195 22.2797 6.56065 22.561C6.27934 22.8424 5.89781 23.0004 5.49999 23.0004ZM17.5 23.0004C17.1022 23.0004 16.7206 22.8424 16.4393 22.561C16.158 22.2797 16 21.8982 16 21.5004C16 21.1026 16.158 20.721 16.4393 20.4397C16.7206 20.1584 17.1022 20.0004 17.5 20.0004C17.8978 20.0004 18.2793 20.1584 18.5606 20.4397C18.842 20.721 19 21.1026 19 21.5004C19 21.8982 18.842 22.2797 18.5606 22.561C18.2793 22.8424 17.8978 23.0004 17.5 23.0004Z"
            fill="#000" />
      </svg>
   </figure>
   <span class="cart__badge">99+</span>
</div>

CSS

.cart {
   position: relative;
}

.cart .cart__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid #E6E6E6;
}

.cart .cart__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.cart input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.cart input[type="checkbox"]:hover~.cart__element {
   border: 1px solid #A7A7A7;
}

.cart input:checked[type="checkbox"]~.cart__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

.cart .cart__badge {
   display: block;
   text-align: center;
   position: absolute;
   min-width: 18px;
   min-height: 18px;
   border-radius: 100px;
   border: 2px solid #FFF;
   background: #FF3939;
   top: -12px;
   left: -8px;
   color: #FFF;
   font-family: inherit;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: 16.8px;
   padding: 2px 8px;
}

Ícone carrinho com borda e com badge superior direito

Preview

HTML

<div class="cart">
   <input type="checkbox">
   <figure class="cart__element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M3.99999 6.41439L0.756989 3.17239L2.17199 1.75739L5.41399 5.00039H20.656C20.8119 5.00037 20.9656 5.0368 21.1049 5.10675C21.2441 5.17671 21.3652 5.27825 21.4582 5.40328C21.5513 5.52831 21.6138 5.67337 21.6409 5.82687C21.6679 5.98038 21.6587 6.13808 21.614 6.28739L19.214 14.2874C19.1522 14.4935 19.0257 14.6741 18.8531 14.8026C18.6805 14.931 18.4711 15.0004 18.256 15.0004H5.99999V17.0004H17V19.0004H4.99999C4.73477 19.0004 4.48042 18.895 4.29288 18.7075C4.10535 18.52 3.99999 18.2656 3.99999 18.0004V6.41439ZM5.99999 7.00039V13.0004H17.512L19.312 7.00039H5.99999ZM5.49999 23.0004C5.10216 23.0004 4.72063 22.8424 4.43933 22.561C4.15802 22.2797 3.99999 21.8982 3.99999 21.5004C3.99999 21.1026 4.15802 20.721 4.43933 20.4397C4.72063 20.1584 5.10216 20.0004 5.49999 20.0004C5.89781 20.0004 6.27934 20.1584 6.56065 20.4397C6.84195 20.721 6.99999 21.1026 6.99999 21.5004C6.99999 21.8982 6.84195 22.2797 6.56065 22.561C6.27934 22.8424 5.89781 23.0004 5.49999 23.0004ZM17.5 23.0004C17.1022 23.0004 16.7206 22.8424 16.4393 22.561C16.158 22.2797 16 21.8982 16 21.5004C16 21.1026 16.158 20.721 16.4393 20.4397C16.7206 20.1584 17.1022 20.0004 17.5 20.0004C17.8978 20.0004 18.2793 20.1584 18.5606 20.4397C18.842 20.721 19 21.1026 19 21.5004C19 21.8982 18.842 22.2797 18.5606 22.561C18.2793 22.8424 17.8978 23.0004 17.5 23.0004Z"
            fill="#000" />
      </svg>
   </figure>
   <span class="cart__badge">99+</span>
</div>

CSS

.cart {
   position: relative;
}

.cart .cart__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid #E6E6E6;
}

.cart .cart__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.cart input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.cart input[type="checkbox"]:hover~.cart__element {
   border: 1px solid #A7A7A7;
}

.cart input:checked[type="checkbox"]~.cart__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

.cart .cart__badge {
   display: block;
   text-align: center;
   position: absolute;
   min-width: 18px;
   min-height: 18px;
   border-radius: 100px;
   border: 2px solid #FFF;
   background: #FF3939;
   top: -12px;
   right: -8px;
   color: #FFF;
   font-family: inherit;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: 16.8px;
   padding: 2px 8px;
}

Ícone carrinho com borda e com badge inferior esquerdo

Preview

HTML

<div class="cart">
   <input type="checkbox">
   <figure class="cart__element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M3.99999 6.41439L0.756989 3.17239L2.17199 1.75739L5.41399 5.00039H20.656C20.8119 5.00037 20.9656 5.0368 21.1049 5.10675C21.2441 5.17671 21.3652 5.27825 21.4582 5.40328C21.5513 5.52831 21.6138 5.67337 21.6409 5.82687C21.6679 5.98038 21.6587 6.13808 21.614 6.28739L19.214 14.2874C19.1522 14.4935 19.0257 14.6741 18.8531 14.8026C18.6805 14.931 18.4711 15.0004 18.256 15.0004H5.99999V17.0004H17V19.0004H4.99999C4.73477 19.0004 4.48042 18.895 4.29288 18.7075C4.10535 18.52 3.99999 18.2656 3.99999 18.0004V6.41439ZM5.99999 7.00039V13.0004H17.512L19.312 7.00039H5.99999ZM5.49999 23.0004C5.10216 23.0004 4.72063 22.8424 4.43933 22.561C4.15802 22.2797 3.99999 21.8982 3.99999 21.5004C3.99999 21.1026 4.15802 20.721 4.43933 20.4397C4.72063 20.1584 5.10216 20.0004 5.49999 20.0004C5.89781 20.0004 6.27934 20.1584 6.56065 20.4397C6.84195 20.721 6.99999 21.1026 6.99999 21.5004C6.99999 21.8982 6.84195 22.2797 6.56065 22.561C6.27934 22.8424 5.89781 23.0004 5.49999 23.0004ZM17.5 23.0004C17.1022 23.0004 16.7206 22.8424 16.4393 22.561C16.158 22.2797 16 21.8982 16 21.5004C16 21.1026 16.158 20.721 16.4393 20.4397C16.7206 20.1584 17.1022 20.0004 17.5 20.0004C17.8978 20.0004 18.2793 20.1584 18.5606 20.4397C18.842 20.721 19 21.1026 19 21.5004C19 21.8982 18.842 22.2797 18.5606 22.561C18.2793 22.8424 17.8978 23.0004 17.5 23.0004Z"
            fill="#000" />
      </svg>
   </figure>
   <span class="cart__badge">99+</span>
</div>

CSS

.cart {
   position: relative;
}

.cart .cart__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid #E6E6E6;
}

.cart .cart__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.cart input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.cart input[type="checkbox"]:hover~.cart__element {
   border: 1px solid #A7A7A7;
}

.cart input:checked[type="checkbox"]~.cart__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

.cart .cart__badge {
   display: block;
   text-align: center;
   position: absolute;
   min-width: 18px;
   min-height: 18px;
   border-radius: 100px;
   border: 2px solid #FFF;
   background: #FF3939;
   bottom: -8px;
   left: -11px;
   color: #FFF;
   font-family: inherit;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: 16.8px;
   padding: 2px 8px;
}

Ícone carrinho com borda e com badge inferior direito

Preview

HTML

<div class="cart">
   <input type="checkbox">
   <figure class="cart__element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M3.99999 6.41439L0.756989 3.17239L2.17199 1.75739L5.41399 5.00039H20.656C20.8119 5.00037 20.9656 5.0368 21.1049 5.10675C21.2441 5.17671 21.3652 5.27825 21.4582 5.40328C21.5513 5.52831 21.6138 5.67337 21.6409 5.82687C21.6679 5.98038 21.6587 6.13808 21.614 6.28739L19.214 14.2874C19.1522 14.4935 19.0257 14.6741 18.8531 14.8026C18.6805 14.931 18.4711 15.0004 18.256 15.0004H5.99999V17.0004H17V19.0004H4.99999C4.73477 19.0004 4.48042 18.895 4.29288 18.7075C4.10535 18.52 3.99999 18.2656 3.99999 18.0004V6.41439ZM5.99999 7.00039V13.0004H17.512L19.312 7.00039H5.99999ZM5.49999 23.0004C5.10216 23.0004 4.72063 22.8424 4.43933 22.561C4.15802 22.2797 3.99999 21.8982 3.99999 21.5004C3.99999 21.1026 4.15802 20.721 4.43933 20.4397C4.72063 20.1584 5.10216 20.0004 5.49999 20.0004C5.89781 20.0004 6.27934 20.1584 6.56065 20.4397C6.84195 20.721 6.99999 21.1026 6.99999 21.5004C6.99999 21.8982 6.84195 22.2797 6.56065 22.561C6.27934 22.8424 5.89781 23.0004 5.49999 23.0004ZM17.5 23.0004C17.1022 23.0004 16.7206 22.8424 16.4393 22.561C16.158 22.2797 16 21.8982 16 21.5004C16 21.1026 16.158 20.721 16.4393 20.4397C16.7206 20.1584 17.1022 20.0004 17.5 20.0004C17.8978 20.0004 18.2793 20.1584 18.5606 20.4397C18.842 20.721 19 21.1026 19 21.5004C19 21.8982 18.842 22.2797 18.5606 22.561C18.2793 22.8424 17.8978 23.0004 17.5 23.0004Z"
            fill="#000" />
      </svg>
   </figure>
   <span class="cart__badge">99+</span>
</div>

CSS

.cart {
   position: relative;
}

.cart .cart__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid #E6E6E6;
}

.cart .cart__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.cart input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.cart input[type="checkbox"]:hover~.cart__element {
   border: 1px solid #A7A7A7;
}

.cart input:checked[type="checkbox"]~.cart__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

.cart .cart__badge {
   display: block;
   text-align: center;
   position: absolute;
   min-width: 18px;
   min-height: 18px;
   border-radius: 100px;
   border: 2px solid #FFF;
   background: #FF3939;
   bottom: -8px;
   right: -11px;
   color: #FFF;
   font-family: inherit;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: 16.8px;
   padding: 2px 8px;
}

Ícone sino sem borda

Preview

HTML

<div class="bell">
   <input type="checkbox">
   <figure class="bell__element" id="bell-element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M20 17.0005H22V19.0005H2V17.0005H4V10.0005C4 7.87876 4.84285 5.84392 6.34315 4.34363C7.84344 2.84334 9.87827 2.00049 12 2.00049C14.1217 2.00049 16.1566 2.84334 17.6569 4.34363C19.1571 5.84392 20 7.87876 20 10.0005V17.0005ZM18 17.0005V10.0005C18 8.40919 17.3679 6.88307 16.2426 5.75785C15.1174 4.63263 13.5913 4.00049 12 4.00049C10.4087 4.00049 8.88258 4.63263 7.75736 5.75785C6.63214 6.88307 6 8.40919 6 10.0005V17.0005H18ZM9 21.0005H15V23.0005H9V21.0005Z"
            fill="#000" />
      </svg>
   </figure>
</div>

CSS

.bell {
   position: relative;
}

.bell .bell__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid transparent;
}

.bell .bell__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.bell input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.bell input[type="checkbox"]:hover~.bell__element {
   border: 1px solid #E3E3E3;
}

.bell input:checked[type="checkbox"]~.bell__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

Ícone sino sem borda e com dot de notificação

Preview

HTML

<div class="bell">
   <input type="checkbox">
   <figure class="bell__element" id="bell-element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M20 17.0005H22V19.0005H2V17.0005H4V10.0005C4 7.87876 4.84285 5.84392 6.34315 4.34363C7.84344 2.84334 9.87827 2.00049 12 2.00049C14.1217 2.00049 16.1566 2.84334 17.6569 4.34363C19.1571 5.84392 20 7.87876 20 10.0005V17.0005ZM18 17.0005V10.0005C18 8.40919 17.3679 6.88307 16.2426 5.75785C15.1174 4.63263 13.5913 4.00049 12 4.00049C10.4087 4.00049 8.88258 4.63263 7.75736 5.75785C6.63214 6.88307 6 8.40919 6 10.0005V17.0005H18ZM9 21.0005H15V23.0005H9V21.0005Z"
            fill="#000" />
      </svg>
   </figure>
   <span class="bell__dot"></span>
</div>

CSS

.bell {
   position: relative;
}

.bell .bell__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid transparent;
}

.bell .bell__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.bell .bell__dot {
   display: block;
   text-align: center;
   position: absolute;
   width: 15px;
   height: 15px;
   border-radius: 99px;
   border: 2px solid #FFF;
   background: #FF3939;
   top: 3px;
   right: 7px;
   color: #FFF;
   cursor: pointer;
}

.bell input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.bell input[type="checkbox"]:hover~.bell__element {
   border: 1px solid #E3E3E3;
}

.bell input:checked[type="checkbox"]~.bell__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

Ícone sino sem borda e com badge superior esquerdo

Preview

HTML

<div class="bell">
   <input type="checkbox">
   <figure class="bell__element" id="bell-element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M20 17.0005H22V19.0005H2V17.0005H4V10.0005C4 7.87876 4.84285 5.84392 6.34315 4.34363C7.84344 2.84334 9.87827 2.00049 12 2.00049C14.1217 2.00049 16.1566 2.84334 17.6569 4.34363C19.1571 5.84392 20 7.87876 20 10.0005V17.0005ZM18 17.0005V10.0005C18 8.40919 17.3679 6.88307 16.2426 5.75785C15.1174 4.63263 13.5913 4.00049 12 4.00049C10.4087 4.00049 8.88258 4.63263 7.75736 5.75785C6.63214 6.88307 6 8.40919 6 10.0005V17.0005H18ZM9 21.0005H15V23.0005H9V21.0005Z"
            fill="#000" />
      </svg>
   </figure>
   <span class="bell__badge">99+</span>
</div>

CSS

.bell {
   position: relative;
}

.bell .bell__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid transparent;
}

.bell .bell__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.bell .bell__badge {
   display: block;
   text-align: center;
   position: absolute;
   min-width: 18px;
   min-height: 18px;
   border-radius: 100px;
   border: 2px solid #FFF;
   background: #FF3939;
   top: -7px;
   left: -12px;
   color: #FFF;
   font-family: inherit;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: 16.8px;
   padding: 2px 8px;
   pointer-events: none;
   cursor: pointer;
}

.bell input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.bell input[type="checkbox"]:hover~.bell__element {
   border: 1px solid #E3E3E3;
}

.bell input:checked[type="checkbox"]~.bell__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

Ícone sino sem borda e com badge superior direito

Preview

HTML

<div class="bell">
   <input type="checkbox">
   <figure class="bell__element" id="bell-element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M20 17.0005H22V19.0005H2V17.0005H4V10.0005C4 7.87876 4.84285 5.84392 6.34315 4.34363C7.84344 2.84334 9.87827 2.00049 12 2.00049C14.1217 2.00049 16.1566 2.84334 17.6569 4.34363C19.1571 5.84392 20 7.87876 20 10.0005V17.0005ZM18 17.0005V10.0005C18 8.40919 17.3679 6.88307 16.2426 5.75785C15.1174 4.63263 13.5913 4.00049 12 4.00049C10.4087 4.00049 8.88258 4.63263 7.75736 5.75785C6.63214 6.88307 6 8.40919 6 10.0005V17.0005H18ZM9 21.0005H15V23.0005H9V21.0005Z"
            fill="#000" />
      </svg>
   </figure>
   <span class="bell__badge">99+</span>
</div>

CSS

.bell {
   position: relative;
}

.bell .bell__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid transparent;
}

.bell .bell__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.bell .bell__badge {
   display: block;
   text-align: center;
   position: absolute;
   min-width: 18px;
   min-height: 18px;
   border-radius: 100px;
   border: 2px solid #FFF;
   background: #FF3939;
   top: -7px;
   right: -11px;
   color: #FFF;
   font-family: inherit;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: 16.8px;
   padding: 2px 8px;
   pointer-events: none;
   cursor: pointer;
}

.bell input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.bell input[type="checkbox"]:hover~.bell__element {
   border: 1px solid #E3E3E3;
}

.bell input:checked[type="checkbox"]~.bell__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

Ícone sino sem borda e com badge inferior esquerdo

Preview

HTML

<div class="bell">
   <input type="checkbox">
   <figure class="bell__element" id="bell-element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M20 17.0005H22V19.0005H2V17.0005H4V10.0005C4 7.87876 4.84285 5.84392 6.34315 4.34363C7.84344 2.84334 9.87827 2.00049 12 2.00049C14.1217 2.00049 16.1566 2.84334 17.6569 4.34363C19.1571 5.84392 20 7.87876 20 10.0005V17.0005ZM18 17.0005V10.0005C18 8.40919 17.3679 6.88307 16.2426 5.75785C15.1174 4.63263 13.5913 4.00049 12 4.00049C10.4087 4.00049 8.88258 4.63263 7.75736 5.75785C6.63214 6.88307 6 8.40919 6 10.0005V17.0005H18ZM9 21.0005H15V23.0005H9V21.0005Z"
            fill="#000" />
      </svg>
   </figure>
   <span class="bell__badge">99+</span>
</div>

CSS

.bell {
   position: relative;
}

.bell .bell__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid transparent;
}

.bell .bell__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.bell .bell__badge {
   display: block;
   text-align: center;
   position: absolute;
   min-width: 18px;
   min-height: 18px;
   border-radius: 100px;
   border: 2px solid #FFF;
   background: #FF3939;
   bottom: -9px;
   left: -11px;
   color: #FFF;
   font-family: inherit;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: 16.8px;
   padding: 2px 8px;
   pointer-events: none;
   cursor: pointer;
}

.bell input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.bell input[type="checkbox"]:hover~.bell__element {
   border: 1px solid #E3E3E3;
}

.bell input:checked[type="checkbox"]~.bell__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

Ícone sino sem borda e com badge inferior direito

Preview

HTML

<div class="bell">
   <input type="checkbox">
   <figure class="bell__element" id="bell-element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M20 17.0005H22V19.0005H2V17.0005H4V10.0005C4 7.87876 4.84285 5.84392 6.34315 4.34363C7.84344 2.84334 9.87827 2.00049 12 2.00049C14.1217 2.00049 16.1566 2.84334 17.6569 4.34363C19.1571 5.84392 20 7.87876 20 10.0005V17.0005ZM18 17.0005V10.0005C18 8.40919 17.3679 6.88307 16.2426 5.75785C15.1174 4.63263 13.5913 4.00049 12 4.00049C10.4087 4.00049 8.88258 4.63263 7.75736 5.75785C6.63214 6.88307 6 8.40919 6 10.0005V17.0005H18ZM9 21.0005H15V23.0005H9V21.0005Z"
            fill="#000" />
      </svg>
   </figure>
   <span class="bell__badge">99+</span>
</div>

CSS

.bell {
   position: relative;
}

.bell .bell__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid transparent;
}

.bell .bell__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.bell .bell__badge {
   display: block;
   text-align: center;
   position: absolute;
   min-width: 18px;
   min-height: 18px;
   border-radius: 100px;
   border: 2px solid #FFF;
   background: #FF3939;
   bottom: -9px;
   right: -11px;
   color: #FFF;
   font-family: inherit;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: 16.8px;
   padding: 2px 8px;
   pointer-events: none;
   cursor: pointer;
}

.bell input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.bell input[type="checkbox"]:hover~.bell__element {
   border: 1px solid #E3E3E3;
}

.bell input:checked[type="checkbox"]~.bell__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

Ícone sino com borda

Preview

HTML

<div class="bell">
   <input type="checkbox">
   <figure class="bell__element" id="bell-element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M20 17.0005H22V19.0005H2V17.0005H4V10.0005C4 7.87876 4.84285 5.84392 6.34315 4.34363C7.84344 2.84334 9.87827 2.00049 12 2.00049C14.1217 2.00049 16.1566 2.84334 17.6569 4.34363C19.1571 5.84392 20 7.87876 20 10.0005V17.0005ZM18 17.0005V10.0005C18 8.40919 17.3679 6.88307 16.2426 5.75785C15.1174 4.63263 13.5913 4.00049 12 4.00049C10.4087 4.00049 8.88258 4.63263 7.75736 5.75785C6.63214 6.88307 6 8.40919 6 10.0005V17.0005H18ZM9 21.0005H15V23.0005H9V21.0005Z"
            fill="#000" />
      </svg>
   </figure>
</div>

CSS

.bell {
   position: relative;
}

.bell .bell__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid #E6E6E6;
}

.bell .bell__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.bell input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.bell input[type="checkbox"]:hover~.bell__element {
   border: 1px solid #A7A7A7;
}

.bell input:checked[type="checkbox"]~.bell__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

Ícone sino com borda e com dot de notificação

Preview

HTML

<div class="bell">
   <input type="checkbox">
   <figure class="bell__element" id="bell-element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M20 17.0005H22V19.0005H2V17.0005H4V10.0005C4 7.87876 4.84285 5.84392 6.34315 4.34363C7.84344 2.84334 9.87827 2.00049 12 2.00049C14.1217 2.00049 16.1566 2.84334 17.6569 4.34363C19.1571 5.84392 20 7.87876 20 10.0005V17.0005ZM18 17.0005V10.0005C18 8.40919 17.3679 6.88307 16.2426 5.75785C15.1174 4.63263 13.5913 4.00049 12 4.00049C10.4087 4.00049 8.88258 4.63263 7.75736 5.75785C6.63214 6.88307 6 8.40919 6 10.0005V17.0005H18ZM9 21.0005H15V23.0005H9V21.0005Z"
            fill="#000" />
      </svg>
   </figure>
   <span class="bell__dot"></span>
</div>

CSS

.bell {
   position: relative;
}

.bell .bell__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid #E6E6E6;
}

.bell .bell__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.bell input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.bell input[type="checkbox"]:hover~.bell__element {
   border: 1px solid #A7A7A7;
}

.bell input:checked[type="checkbox"]~.bell__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

.bell .bell__dot {
   display: block;
   text-align: center;
   position: absolute;
   width: 16px;
   height: 16px;
   border-radius: 99px;
   border: 2px solid #FFF;
   background: #FF3939;
   top: -6px;
   right: -6px;
   color: #FFF;
   cursor: pointer;
}

Ícone sino com borda e com badge superior esquerdo

Preview

HTML

<div class="bell">
   <input type="checkbox">
   <figure class="bell__element" id="bell-element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M20 17.0005H22V19.0005H2V17.0005H4V10.0005C4 7.87876 4.84285 5.84392 6.34315 4.34363C7.84344 2.84334 9.87827 2.00049 12 2.00049C14.1217 2.00049 16.1566 2.84334 17.6569 4.34363C19.1571 5.84392 20 7.87876 20 10.0005V17.0005ZM18 17.0005V10.0005C18 8.40919 17.3679 6.88307 16.2426 5.75785C15.1174 4.63263 13.5913 4.00049 12 4.00049C10.4087 4.00049 8.88258 4.63263 7.75736 5.75785C6.63214 6.88307 6 8.40919 6 10.0005V17.0005H18ZM9 21.0005H15V23.0005H9V21.0005Z"
            fill="#000" />
      </svg>
   </figure>
   <span class="bell__badge">99+</span>
</div>

CSS

.bell {
   position: relative;
}

.bell .bell__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid #E6E6E6;
}

.bell .bell__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.bell input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.bell input[type="checkbox"]:hover~.bell__element {
   border: 1px solid #A7A7A7;
}

.bell input:checked[type="checkbox"]~.bell__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

.bell .bell__badge {
   display: block;
   text-align: center;
   position: absolute;
   min-width: 18px;
   min-height: 18px;
   border-radius: 100px;
   border: 2px solid #FFF;
   background: #FF3939;
   top: -12px;
   left: -8px;
   color: #FFF;
   font-family: inherit;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: 16.8px;
   padding: 2px 8px;
}

Ícone sino com borda e com badge superior direito

Preview

HTML

<div class="bell">
   <input type="checkbox">
   <figure class="bell__element" id="bell-element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M20 17.0005H22V19.0005H2V17.0005H4V10.0005C4 7.87876 4.84285 5.84392 6.34315 4.34363C7.84344 2.84334 9.87827 2.00049 12 2.00049C14.1217 2.00049 16.1566 2.84334 17.6569 4.34363C19.1571 5.84392 20 7.87876 20 10.0005V17.0005ZM18 17.0005V10.0005C18 8.40919 17.3679 6.88307 16.2426 5.75785C15.1174 4.63263 13.5913 4.00049 12 4.00049C10.4087 4.00049 8.88258 4.63263 7.75736 5.75785C6.63214 6.88307 6 8.40919 6 10.0005V17.0005H18ZM9 21.0005H15V23.0005H9V21.0005Z"
            fill="#000" />
      </svg>
   </figure>
   <span class="bell__badge">99+</span>
</div>

CSS

.bell {
   position: relative;
}

.bell .bell__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid #E6E6E6;
}

.bell .bell__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.bell input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.bell input[type="checkbox"]:hover~.bell__element {
   border: 1px solid #A7A7A7;
}

.bell input:checked[type="checkbox"]~.bell__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

.bell .bell__badge {
   display: block;
   text-align: center;
   position: absolute;
   min-width: 18px;
   min-height: 18px;
   border-radius: 100px;
   border: 2px solid #FFF;
   background: #FF3939;
   top: -12px;
   right: -8px;
   color: #FFF;
   font-family: inherit;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: 16.8px;
   padding: 2px 8px;
}

Ícone sino com borda e com badge inferior esquerdo

Preview

HTML

<div class="bell">
   <input type="checkbox">
   <figure class="bell__element" id="bell-element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M20 17.0005H22V19.0005H2V17.0005H4V10.0005C4 7.87876 4.84285 5.84392 6.34315 4.34363C7.84344 2.84334 9.87827 2.00049 12 2.00049C14.1217 2.00049 16.1566 2.84334 17.6569 4.34363C19.1571 5.84392 20 7.87876 20 10.0005V17.0005ZM18 17.0005V10.0005C18 8.40919 17.3679 6.88307 16.2426 5.75785C15.1174 4.63263 13.5913 4.00049 12 4.00049C10.4087 4.00049 8.88258 4.63263 7.75736 5.75785C6.63214 6.88307 6 8.40919 6 10.0005V17.0005H18ZM9 21.0005H15V23.0005H9V21.0005Z"
            fill="#000" />
      </svg>
   </figure>
   <span class="bell__badge">99+</span>
</div>

CSS

.bell {
   position: relative;
}

.bell .bell__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid #E6E6E6;
}

.bell .bell__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.bell input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.bell input[type="checkbox"]:hover~.bell__element {
   border: 1px solid #A7A7A7;
}

.bell input:checked[type="checkbox"]~.bell__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

.bell .bell__badge {
   display: block;
   text-align: center;
   position: absolute;
   min-width: 18px;
   min-height: 18px;
   border-radius: 100px;
   border: 2px solid #FFF;
   background: #FF3939;
   bottom: -8px;
   left: -11px;
   color: #FFF;
   font-family: inherit;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: 16.8px;
   padding: 2px 8px;
}

Ícone sino com borda e com badge inferior direito

Preview

HTML

<div class="bell">
   <input type="checkbox">
   <figure class="bell__element" id="bell-element">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
         <path
            d="M20 17.0005H22V19.0005H2V17.0005H4V10.0005C4 7.87876 4.84285 5.84392 6.34315 4.34363C7.84344 2.84334 9.87827 2.00049 12 2.00049C14.1217 2.00049 16.1566 2.84334 17.6569 4.34363C19.1571 5.84392 20 7.87876 20 10.0005V17.0005ZM18 17.0005V10.0005C18 8.40919 17.3679 6.88307 16.2426 5.75785C15.1174 4.63263 13.5913 4.00049 12 4.00049C10.4087 4.00049 8.88258 4.63263 7.75736 5.75785C6.63214 6.88307 6 8.40919 6 10.0005V17.0005H18ZM9 21.0005H15V23.0005H9V21.0005Z"
            fill="#000" />
      </svg>
   </figure>
   <span class="bell__badge">99+</span>
</div>

CSS

.bell {
   position: relative;
}

.bell .bell__element {
   background-color: #fff;
   border-radius: 4px;
   padding: 11px;
   width: 48px;
   height: 48px;
   transition: border 150ms linear;
   cursor: pointer;
   border: 1px solid #E6E6E6;
}

.bell .bell__element svg {
   width: 24px;
   height: 24px;
   display: block;
}

.bell input[type="checkbox"] {
   position: absolute;
   inset: 0;
   margin: auto;
   opacity: 0;
   appearance: none;
   cursor: pointer;
}

.bell input[type="checkbox"]:hover~.bell__element {
   border: 1px solid #A7A7A7;
}

.bell input:checked[type="checkbox"]~.bell__element {
   background-color: #F5F5F5;
   border: 1px solid transparent;
}

.bell .bell__badge {
   display: block;
   text-align: center;
   position: absolute;
   min-width: 18px;
   min-height: 18px;
   border-radius: 100px;
   border: 2px solid #FFF;
   background: #FF3939;
   bottom: -8px;
   right: -11px;
   color: #FFF;
   font-family: inherit;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: 16.8px;
   padding: 2px 8px;
}

Avatar sem imagem

Preview

HTML

<div class="avatar">
   <figure class="avatar__image" title="Avatar">
      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
         <mask id="mask0_64_2217" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="49">
            <circle cx="24" cy="24.0005" r="24" fill="#F5F5F5" />
         </mask>
         <g mask="url(#mask0_64_2217)">
            <ellipse opacity="0.5" cx="24" cy="42.0005" rx="18" ry="10" fill="#A7A7A7" />
            <circle opacity="0.5" cx="24" cy="23.0005" r="11" fill="#A7A7A7" />
         </g>
      </svg>
   </figure>
</div>

CSS

.cart-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
}

.avatar {
   position: relative;
   padding: 10px;
}

.avatar .avatar__image {
   width: 48px;
   height: 48px;
   cursor: pointer;
   border-radius: 100%;
   background-color: #F5F5F5;
   overflow: hidden;
}

.avatar .avatar__image svg {
   display: block;
   width: inherit;
   height: inherit;
   object-fit: cover;
   border-radius: inherit;
}

Avatar sem imagem e com dot de notificações

Preview

HTML

<div class="avatar">
   <figure class="avatar__image" title="Avatar">
      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
         <mask id="mask0_64_2217" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="49">
            <circle cx="24" cy="24.0005" r="24" fill="#F5F5F5" />
         </mask>
         <g mask="url(#mask0_64_2217)">
            <ellipse opacity="0.5" cx="24" cy="42.0005" rx="18" ry="10" fill="#A7A7A7" />
            <circle opacity="0.5" cx="24" cy="23.0005" r="11" fill="#A7A7A7" />
         </g>
      </svg>
   </figure>
   <span class="avatar__dot"></span>
</div>

CSS

.cart-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
}

.avatar {
   position: relative;
   padding: 10px;
}

.avatar .avatar__image {
   width: 48px;
   height: 48px;
   cursor: pointer;
   border-radius: 100%;
   background-color: #F5F5F5;
   overflow: hidden;
}

.avatar .avatar__image svg {
   display: block;
   width: inherit;
   height: inherit;
   object-fit: cover;
   border-radius: inherit;
}

.avatar .avatar__dot {
   display: block;
   position: absolute;
   width: 16px;
   height: 16px;
   border-radius: 100px;
   border: 2px solid #FFF;
   background: #FF3939;
   right: 6px;
   bottom: 10px;
}

Avatar com imagem

Preview

HTML

<div class="avatar">
   <figure class="avatar__image">
      <img src="https://picsum.photos/id/669/48/48" alt="Fulano" title="Fulano">
   </figure>
</div>

CSS

.cart-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
}

.avatar {
   position: relative;
   padding: 10px;
}

.avatar .avatar__image {
   width: 48px;
   height: 48px;
   cursor: pointer;
   border-radius: 100%;
   background-color: #F5F5F5;
   overflow: hidden;
}

.avatar .avatar__image img {
   display: block;
   width: inherit;
   height: inherit;
   object-fit: cover;
   border-radius: inherit;
}

Avatar com imagem e com dot de notificações

Preview

HTML

<div class="avatar">
   <figure class="avatar__image">
      <img src="https://picsum.photos/id/669/48/48" alt="Fulano logado" title="Fulano logado">
   </figure>
   <span class="avatar__dot"></span>
</div>

CSS

.cart-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
}

.avatar {
   position: relative;
   padding: 10px;
}

.avatar .avatar__image {
   width: 48px;
   height: 48px;
   cursor: pointer;
   border-radius: 100%;
   background-color: #F5F5F5;
   overflow: hidden;
}

.avatar__image img {
   display: block;
   width: inherit;
   height: inherit;
   object-fit: cover;
   border-radius: inherit;
}

.avatar .avatar__dot {
   display: block;
   position: absolute;
   width: 16px;
   height: 16px;
   border-radius: 100px;
   border: 2px solid #FFF;
   background: #FF3939;
   right: 6px;
   bottom: 10px;
}