diff --git a/web/src/components/donate/DonateOptionsCard.svelte b/web/src/components/donate/DonateOptionsCard.svelte
index dcd1d03c..ab8173cc 100644
--- a/web/src/components/donate/DonateOptionsCard.svelte
+++ b/web/src/components/donate/DonateOptionsCard.svelte
@@ -176,14 +176,13 @@
                 showRightScroll = currentPos < maxPos && currentPos !== maxPos;
             }}
         >
-            {#each Object.entries(PRESET_DONATION_AMOUNTS) as [amount, component]}
+            {#each Object.entries(PRESET_DONATION_AMOUNTS) as [amount, icon]}
                 <DonationOption
                     price={+amount}
                     desc={$t(`donate.card.option.${amount}`)}
                     href={donationMethods[processor](+amount * 100)}
-                >
-                    <svelte:component this={component} />
-                </DonationOption>
+                    {icon}
+                />
             {/each}
         </div>
     </div>
diff --git a/web/src/components/donate/DonationOption.svelte b/web/src/components/donate/DonationOption.svelte
index 7e5ca917..1c8fb5a3 100644
--- a/web/src/components/donate/DonationOption.svelte
+++ b/web/src/components/donate/DonationOption.svelte
@@ -2,6 +2,7 @@
     export let price: number;
     export let desc: string;
     export let href: string;
+    export let icon: ConstructorOfATypedSvelteComponent;
 
     const USD = new Intl.NumberFormat("en-US", {
         style: "currency",
@@ -17,7 +18,7 @@
     }}
 >
     <div class="donate-card-title">
-        <slot></slot>
+        <svelte:component this={icon} />
         {USD.format(price)}
     </div>
     <div class="donate-card-subtitle">{desc}</div>