diff --git a/test/components/Avatar.spec.ts b/test/components/Avatar.spec.ts
index 666d68ad..44993275 100644
--- a/test/components/Avatar.spec.ts
+++ b/test/components/Avatar.spec.ts
@@ -6,7 +6,9 @@ describe('Avatar', () => {
   it.each([
     ['with src', { props: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' } }],
     ['with alt', { props: { alt: 'Benjamin Canac' } }],
+    ['with class', { props: { class: 'bg-white dark:bg-gray-900' } }],
     ['with fallback', { props: { fallback: '+1' } }],
+    ['with icon', { props: { icon: 'i-heroicons-photo' } }],
     ['with size 3xs', { props: { size: '3xs' as const } }],
     ['with size 2xs', { props: { size: '2xs' as const } }],
     ['with size xs', { props: { size: 'xs' as const } }],
@@ -15,7 +17,8 @@ describe('Avatar', () => {
     ['with size lg', { props: { size: 'lg' as const } }],
     ['with size xl', { props: { size: 'xl' as const } }],
     ['with size 2xl', { props: { size: '2xl' as const } }],
-    ['with size 3xl', { props: { size: '3xl' as const } }]
+    ['with size 3xl', { props: { size: '3xl' as const } }],
+    ['with ui', { props: { ui: { fallback: 'font-bold' } } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: AvatarProps, slots?: any }) => {
     const html = await ComponentRender(nameOrHtml, options, Avatar)
     expect(html).toMatchSnapshot()
diff --git a/test/components/__snapshots__/Avatar.spec.ts.snap b/test/components/__snapshots__/Avatar.spec.ts.snap
index 758fc2cf..76120b93 100644
--- a/test/components/__snapshots__/Avatar.spec.ts.snap
+++ b/test/components/__snapshots__/Avatar.spec.ts.snap
@@ -2,8 +2,12 @@
 
 exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-8 text-sm"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">BC</span></span>"`;
 
+exports[`Avatar > renders with class correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-8 text-sm bg-white dark:bg-gray-900"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
+
 exports[`Avatar > renders with fallback correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-8 text-sm"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate">+1</span></span>"`;
 
+exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-8 text-sm"><!--v-if--><svg data-v-2d097d15="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon text-gray-500 dark:text-gray-400 shrink-0 size-4" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 15.75l5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5m10.5-11.25h.008v.008h-.008zm.375 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0"></path></svg></span>"`;
+
 exports[`Avatar > renders with size 2xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-16 text-2xl"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
 
 exports[`Avatar > renders with size 2xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px]"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
@@ -23,3 +27,5 @@ exports[`Avatar > renders with size xl correctly 1`] = `"<span class="inline-fle
 exports[`Avatar > renders with size xs correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-6 text-xs"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
 
 exports[`Avatar > renders with src correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-8 text-sm"><!----><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
+
+exports[`Avatar > renders with ui correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-8 text-sm"><!--v-if--><span class="leading-none text-gray-500 dark:text-gray-400 truncate font-bold"></span></span>"`;