diff --git a/web/src/components/atomic/IconButton.vue b/web/src/components/atomic/IconButton.vue
index 09094d9ae..ca77af4ac 100644
--- a/web/src/components/atomic/IconButton.vue
+++ b/web/src/components/atomic/IconButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <router-link v-if="to" :to="to" :title="title" :aria-label="title" class="icon-button">
+  <router-link v-if="to" :to="to" :title="title" :aria-label="title" class="w-4 icon-button">
     <slot>
       <Icon v-if="icon" :name="icon" />
     </slot>
@@ -21,7 +21,7 @@
     <slot>
       <Icon v-if="icon" :name="icon" />
     </slot>
-    <div v-if="isLoading" class="absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center">
+    <div v-if="isLoading" class="top-0 right-0 bottom-0 left-0 absolute flex justify-center items-center">
       <Icon name="loading" class="animate-spin" />
     </div>
   </button>
@@ -44,6 +44,6 @@ defineProps<{
 
 <style scoped>
 .icon-button {
-  @apply relative flex items-center justify-center px-1 py-1 rounded-md bg-transparent hover-effect overflow-hidden disabled:opacity-50 disabled:cursor-not-allowed;
+  @apply relative flex justify-center items-center bg-transparent disabled:opacity-50 px-1 py-1 rounded-md disabled:cursor-not-allowed overflow-hidden hover-effect;
 }
 </style>