diff --git a/web/src/components/save/buttons/ClearButton.svelte b/web/src/components/save/buttons/ClearButton.svelte
index 9962aa1b..4847a95a 100644
--- a/web/src/components/save/buttons/ClearButton.svelte
+++ b/web/src/components/save/buttons/ClearButton.svelte
@@ -1,12 +1,16 @@
 <script>
     import { t } from "$lib/i18n/translations";
-    import IconX from '@tabler/icons-svelte/IconX.svelte';
+    import IconX from "@tabler/icons-svelte/IconX.svelte";
 
     export let click;
 </script>
 
-<button id="clear-button" on:click={click} aria-label={$t("a11y.save.clearInput")}>
-    <IconX color="var(--secondary)" size="16px"/>
+<button
+    id="clear-button"
+    on:click={click}
+    aria-label={$t("a11y.save.clearInput")}
+>
+    <IconX />
 </button>
 
 <style>
@@ -14,4 +18,12 @@
         padding: 3px;
         border-radius: 100%;
     }
+
+    #clear-button :global(svg) {
+        width: 16px;
+        height: 16px;
+        stroke-width: 2px;
+        stroke: var(--secondary);
+        will-change: transform;
+    }
 </style>