diff --git a/src/components/ButtonIcon/ButtonIcon.stories.js b/src/components/ButtonIcon/ButtonIcon.stories.js
index 0c664b3a8..b9b17634f 100644
--- a/src/components/ButtonIcon/ButtonIcon.stories.js
+++ b/src/components/ButtonIcon/ButtonIcon.stories.js
@@ -33,3 +33,29 @@ export const Active = {
 		isActive: true,
 	},
 };
+
+export const Order = {
+	render: (args) => ({
+		components: {ButtonIcon},
+		setup() {
+			return {args};
+		},
+		template: `
+			<div class="flex inline-flex items-center items-justify gap-2">
+				<ButtonIcon v-for="icon in args.icons" v-bind="icon" />
+			</div>
+			`,
+	}),
+	args: {
+		icons: [
+			{
+				icon: 'ChevronUp',
+				ariaLabel: 'Move up',
+			},
+			{
+				icon: 'ChevronDown',
+				ariaLabel: 'Move down',
+			},
+		],
+	},
+};
diff --git a/src/components/ButtonIcon/ButtonIcon.vue b/src/components/ButtonIcon/ButtonIcon.vue
index ad1032ee8..f5e5928f8 100644
--- a/src/components/ButtonIcon/ButtonIcon.vue
+++ b/src/components/ButtonIcon/ButtonIcon.vue
@@ -1,6 +1,6 @@
 <template>
 	<button :class="styles" :aria-label="ariaLabel" :disabled="isDisabled">
-		<Icon class="h-5 w-5" :icon="icon" aria-hidden="true" />
+		<Icon class="h-6 w-6" :icon="icon" aria-hidden="true" />
 	</button>
 </template>
 
@@ -33,9 +33,9 @@ const props = defineProps({
 
 const styles = computed(() => ({
 	// Base
-	'inline-flex relative items-center justify-center text-lg-semibold rounded w-9 h-9': true,
+	'inline-flex relative items-center justify-center text-lg-semibold rounded w-6 h-6': true,
 	// Default
-	'text-primary bg-secondary': !props.isActive,
+	'text-primary': !props.isActive,
 	// Hover
 	'hover:text-on-dark hover:bg-hover': !props.isDisabled,
 	// Active