<div class="text-center">
 <label class="swap">
   <input type="checkbox" class="mb-0.5 border-none h-4">
   <span class="swap-on mb-[-6px] text-success">ON</span> 
   <span class="swap-off mb-[-6px] text-info">OFF</span>
 </label>
</div>

 <div class="text-center">
  <label class="swap">
     <input class="mb-0.5 border-none h-4" type="checkbox">
     <span class="swap-on mb-[-5px] text-3xl"><i data-feather="sun"></i></span>
     <span class="swap-off mb-[-5px] text-3xl"><i data-feather="moon"></i></span>
  </label>
</div>

 <div class="text-center">
  <label class="swap">
     <input type="checkbox" class="mb-0.5 border-none h-4">
     <span class="swap-on mb-[-9px] text-3xl"><i class="iconly-Volume-Down icbo text-[30px]"></i></span>
     <span class="swap-off mb-[-9px] text-3xl"><i class="iconly-Volume-Off icbo text-[30px]"></i></span>
  </label>
</div>

 <div class="text-center">
 <label class="text-white rounded-full btn btn-accent swap swap-rotate">
   <input type="checkbox" class="mb-0.5 border-none h-4">
   <span class="swap-on mb-[-6px] text-3xl text-primary"> Open </span>
   <span class="swap-off mb-[-6px] text-3xl text-secondary"> Close </span>
 </label>
</div>

 <div class="text-center">
  <label class="swap swap-flip text-[50px] sm:text-[40px]">
     <input class="mb-0.5" type="checkbox">
     <span class="swap-on mb-[-8px] text-3xl">😈</span>
     <span class="swap-off mb-[-8px] text-3xl">😇</span>
  </label>
</div>

 <div class="text-center">
  <label class="swap">
     <span class="swap-on text-3xl mb-[9px]">
        +iconly('', 'Show', 'text-[24px]', ['1','2'], 'path_formatter')
     </span>
     <span class="swap-off text-3xl mb-[9px]">
        +iconly('', 'Hide', 'text-[24px]', ['1','2'], 'path_formatter')
     </span>
  </label>
</div>