diff --git a/src/css/custom.scss b/src/css/custom.scss
index b804d6b7..066b0e28 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -139,6 +139,20 @@ article {
     .markdown-body a:hover::before {
       width: 100%;
     }
+
+    .a-icon {
+      display: none;
+    }
+
+    p > span {
+      > .a-icon {
+        display: block;
+      }
+
+      > a {
+        line-height: 1.5rem;
+      }
+    }
   }
 }
 
diff --git a/src/theme/MDXComponents/A.tsx b/src/theme/MDXComponents/A.tsx
new file mode 100644
index 00000000..de07f15d
--- /dev/null
+++ b/src/theme/MDXComponents/A.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import Link from '@docusaurus/Link'
+import type { Props } from '@theme/MDXComponents/A'
+
+import { Icon } from '@iconify/react'
+
+export default function MDXA(props: Props): JSX.Element {
+  const href = props.href
+
+  if (!href) return <Link {...props} />
+
+  const iconMappings = {
+    'github.com': 'simple-icons:github',
+    'twitter.com': 'logos:twitter',
+  }
+
+  const foundKey = Object.keys(iconMappings).find(key => {
+    const prefixRegex = new RegExp(`^https?://${key}`)
+    return prefixRegex.test(href)
+  })
+
+  const icon = foundKey ? iconMappings[foundKey] : null
+
+  if (icon) {
+    return (
+      <span style={{ display: 'inline-flex', gap: '0.25rem' }}>
+        {icon && (
+          <Icon
+            className="a-icon"
+            style={{ alignSelf: 'center' }}
+            icon={icon}
+            width={16}
+            height={16}
+          ></Icon>
+        )}
+        <Link {...props} />
+      </span>
+    )
+  }
+
+  return <Link {...props} />
+}