diff --git a/assets/icons/dark-mode/theme-auto.png b/assets/icons/dark-mode/theme-auto.png
new file mode 100644
index 0000000..33f416c
Binary files /dev/null and b/assets/icons/dark-mode/theme-auto.png differ
diff --git a/assets/icons/dark-mode/theme-auto.svg b/assets/icons/dark-mode/theme-auto.svg
new file mode 100644
index 0000000..cd9174c
--- /dev/null
+++ b/assets/icons/dark-mode/theme-auto.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <mask id="mask">
+        <rect x="0" y="0" width="50" height="100" fill="white" />
+    </mask>
+    <circle cx="50" cy="50" r="50" fill="white" mask="url(#mask)" />
+    <circle cx="50" cy="50" r="45" fill-opacity="0" stroke="white" stroke-width="10" />
+</svg>
diff --git a/assets/icons/dark-mode/theme-dark.png b/assets/icons/dark-mode/theme-dark.png
new file mode 100644
index 0000000..16d839c
Binary files /dev/null and b/assets/icons/dark-mode/theme-dark.png differ
diff --git a/assets/icons/dark-mode/theme-dark.svg b/assets/icons/dark-mode/theme-dark.svg
new file mode 100644
index 0000000..2d94dd1
--- /dev/null
+++ b/assets/icons/dark-mode/theme-dark.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <mask id="mask">
+        <rect x="0" y="0" width="100" height="100" fill="white" />
+        <circle cx="30" cy="50" r="35" fill="black" />
+    </mask>
+    <circle cx="50" cy="50" r="50" fill="white" mask="url(#mask)" />
+</svg>
diff --git a/assets/icons/dark-mode/theme-light.png b/assets/icons/dark-mode/theme-light.png
new file mode 100644
index 0000000..4061f9f
Binary files /dev/null and b/assets/icons/dark-mode/theme-light.png differ
diff --git a/assets/icons/dark-mode/theme-light.svg b/assets/icons/dark-mode/theme-light.svg
new file mode 100644
index 0000000..5194b69
--- /dev/null
+++ b/assets/icons/dark-mode/theme-light.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <circle cx="50" cy="50" r="25" fill="white" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="white" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(22.5 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(45 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(67.5 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(90 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(112.5 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(135 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(157.5 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(180 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(202.5 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(225 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(247.5 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(270 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(292.5 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(315 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="white" transform="rotate(337.5 50 50)" />
+</svg>
diff --git a/assets/icons/light-mode/theme-auto.png b/assets/icons/light-mode/theme-auto.png
new file mode 100644
index 0000000..3591a6b
Binary files /dev/null and b/assets/icons/light-mode/theme-auto.png differ
diff --git a/assets/icons/light-mode/theme-auto.svg b/assets/icons/light-mode/theme-auto.svg
new file mode 100644
index 0000000..aa0708e
--- /dev/null
+++ b/assets/icons/light-mode/theme-auto.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <mask id="mask">
+        <rect x="0" y="0" width="50" height="100" fill="white" />
+    </mask>
+    <circle cx="50" cy="50" r="50" fill="black" mask="url(#mask)" />
+    <circle cx="50" cy="50" r="45" fill-opacity="0" stroke="black" stroke-width="10" />
+</svg>
diff --git a/assets/icons/light-mode/theme-dark.png b/assets/icons/light-mode/theme-dark.png
new file mode 100644
index 0000000..158cb22
Binary files /dev/null and b/assets/icons/light-mode/theme-dark.png differ
diff --git a/assets/icons/light-mode/theme-dark.svg b/assets/icons/light-mode/theme-dark.svg
new file mode 100644
index 0000000..5d034fb
--- /dev/null
+++ b/assets/icons/light-mode/theme-dark.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <mask id="mask">
+        <rect x="0" y="0" width="100" height="100" fill="white" />
+        <circle cx="30" cy="50" r="35" fill="black" />
+    </mask>
+    <circle cx="50" cy="50" r="50" fill="black" mask="url(#mask)" />
+</svg>
diff --git a/assets/icons/light-mode/theme-light.png b/assets/icons/light-mode/theme-light.png
new file mode 100644
index 0000000..62f996a
Binary files /dev/null and b/assets/icons/light-mode/theme-light.png differ
diff --git a/assets/icons/light-mode/theme-light.svg b/assets/icons/light-mode/theme-light.svg
new file mode 100644
index 0000000..963bd95
--- /dev/null
+++ b/assets/icons/light-mode/theme-light.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <circle cx="50" cy="50" r="25" fill="black" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="black" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(22.5 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(45 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(67.5 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(90 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(112.5 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(135 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(157.5 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(180 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(202.5 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(225 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(247.5 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(270 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(292.5 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(315 50 50)" />
+    <rect x="47" y="2" width="6" height="15" rx="2" fill="black" transform="rotate(337.5 50 50)" />
+</svg>
diff --git a/assets/style/dark-mode.css b/assets/style/dark-mode.css
index 60b53ff..d39d031 100644
--- a/assets/style/dark-mode.css
+++ b/assets/style/dark-mode.css
@@ -60,9 +60,6 @@ body {
 .inline-code, .inline-code-text, .inline-code-icon {
     background-color: #212121;
 }
-object[type='image/svg+xml'] {
-    color: #212121;
-}
 
 .dark {
     display: initial !important;
diff --git a/assets/style/light-mode.css b/assets/style/light-mode.css
index 25ff0ec..139a2ed 100644
--- a/assets/style/light-mode.css
+++ b/assets/style/light-mode.css
@@ -60,9 +60,6 @@ body {
 .inline-code, .inline-code-text, .inline-code-icon {
     background-color: #EEE;
 }
-object[type='image/svg+xml'] {
-    color: #EEE;
-}
 
 .light {
     display: initial !important;
diff --git a/assets/style/main.css b/assets/style/main.css
index 8ac9a91..8accae1 100644
--- a/assets/style/main.css
+++ b/assets/style/main.css
@@ -92,6 +92,9 @@ a:hover {
     text-align: left;
     line-height: 1.5;
 }
+.theme-btn {
+    padding-left: 3px;
+}
 .theme-btn.selected {
     text-decoration: none;
     cursor: default;
diff --git a/inc/sidebar.inc b/inc/sidebar.inc
index 4ba1b92..4f366d6 100644
--- a/inc/sidebar.inc
+++ b/inc/sidebar.inc
@@ -12,7 +12,17 @@
                     ];
                 ?>
                 <?php foreach ($themes as $name=>$condition): ?>
-                    <a class="theme-btn <?= $condition ? "" : "selected" ?>" data-theme="<?= $name ?>" href="/api/set_theme/<?= $name ?>.php"><?= ucwords($name) . ($condition ? "" : " &#10003;") ?></a>
+                    <picture class="light">
+                        <source type="image/svg+xml" srcset="/assets/icons/light-mode/theme-<?= $name ?>.svg">
+                        <img class="icon" src="/assets/icons/theme-<?= $name ?>.png" alt="">
+                    </picture>
+                    <picture class="dark">
+                        <source type="image/svg+xml" srcset="/assets/icons/dark-mode/theme-<?= $name ?>.svg">
+                        <img class="icon" src="/assets/icons/theme-<?= $name ?>.png" alt="">
+                    </picture>
+                    <a class="theme-btn <?= $condition ? "" : "selected" ?>" data-theme="<?= $name ?>" href="/api/set_theme/<?= $name ?>.php">
+                        <?= ucwords($name) . ($condition ? "" : " &#10003;") ?>
+                    </a>
                     <br>
                 <?php endforeach; ?>
 			</div>