From 15a28bac15169437341ed290a2584cfcabb43578 Mon Sep 17 00:00:00 2001
From: Seth Falco <seth@falco.fun>
Date: Sun, 2 Aug 2026 21:07:41 +0100
Subject: [PATCH] fix(a11y): size external link icon based on browser/OS
 font-size

When the client is configured to use a different font-size than the default
(i.e. on the OS or in browser settings) the external link icon became
disproportionately sized relative to the text. This converts the hardcodes pixel
values to rem.
---
 .../src/theme/Icon/ExternalLink/index.tsx                     | 4 ++--
 .../src/theme/NavbarItem/NavbarNavLink.tsx                    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/Icon/ExternalLink/index.tsx b/packages/docusaurus-theme-classic/src/theme/Icon/ExternalLink/index.tsx
index b899a1fee742..817f33224084 100644
--- a/packages/docusaurus-theme-classic/src/theme/Icon/ExternalLink/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Icon/ExternalLink/index.tsx
@@ -16,8 +16,8 @@ import styles from './styles.module.css';
 const svgSprite = '#theme-svg-external-link';
 
 export default function IconExternalLink({
-  width = 13.5,
-  height = 13.5,
+  width = '0.84375rem',
+  height = '0.84375rem',
 }: Props): ReactNode {
   return (
     <svg
diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/NavbarNavLink.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/NavbarNavLink.tsx
index 52e198d33b81..485c1e86c06a 100644
--- a/packages/docusaurus-theme-classic/src/theme/NavbarItem/NavbarNavLink.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/NavbarItem/NavbarNavLink.tsx
@@ -40,7 +40,7 @@ export default function NavbarNavLink({
             {label}
             {isExternalLink && (
               <IconExternalLink
-                {...(isDropdownLink && {width: 12, height: 12})}
+                {...(isDropdownLink && {width: '0.75rem', height: '0.75rem'})}
               />
             )}
           </>