diff --git a/components/icons/MailIcon.tsx b/components/icons/MailIcon.tsx
new file mode 100644
index 0000000..85db943
--- /dev/null
+++ b/components/icons/MailIcon.tsx
@@ -0,0 +1,12 @@
+import {Props} from '@/types'
+
+export function MailIcon(props: Props) {
+    return (
+        <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
+            <path
+                fillRule="evenodd"
+                d="M6 5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H6Zm.245 2.187a.75.75 0 0 0-.99 1.126l6.25 5.5a.75.75 0 0 0 .99 0l6.25-5.5a.75.75 0 0 0-.99-1.126L12 12.251 6.245 7.187Z"
+            />
+        </svg>
+    )
+}
\ No newline at end of file
diff --git a/pages/about.tsx b/pages/about.tsx
index 213485e..4515ed3 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -10,7 +10,7 @@ import {
     LinkedInIcon,
     TwitterIcon
 } from '@/components/icons/SocialIcons'
-import {Props} from 'types'
+import {MailIcon} from '@/components/icons/MailIcon'
 import photoOfMe from '@/public/static/images/photo-of-me.jpg'
 import awsCCPBadge from '@/public/static/images/aws-certified-cloud-practitioner-badge.png'
 
@@ -39,17 +39,6 @@ function SocialLink({
     )
 }
 
-function MailIcon(props: Props) {
-    return (
-        <svg viewBox="0 0 24 24" aria-hidden="true" {...props}>
-            <path
-                fillRule="evenodd"
-                d="M6 5a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H6Zm.245 2.187a.75.75 0 0 0-.99 1.126l6.25 5.5a.75.75 0 0 0 .99 0l6.25-5.5a.75.75 0 0 0-.99-1.126L12 12.251 6.245 7.187Z"
-            />
-        </svg>
-    )
-}
-
 export default function About() {
     return (
         <>