button icon #01
Default icon button
1
Color options
Customize your colors.
<div class="flex flex-wrap items-end justify-center py-48 mx-auto gap-4">
<button
class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-base-900 hover:bg-base-950 focus:outline-base-950 shadow-sm w-8 h-8 p-2 rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
aria-label="Add"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-plus size-3"
slot="left-icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 5l0 14"></path>
<path d="M5 12l14 0"></path>
</svg>
</button>
<button
class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-base-900 hover:bg-base-950 focus:outline-base-950 shadow-sm w-9 h-9 p-2 rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
aria-label="Add"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-plus size-4"
slot="left-icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 5l0 14"></path>
<path d="M5 12l14 0"></path>
</svg>
</button>
<button
class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-base-900 hover:bg-base-950 focus:outline-base-950 shadow-sm w-10 h-10 p-2 rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
aria-label="Add"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-plus size-5"
slot="left-icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 5l0 14"></path>
<path d="M5 12l14 0"></path>
</svg>
</button>
<button
class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-base-900 hover:bg-base-950 focus:outline-base-950 shadow-sm w-11 h-11 p-2 rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
aria-label="Add"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-plus size-6"
slot="left-icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 5l0 14"></path>
<path d="M5 12l14 0"></path>
</svg>
</button>
<button
class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-base-900 hover:bg-base-950 focus:outline-base-950 shadow-sm w-12 h-12 p-3 rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
aria-label="Add"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-plus size-7"
slot="left-icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 5l0 14"></path>
<path d="M5 12l14 0"></path>
</svg>
</button>
<button
class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-base-900 hover:bg-base-950 focus:outline-base-950 shadow-sm w-14 h-14 p-3 rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
aria-label="Add"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-plus size-8"
slot="left-icon"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 5l0 14"></path>
<path d="M5 12l14 0"></path>
</svg>
</button>
</div>