diff --git a/src/lib/components/avatar/Icon.svelte b/src/lib/components/avatar/Icon.svelte
deleted file mode 100644
index 39d91fa8..00000000
--- a/src/lib/components/avatar/Icon.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script lang="ts">
-	import { twMerge } from 'tailwind-merge';
-	import { AVATAR_CONTEXT_ID } from './Avatar.svelte';
-	import { AVATAR_PLACEHOLDER_CONTEXT_ID } from './Placeholder.svelte';
-	import { getContext } from 'svelte/internal';
-	import { useContext } from '../../utils/useContext';
-	import Icon from '../icon';
-	import { account } from '../../icons';
-	import { get_current_component } from 'svelte/internal';
-	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
-	export let use: ActionArray = [];
-	import { exclude } from '../../utils/exclude';
-	const forwardEvents = forwardEventsBuilder(get_current_component());
-
-	useContext({
-		context_id: AVATAR_CONTEXT_ID,
-		parent: 'Avatar',
-		component: 'Avatar.Placeholder.Icon'
-	});
-
-	useContext({
-		context_id: AVATAR_PLACEHOLDER_CONTEXT_ID,
-		parent: 'Avatar.Placeholder',
-		component: 'Avatar.Placeholder.Icon'
-	});
-
-	const { size }: { size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' } = getContext(AVATAR_CONTEXT_ID);
-
-	let defaultClass = 'absolute text-light-icon dark:text-dark-icon';
-	if (size === 'xs') {
-		defaultClass += ' text-2xl bottom-[-0.5rem] h-7 w-7';
-	} else if (size === 'sm') {
-		defaultClass += ' text-4xl bottom-[-0.5rem] h-10 w-10';
-	} else if (size === 'md') {
-		defaultClass += ' text-5xl bottom-[-0.5rem] h-12 w-12';
-	} else if (size === 'lg') {
-		defaultClass += ' text-6xl bottom-[-0.75rem] h-14 w-14';
-	} else if (size === 'xl') {
-		defaultClass += ' text-7xl bottom-[-0.75rem] h-[4.5rem] w-[4.5rem]';
-	}
-	$: finalClass = twMerge(defaultClass, $$props.class);
-</script>
-
-<span
-	class={finalClass}
-	use:useActions={use}
-	use:forwardEvents
-	{...exclude($$props, ['use', 'class'])}
->
-	{#if $$slots.default}
-		<slot />
-	{:else}
-		<Icon data={account} class="h-full w-full" />
-	{/if}
-</span>
diff --git a/src/lib/components/avatar/Placeholder.svelte b/src/lib/components/avatar/Placeholder.svelte
index 8ff477d0..3a425a58 100644
--- a/src/lib/components/avatar/Placeholder.svelte
+++ b/src/lib/components/avatar/Placeholder.svelte
@@ -8,7 +8,8 @@
 	import { useContext } from '../../utils/useContext';
 	import { getContext, setContext } from 'svelte/internal';
 	import { twMerge } from 'tailwind-merge';
-	import Icon from './Icon.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import { account } from '../../icons';
 	import { get_current_component } from 'svelte/internal';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
 	export let use: ActionArray = [];
@@ -23,14 +24,37 @@
 		component: 'Avatar.Placeholder'
 	});
 
-	const { shape }: { shape: 'circle' | 'rounded' | 'square' } = getContext(AVATAR_CONTEXT_ID);
+	const {
+		shape,
+		size
+	}: { shape: 'circle' | 'rounded' | 'square'; size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' } =
+		getContext(AVATAR_CONTEXT_ID);
 
 	setContext(AVATAR_PLACEHOLDER_CONTEXT_ID, {
 		placeholder: true
 	});
 
+	let iconContainerClass = 'absolute text-light-icon dark:text-dark-icon h-full w-full';
+	let iconSize = '';
+	if (size === 'xs') {
+		iconContainerClass += ' bottom-[-0.25rem]';
+		iconSize = '24px';
+	} else if (size === 'sm') {
+		iconContainerClass += ' bottom-[-0.35rem]';
+		iconSize = '32px';
+	} else if (size === 'md') {
+		iconContainerClass += ' bottom-[-0.5rem]';
+		iconSize = '40px';
+	} else if (size === 'lg') {
+		iconContainerClass += ' text-6xl bottom-[-0.6rem]';
+		iconSize = '48px';
+	} else if (size === 'xl') {
+		iconContainerClass += ' bottom-[-0.75rem]';
+		iconSize = '64px';
+	}
+
 	let defaultClass =
-		'absolute inset-0 h-full w-full flex items-center justify-center overflow-hidden bg-light-icon-background dark:bg-dark-icon-background';
+		'absolute text-light-icon dark:text-dark-icon inset-0 h-full w-full flex items-center justify-center overflow-hidden bg-light-icon-background dark:bg-dark-icon-background';
 	if (shape === 'circle') {
 		defaultClass += ' rounded-full';
 	} else if (shape === 'rounded') {
@@ -52,7 +76,9 @@
 	{#if $$slots.icon}
 		<slot name="icon" />
 	{:else}
-		<Icon class="text-light-icon dark:text-dark-icon" />
+		<span class={iconContainerClass}>
+			<Icon data={account} size={iconSize} />
+		</span>
 	{/if}
 </div>
 
diff --git a/src/lib/components/avatar/index.ts b/src/lib/components/avatar/index.ts
index 18495327..aa5d6e56 100644
--- a/src/lib/components/avatar/index.ts
+++ b/src/lib/components/avatar/index.ts
@@ -1,22 +1,15 @@
 import OriginalAvatar from './Avatar.svelte';
 import Indicator from './Indicator.svelte';
-import OriginalPlaceholder from './Placeholder.svelte';
-import Icon from './Icon.svelte';
+import Placeholder from './Placeholder.svelte';
 
 const Avatar = OriginalAvatar as AvatarStatic;
 Avatar.Indicator = Indicator;
-Avatar.Placeholder = OriginalPlaceholder as PlaceholderStatic;
-Avatar.Placeholder.Icon = Icon;
+Avatar.Placeholder = Placeholder;
 
 export default Avatar;
 
 export interface AvatarStatic {
 	new (...args: ConstructorParameters<typeof OriginalAvatar>): OriginalAvatar;
 	Indicator: typeof Indicator;
-	Placeholder: PlaceholderStatic;
-}
-
-export interface PlaceholderStatic {
-	new (...args: ConstructorParameters<typeof OriginalPlaceholder>): OriginalPlaceholder;
-	Icon: typeof Icon;
+	Placeholder: typeof Placeholder;
 }
diff --git a/src/routes/avatar/+page.svelte b/src/routes/avatar/+page.svelte
index ffbc6097..d4bd333f 100644
--- a/src/routes/avatar/+page.svelte
+++ b/src/routes/avatar/+page.svelte
@@ -6,7 +6,6 @@
 		exampleInitials,
 		props,
 		slots,
-		iconSlots,
 		placeholderSlots,
 		indicatorProps
 	} from './examples';
@@ -120,10 +119,6 @@
 	<SlotsTable component="Avatar.Placeholder" slots={placeholderSlots} />
 </Col>
 
-<Col class="col-24">
-	<SlotsTable component="Avatar.Placeholder.Icon" slots={iconSlots} />
-</Col>
-
 <Col class="col-24">
 	<PropsTable component="Avatar.Indicator" props={indicatorProps} />
 </Col>
diff --git a/src/routes/avatar/examples.ts b/src/routes/avatar/examples.ts
index 0f0fa63c..c91c49dd 100644
--- a/src/routes/avatar/examples.ts
+++ b/src/routes/avatar/examples.ts
@@ -50,14 +50,6 @@ export const placeholderSlots: Slot[] = [
 	{
 		id: '1',
 		slot: 'icon',
-		component: '<Avatar.Placeholder.Icon slot="icon" />'
-	}
-];
-
-export const iconSlots: Slot[] = [
-	{
-		id: '1',
-		slot: 'default',
 		component: ''
 	}
 ];