diff --git a/src/components/PageFooter.astro b/src/components/PageFooter.astro
index 56c8d6e..b76fd2a 100644
--- a/src/components/PageFooter.astro
+++ b/src/components/PageFooter.astro
@@ -1,9 +1,8 @@
 ---
 import Legal from './Legal.astro';
 import RSSLink from './RSSLink.astro';
-import SocialLinks from './SocialLinks.astro';
 import Subnavigation from './Subnavigation.astro';
-import { UpLink } from '.';
+import { UpLink, SocialLinks } from '.';
 ---
 
 <footer
diff --git a/src/components/SocialLinks.astro b/src/components/SocialLinks.astro
deleted file mode 100644
index 2f48021..0000000
--- a/src/components/SocialLinks.astro
+++ /dev/null
@@ -1,23 +0,0 @@
----
-import { Sprite } from 'astro-icon';
-
-import { Link } from '.';
-
-import data from '../data/social-links.json';
----
-
-<nav class="flex flex-1 sm:justify-center" aria-label="Social Links">
-	{
-		data.map(({ text, url, icon, props = {} }) => (
-			<Link
-				aria-label={text}
-				class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center"
-				href={url}
-				title={text}
-				{...props}
-			>
-				<Sprite name={icon} class="h-icon-small w-icon-small" />
-			</Link>
-		))
-	}
-</nav>
diff --git a/src/components/SocialLinks.tsx b/src/components/SocialLinks.tsx
new file mode 100644
index 0000000..2a0a89c
--- /dev/null
+++ b/src/components/SocialLinks.tsx
@@ -0,0 +1,39 @@
+import type { FunctionalComponent, JSX } from 'preact';
+import type { SVGProps } from 'preact/compat';
+
+import { Link } from '.';
+import { Github, Instagram, Mail, TwitterX } from './icons';
+
+import data from '../data/social-links.json';
+
+type IconComponent = FunctionalComponent<SVGProps<SVGSVGElement>>;
+type IconMap = { [key: string]: IconComponent };
+
+const renderIcon = (iconName: string): JSX.Element => {
+	const iconMap: IconMap = {
+		mail: Mail,
+		twitter: TwitterX,
+		github: Github,
+		instagram: Instagram,
+	};
+
+	const IconComponent = iconMap[iconName];
+	return <IconComponent class="icon h-icon-small w-icon-small" />;
+};
+
+export const SocialLinks: FunctionalComponent = () => (
+	<nav class="flex flex-1 sm:justify-center" aria-label="Social Links">
+		{data.map((item, index) => (
+			<Link
+				aria-label={item.text}
+				class="flex h-clickarea w-clickarea cursor-pointer items-center justify-center"
+				href={item.url}
+				key={index}
+				title={item.text}
+				{...(item.props ? item.props : {})}
+			>
+				{renderIcon(item.icon)}
+			</Link>
+		))}
+	</nav>
+);
diff --git a/src/components/index.ts b/src/components/index.ts
index 2e42484..07b8ec7 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -25,6 +25,7 @@ export * from './OrderedList';
 export * from './PrimeVideoFlag';
 export * from './ProjectIntro';
 export * from './Pullquote';
+export * from './SocialLinks';
 export * from './Spotify';
 export * from './Subheadline';
 export * from './Subsubheadline';
diff --git a/src/data/social-links.json b/src/data/social-links.json
index fb66a42..07720ab 100644
--- a/src/data/social-links.json
+++ b/src/data/social-links.json
@@ -2,7 +2,7 @@
 	{
 		"text": "Mail",
 		"url": "#protected-email",
-		"icon": "ri:mail-line",
+		"icon": "mail",
 		"props": {
 			"data-domain": "stefanimhoff",
 			"data-name": "hey",
@@ -13,16 +13,16 @@
 	{
 		"text": "Twitter",
 		"url": "https://twitter.com/kogakure",
-		"icon": "ri:twitter-line"
+		"icon": "twitter"
 	},
 	{
 		"text": "Instagram",
 		"url": "https://instagram.com/kogakure",
-		"icon": "ri:instagram-line"
+		"icon": "instagram"
 	},
 	{
 		"text": "GitHub",
 		"url": "https://github.com/kogakure",
-		"icon": "ri:github-line"
+		"icon": "github"
 	}
 ]