diff --git a/src/lib/components/ExternalLinkIcon.svelte b/src/lib/components/ExternalLinkIcon.svelte
deleted file mode 100644
index 40670a71f..000000000
--- a/src/lib/components/ExternalLinkIcon.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script lang="ts">
-  interface Props {
-    size?: string;
-  }
-
-  let { size = 'w-6 h-6' }: Props = $props();
-</script>
-
-<!-- See: https://flowbite.com/icons/ -->
-<svg
-  class="{size} text-primary-600 dark:text-gray-300"
-  aria-hidden="true"
-  xmlns="http://www.w3.org/2000/svg"
-  fill="none"
-  viewBox="0 0 18 18"
->
-  <path
-    stroke="currentColor"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    stroke-width="2"
-    d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"
-  />
-</svg>
diff --git a/src/lib/components/ExternalLinkWrapper.svelte b/src/lib/components/ExternalLinkWrapper.svelte
index 15739c8e9..58791bfd8 100644
--- a/src/lib/components/ExternalLinkWrapper.svelte
+++ b/src/lib/components/ExternalLinkWrapper.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import ExternalLinkIcon from '$lib/components/ExternalLinkIcon.svelte';
+  import { ExternalLink } from 'lucide-svelte';
 
   interface Props {
     url: string;
@@ -18,7 +18,7 @@
     textSize = '',
     textColorInDarkMode = 'dark:text-primary-500',
     textOverflow = '',
-    iconSize = 4,
+    iconSize = 20,
     ariaLabel = '',
     useInlineFlex = true,
   }: Props = $props();
@@ -36,7 +36,7 @@
   </span>
 
   <span class="ml-1.5">
-    <ExternalLinkIcon size={`w-${iconSize} h-${iconSize}`} />
+    <ExternalLink class="text-primary-600 dark:text-gray-300" size={iconSize} aria-hidden="true" />
   </span>
 </a>
 
diff --git a/src/routes/problems/[slug]/+page.svelte b/src/routes/problems/[slug]/+page.svelte
index cbae772d9..2e45d61e6 100644
--- a/src/routes/problems/[slug]/+page.svelte
+++ b/src/routes/problems/[slug]/+page.svelte
@@ -2,9 +2,9 @@
   import { enhance } from '$app/forms';
 
   import { Breadcrumb, BreadcrumbItem, Img } from 'svelte-5-ui-lib';
+  import { ExternalLink } from 'lucide-svelte';
 
   import SubmissionStatusButton from '$lib/components/SubmissionStatusButton.svelte';
-  import ExternalLinkIcon from '$lib/components/ExternalLinkIcon.svelte';
 
   import { getBackgroundColorFrom } from '$lib/services/submission_status';
 
@@ -51,7 +51,7 @@
         <div class="mr-2">
           {taskResult.title}
         </div>
-        <ExternalLinkIcon />
+        <ExternalLink />
       </h5>
     </div>
   </a>