diff --git a/src/components/ButtonIcon/ButtonIcon.stories.js b/src/components/ButtonIcon/ButtonIcon.stories.js
index f7a07364..28f84eaa 100644
--- a/src/components/ButtonIcon/ButtonIcon.stories.js
+++ b/src/components/ButtonIcon/ButtonIcon.stories.js
@@ -25,10 +25,17 @@ export const EnlargedIcon = {
 			return {args};
 		},
 		template: `
+			enlarged icon: 
 			<div class="inline-flex gap-1">
 				<ButtonIcon icon="ChevronUp" :enlarged="true"/>
 				<ButtonIcon icon="ChevronDown" :enlarged="true" />
 			</div>
+			<br>
+			vs default size:
+			<div class="inline-flex gap-1">
+				<ButtonIcon icon="ChevronUp"/>
+				<ButtonIcon icon="ChevronDown" />
+			</div>
 			`,
 	}),
 	args: {},
diff --git a/src/components/ButtonIcon/ButtonIcon.vue b/src/components/ButtonIcon/ButtonIcon.vue
index 011d2100..4564d43f 100644
--- a/src/components/ButtonIcon/ButtonIcon.vue
+++ b/src/components/ButtonIcon/ButtonIcon.vue
@@ -1,7 +1,7 @@
 <template>
 	<button :class="styles" :aria-label="ariaLabel" :disabled="isDisabled">
 		<Icon
-			:class="enlarged ? 'h-12 w-12' : 'h-6 w-6'"
+			:class="enlarged ? 'h-9 w-9' : 'h-5 w-5'"
 			:icon="icon"
 			aria-hidden="true"
 		/>
@@ -42,7 +42,7 @@ const props = defineProps({
 
 const styles = computed(() => ({
 	// Base
-	'inline-flex relative items-center justify-center text-lg-semibold rounded w-12 h-12': true,
+	'inline-flex relative items-center justify-center text-lg-semibold rounded w-9 h-9': true,
 	// Default
 	'text-primary bg-secondary': !props.isActive,
 	// Hover