diff --git a/index.html b/index.html
index 9dae370..9813947 100644
--- a/index.html
+++ b/index.html
@@ -18,11 +18,24 @@
 
 <div id="toggle-wrapper">
   <a id="toggle" class="neutral" href="" title="Switch between HTTP and HTTPS.">
-    <span class="http">HTTP</span>
+    <span class="http">
+      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"
+        opacity="0.5">
+        <path
+          d="M4.47 21h15.06c1.54 0 2.5-1.67 1.73-3L13.73 4.99c-.77-1.33-2.69-1.33-3.46 0L2.74 18c-.77 1.33.19 3 1.73 3zM12 14c-.55 0-1-.45-1-1v-2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1zm1 4h-2v-2h2v2z" />
+      </svg>HTTP
+    </span>
     <div class="switch">
       <div class="knob"></div>
     </div>
-    <span class="https">HTTPS</span>
+    <span class="https">
+      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"
+        opacity="0.5">
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path
+          d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" />
+      </svg>HTTPS
+    </span>
   </a>
 </div>
 
diff --git a/style.css b/style.css
index 8bbbf85..785a746 100644
--- a/style.css
+++ b/style.css
@@ -91,22 +91,8 @@ table td:first-child {
   color: rgba(0, 0, 0, 0.5);
 }
 
-#toggle.http:not(:hover) .http {
-  color: #DB4437;
-}
-
-#toggle.https:not(:hover) .https {
-  color: #1AC222;
-}
-
-#toggle.http:hover .https {
-  text-decoration: underline;
-  color: #1AC222;
-}
-
-#toggle.https:hover .http {
-  text-decoration: underline;
-  color: #DB4437;
+#toggle svg {
+  transform: translateY(2px);
 }
 
 a#toggle:hover {
@@ -149,28 +135,46 @@ a#toggle:hover {
   transition: transform 0s;
 }
 
-.http:not(:hover)  .switch,
-.https:hover       .switch
-{
-  background-color: rgba(219, 68, 55, 0.26);
-}
-
-.http:not(:hover)  .switch .knob,
-.https:hover       .switch .knob
-{
+#toggle.http .knob {
   background-color: rgb(219, 68, 55);
   transform: translateX(0px);
 }
 
-.http:hover        .switch,
-.https:not(:hover) .switch
-{
-  background-color: rgba(29, 194, 34, 0.5);
-}
-
-.http:hover        .switch .knob,
-.https:not(:hover) .switch .knob
-{
+#toggle.https .knob {
   background-color: rgb(29, 194, 34);
   transform: translateX(20px);
 }
+
+#toggle.http .http {
+  color: #db4437;
+}
+
+#toggle.https .https {
+  color: #1ac222;
+}
+
+#toggle.http .http svg {
+  fill: #db4437;
+  opacity: 1;
+}
+#toggle.http .https svg {
+  fill: #000000;
+  opacity: 0.5;
+}
+
+#toggle.https .https svg {
+  fill: #1ac222;
+  opacity: 1;
+}
+#toggle.https .http svg {
+  fill: #000000;
+  opacity: 0.5;
+}
+
+.http .switch {
+  background-color: rgba(219, 68, 55, 0.26);
+}
+
+.https .switch {
+  background-color: rgba(29, 194, 34, 0.5);
+}