diff --git a/data/Indicator.css b/data/Indicator.css
index 49fe3e1..b333f7b 100644
--- a/data/Indicator.css
+++ b/data/Indicator.css
@@ -48,3 +48,11 @@ quicksettings .flat avatar {
     border: none;
     box-shadow: none;
 }
+
+quicksettings .color-scheme .toggle image {
+    transition: all 600ms cubic-bezier(0.66, 3, 0.64, 1);
+}
+
+quicksettings .color-scheme .toggle:checked image {
+    -gtk-icon-transform: rotate(180deg);
+}
diff --git a/data/icons/dark-mode.svg b/data/icons/dark-mode.svg
index 50f5a9c..b9e5e07 100644
--- a/data/icons/dark-mode.svg
+++ b/data/icons/dark-mode.svg
@@ -1,57 +1,2 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   height="16"
-   width="16"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.91 r13725"
-   sodipodi:docname="object-inverse-symbolic.svg">
-  <metadata
-     id="metadata14">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs12" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1017"
-     id="namedview10"
-     showgrid="false"
-     inkscape:zoom="1"
-     inkscape:cx="-58.060757"
-     inkscape:cy="75.229425"
-     inkscape:window-x="0"
-     inkscape:window-y="30"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg2" />
-  <path
-     inkscape:connector-curvature="0"
-     id="path8"
-     style="color:#bebebe;overflow:visible;fill:#666666;marker:none"
-     overflow="visible"
-     d="M 8,0 C 3.581719,0 3.4729399e-6,3.5817221 3.4729399e-6,8 3.4729399e-6,12.418278 3.581719,16 8,16 12.418281,16 15.999997,12.418278 15.999997,8 15.999997,3.5817221 12.418281,0 8,0 Z m 0,2 c 3.313711,0 5.999997,2.6862916 5.999997,6 0,3.313708 -2.686286,6 -5.999997,6 C 8,8.4168943 8,5.4999507 8,2 Z"
-     sodipodi:nodetypes="ssssscscc" />
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16" height="16" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m8 0a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8zm0 1a7 7 0 0 1 7 7 7 7 0 0 1-7 7v-3.5a3.5 3.5 0 0 1-3.5-3.5 3.5 3.5 0 0 1 3.5-3.5v-3.5zm0 3.5v7a3.5 3.5 0 0 0 3.5-3.5 3.5 3.5 0 0 0-3.5-3.5z" fill="#555761" stop-color="#000000" stroke-width="4.6285" style="-inkscape-stroke:none;font-variation-settings:normal"/></svg>
diff --git a/src/Widgets/DarkModeToggle.vala b/src/Widgets/DarkModeToggle.vala
index 68c311e..d58a548 100644
--- a/src/Widgets/DarkModeToggle.vala
+++ b/src/Widgets/DarkModeToggle.vala
@@ -13,6 +13,7 @@ public class QuickSettings.DarkModeToggle: SettingsToggle {
     construct {
         icon_name = "dark-mode-symbolic";
         settings_uri = "settings://desktop/appearance";
+        get_style_context ().add_class ("color-scheme");
 
         var settings = new GLib.Settings ("io.elementary.settings-daemon.prefers-color-scheme");