diff --git a/_includes/mode-toggle.html b/_includes/mode-toggle.html
index 44759d6..e9f908c 100644
--- a/_includes/mode-toggle.html
+++ b/_includes/mode-toggle.html
@@ -7,8 +7,7 @@
   MIT License
 -->
 
-<i class="mode-toggle fas fa-sun" dark-mode-invisible></i>
-<i class="mode-toggle fas fa-moon" light-mode-invisible></i>
+<i class="mode-toggle fas fa-adjust"></i>
 
 <script type="text/javascript">
 
diff --git a/assets/css/_addon/main.scss b/assets/css/_addon/main.scss
index d4c09e9..82dc39c 100644
--- a/assets/css/_addon/main.scss
+++ b/assets/css/_addon/main.scss
@@ -12,23 +12,18 @@
 @import "_colors/light-typography";
 @import "_colors/dark-typography";
 
-@mixin set-visible($light-display, $dark-display) {
-  [light-mode-invisible] {
-    display: $light-display;
-  }
-
-  [dark-mode-invisible] {
-    display: $dark-display;
-  }
-}
 
 @mixin mode-toggle($dark-mode: false) {
   @if $dark-mode {
-    @include set-visible(inline-block, none);
     @include dark-scheme;
+    .mode-toggle {
+      transform: rotate(180deg);
+    }
   } @else {
-    @include set-visible(none, inline-block);
     @include light-scheme;
+    .mode-toggle {
+      transform: rotate(360deg);
+    }
   }
 }
 
@@ -191,12 +186,16 @@ $sidebar-display: "sidebar-display";
     #mode-toggle-wrapper {
       i {
         @include sidebar-links;
-        margin-right: 0;
+        margin: 0;
         font-size: 1.05rem;
         text-align: center;
         position: relative;
         bottom: 1px;
       }
+
+      .mode-toggle {
+        transition: all .5s !important;
+      }
     }
 
     .icon-border {