diff --git a/_includes/header.html b/_includes/header.html
index 64e92a3dec..2f41961945 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -242,9 +242,9 @@
     </ul>
   </div>
   <div class="header-right">
-    <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-      <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-      <span class="sun-icon hidden-light"></span>
+    <div id="theme-icon-container" class="theme-toggle default-theme button" title="toggle darkmode">
+      <span class="hidden-dark">{% include icons/moon.svg %}</span>
+      <span class="hidden-light">{% include icons/sun.svg %}</span>
     </div>
     {% include language-picker.html %}
     {% include language-picker-mobile.html %}
diff --git a/_includes/icons/moon.svg b/_includes/icons/moon.svg
new file mode 100644
index 0000000000..6a9a40d902
--- /dev/null
+++ b/_includes/icons/moon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
\ No newline at end of file
diff --git a/_includes/icons/sun.svg b/_includes/icons/sun.svg
new file mode 100644
index 0000000000..7c767a4693
--- /dev/null
+++ b/_includes/icons/sun.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg>
diff --git a/_includes/language-picker-mobile.html b/_includes/language-picker-mobile.html
index 1ebedc3b76..2644fd85c3 100644
--- a/_includes/language-picker-mobile.html
+++ b/_includes/language-picker-mobile.html
@@ -1,6 +1,6 @@
 <div id="mobile-menu">
   <div id="language-picker-button" class="button">
-    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6" width="24" height="24" style="margin-top: 5px;">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24">
       <path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802" />
     </svg>
   </div>
diff --git a/css/style.css b/css/style.css
index 08836c0df2..a3efcc9644 100644
--- a/css/style.css
+++ b/css/style.css
@@ -511,8 +511,8 @@ html[xmlns] .clearfix {
 }
 
 .button {
-  display: block;
-  padding: 3px 5px;
+  display: flex;
+  justify-content: center;
   border-radius: 3px;
   cursor: pointer;
   color: var(--box-fg);