Components
A collection of pre-styled static icons. The icons are available in a variety of sizes and styles.
The most commonly used button styles.
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full text-blue-600 dark:text-blue-500">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-blue-600 text-white dark:bg-blue-500">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-400">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border-4 border-blue-100 bg-blue-200 text-blue-800 dark:border-blue-900 dark:bg-blue-800 dark:text-blue-400">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border border-blue-600 text-blue-600 dark:border-blue-500 dark:text-blue-500">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border border-gray-200 bg-white text-gray-700 shadow-sm dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
Icons stacked small to large sizes.
<!-- Icon -->
<span class="inline-flex justify-center items-center w-[38px] h-[38px] rounded-full bg-blue-600 text-white dark:bg-blue-500">
<svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-blue-600 text-white dark:bg-blue-500">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="inline-flex justify-center items-center w-[62px] h-[62px] rounded-full bg-blue-600 text-white dark:bg-blue-500">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
Predefined solid color button styles.
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-gray-800 text-white dark:bg-white dark:text-gray-800">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-gray-500 text-white dark:bg-gray-700">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-teal-500 text-white">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-blue-600 text-white dark:bg-blue-500">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-red-500 text-white">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-yellow-500 text-white">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-white text-gray-600">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
Predefined outline color button styles.
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border border-gray-700 text-gray-700 dark:border-gray-200 dark:text-gray-200">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border border-gray-500 text-gray-500">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border border-teal-500 text-teal-500">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border border-blue-600 text-blue-600 dark:border-blue-500 dark:text-blue-500">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border border-red-500 text-red-500">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border border-yellow-500 text-yellow-500">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border border-white text-white">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
Predefined ghost color button styles.
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full text-gray-700 dark:text-gray-400">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full text-gray-500">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full text-teal-500">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full text-blue-600 dark:text-blue-500">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full text-red-500">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full text-yellow-500">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full text-white">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
Predefined soft color button styles.
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-gray-50 text-gray-800 dark:bg-gray-700 dark:text-gray-400">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-400">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-400">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-400">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-400">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-white/[.1] text-white">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
Predefined soft-outlined color button styles.
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border-4 border-gray-100 bg-gray-200 text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border-4 border-gray-50 bg-gray-200 text-gray-800 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border-4 border-teal-100 bg-teal-200 text-teal-800 dark:border-teal-900 dark:bg-teal-800 dark:text-teal-400">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border-4 border-blue-100 bg-blue-200 text-blue-800 dark:border-blue-900 dark:bg-blue-800 dark:text-blue-400">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border-4 border-red-100 bg-red-200 text-red-800 dark:border-red-900 dark:bg-red-800 dark:text-red-400">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border-4 border-yellow-100 bg-yellow-200 text-yellow-800 dark:border-yellow-900 dark:bg-yellow-800 dark:text-yellow-400">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border-4 border-white/[.05] bg-white/[.1] text-white">
<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
</span>
<!-- End Icon -->
Use the .rounded-full utility class to make avatars circular.
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-lg bg-blue-600 text-white dark:bg-blue-500">
<svg class="flex-shrink-0 w-5 h-5" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.1042 5.95502C19.2066 5.85057 19.3288 5.76759 19.4636 5.71095C19.5984 5.6543 19.7432 5.62512 19.8895 5.62512C20.0357 5.62512 20.1805 5.6543 20.3153 5.71095C20.4502 5.76759 20.5723 5.85057 20.6747 5.95502C21.1037 6.38852 21.1097 7.08902 20.6897 7.53002L11.8202 18.015C11.7195 18.1256 11.5973 18.2145 11.4611 18.2762C11.3249 18.3379 11.1775 18.3712 11.0279 18.374C10.8784 18.3768 10.7299 18.3491 10.5914 18.2925C10.453 18.236 10.3275 18.1517 10.2227 18.045L4.82571 12.576C4.61757 12.3638 4.50098 12.0783 4.50098 11.781C4.50098 11.4837 4.61757 11.1983 4.82571 10.986C4.92808 10.8816 5.05026 10.7986 5.1851 10.7419C5.31993 10.6853 5.46471 10.6561 5.61096 10.6561C5.75722 10.6561 5.902 10.6853 6.03683 10.7419C6.17167 10.7986 6.29385 10.8816 6.39621 10.986L10.9742 15.6255L19.0742 5.98802C19.0835 5.97643 19.0936 5.96541 19.1042 5.95502Z" fill="currentColor"/>
</svg>
</span>
<!-- End Icon -->
<!-- Icon -->
<span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-blue-600 text-white dark:bg-blue-500">
<svg class="flex-shrink-0 w-5 h-5" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.1042 5.95502C19.2066 5.85057 19.3288 5.76759 19.4636 5.71095C19.5984 5.6543 19.7432 5.62512 19.8895 5.62512C20.0357 5.62512 20.1805 5.6543 20.3153 5.71095C20.4502 5.76759 20.5723 5.85057 20.6747 5.95502C21.1037 6.38852 21.1097 7.08902 20.6897 7.53002L11.8202 18.015C11.7195 18.1256 11.5973 18.2145 11.4611 18.2762C11.3249 18.3379 11.1775 18.3712 11.0279 18.374C10.8784 18.3768 10.7299 18.3491 10.5914 18.2925C10.453 18.236 10.3275 18.1517 10.2227 18.045L4.82571 12.576C4.61757 12.3638 4.50098 12.0783 4.50098 11.781C4.50098 11.4837 4.61757 11.1983 4.82571 10.986C4.92808 10.8816 5.05026 10.7986 5.1851 10.7419C5.31993 10.6853 5.46471 10.6561 5.61096 10.6561C5.75722 10.6561 5.902 10.6853 6.03683 10.7419C6.17167 10.7986 6.29385 10.8816 6.39621 10.986L10.9742 15.6255L19.0742 5.98802C19.0835 5.97643 19.0936 5.96541 19.1042 5.95502Z" fill="currentColor"/>
</svg>
</span>
<!-- End Icon -->