diff --git a/src/lib/components/Envelope.svelte b/src/lib/components/Envelope.svelte
new file mode 100644
index 0000000..f80d6b8
--- /dev/null
+++ b/src/lib/components/Envelope.svelte
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <!--! Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc. -->
+  <path class="fill-current text-base-content"
+    d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z" />
+</svg>
diff --git a/src/lib/components/ObfuscatedEmail.svelte b/src/lib/components/ObfuscatedEmail.svelte
new file mode 100644
index 0000000..241396f
--- /dev/null
+++ b/src/lib/components/ObfuscatedEmail.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import Envelope from '$lib/components/Envelope.svelte'
+	export let mail: string;
+	export let clazz: string = '';
+	export let w: number = 24;
+	export let h: number = 24;
+</script>
+
+<div class={` ${clazz}`}>
+	<svg xmlns="http://www.w3.org/2000/svg" lang="en-GB" aria-labelledby="title" class="w-{w} h-{h}">
+		<title id="title">Send me a mail!</title>
+
+		<defs />
+
+		<a href="mailto:{mail}" target="_blank" rel="noreferrer" aria-label="Send me a mail!">
+			<rect class="fill-current text-transparent" width="100%" height="100%" />
+
+			<foreignObject x="0" y="0" width="100%" height="100%">
+				<div class="email-icon-wrapper">
+					<Envelope />
+				</div>
+			</foreignObject>
+		</a>
+	</svg>
+</div>
+
+<style lang="postcss">
+	.email-icon-wrapper {
+		@apply flex items-center justify-center w-full h-full;
+	}
+</style>