make icons not cut off

src/lib/sections/about/Credits.svelte

@@ -37,12 +37,10 @@
 {/snippet}
 
 <Panel class="flex flex-col gap-8 p-6">
-	<h2 class="text-2xl font-bold">
-		<HeartHandshakeIcon
-			size="40"
-			class="inline-block -mt-1 mr-2 bg-blue-300 p-2 rounded-full"
-			color="black"
-		/>
+	<h2 class="text-2xl font-bold flex items-center">
+		<div class="rounded-full bg-blue-300 p-2 inline-block mr-3 w-10 h-10">
+			<HeartHandshakeIcon />
+		</div>
 		Credits
 	</h2>
 

src/lib/sections/about/Donate.svelte

@@ -25,12 +25,12 @@
 
 <Panel class="flex flex-col gap-8 p-6">
 	<div class="flex flex-col gap-3">
-		<h2 class="text-2xl font-bold">
-			<HeartIcon
-				size="40"
-				class="inline-block -mt-1 mr-2 bg-rose-300 p-2 rounded-full"
-				color="black"
-			/>
+		<h2 class="text-2xl font-bold flex items-center">
+			<div
+				class="rounded-full bg-rose-300 p-2 inline-block mr-3 w-10 h-10"
+			>
+				<HeartIcon color="black" />
+			</div>
 			Donate to VERT
 		</h2>
 		<p class="text-base font-normal">

src/lib/sections/about/Resources.svelte

@@ -4,12 +4,12 @@
 </script>
 
 <Panel class="flex flex-col gap-4 p-6">
-	<h2 class="text-2xl font-bold">
-		<LinkIcon
-			size="40"
-			class="inline-block -mt-1 mr-2 bg-violet-400 bg- p-2 rounded-full"
-			color="black"
-		/>
+	<h2 class="text-2xl font-bold flex items-center">
+		<div
+			class="rounded-full bg-violet-400 p-2 inline-block mr-3 w-10 h-10"
+		>
+			<LinkIcon />
+		</div>
 		Resources
 	</h2>
 	<div class="flex gap-3">

src/lib/sections/about/Why.svelte

@@ -4,12 +4,12 @@
 </script>
 
 <Panel class="flex flex-col gap-3 p-6">
-	<h2 class="text-2xl font-bold">
-		<MessageCircleQuestionIcon
-			size="40"
-			class="inline-block -mt-1 mr-2 bg-accent p-2 rounded-full"
-			color="black"
-		/>
+	<h2 class="text-2xl font-bold flex items-center">
+		<div
+			class="rounded-full bg-accent p-2 inline-block mr-3 w-10 h-10"
+		>
+			<MessageCircleQuestionIcon color="black" />
+		</div>
 		Why VERT?
 	</h2>
 	<p class="text-lg font-normal">