diff --git a/icons/ic_autorenew_black_24px.svg b/icons/ic_autorenew_black_24px.svg
index 7bc2949..1b31616 100644
--- a/icons/ic_autorenew_black_24px.svg
+++ b/icons/ic_autorenew_black_24px.svg
@@ -1,4 +1,11 @@
-<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
\ No newline at end of file
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+</style>
+<path d="M20,7.5v10c0,1.4-1.1,2.5-2.5,2.5H12v3l-4-4l4-4v3h5.5c0.3,0,0.5-0.2,0.5-0.5v-10H20z M16,5l-4-4v3H6.5C5.1,4,4,5.1,4,6.5
+	v10h2v-10C6,6.2,6.2,6,6.5,6H12v3L16,5z"/>
+<path class="st0" d="M0,0h24v24H0V0z"/>
+</svg>
diff --git a/js/content_script.js b/js/content_script.js
index 871528c..377bc9f 100644
--- a/js/content_script.js
+++ b/js/content_script.js
@@ -2,7 +2,7 @@ function getYouLoopSVG() {
   const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
   svg.setAttribute('viewBox', '0 0 24 24');
   const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-  path.setAttribute('d', 'M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z');
+  path.setAttribute('d', 'M20,7.5v10c0,1.4-1.1,2.5-2.5,2.5H12v3l-4-4l4-4v3h5.5c0.3,0,0.5-0.2,0.5-0.5v-10H20z M16,5l-4-4v3H6.5C5.1,4,4,5.1,4,6.5v10h2v-10C6,6.2,6.2,6,6.5,6H12v3L16,5z');
   svg.appendChild(path);
   return svg;
 }
@@ -27,6 +27,7 @@ function insertYouLoopElement() {
   const newButton = document.createElement('a');
   newButton.classList.add('ytp-button', 'youloop-button');
   newButton.title = 'Loop Video';
+  newButton.style.opacity = '0.35'; // set opacity to 35% by default
   newButton.appendChild(getYouLoopSVG());
   newButton.addEventListener('click', toggleLoopState);
 
@@ -35,8 +36,15 @@ function insertYouLoopElement() {
 
 function toggleLoopState() {
   const video = document.querySelector('video');
-  video.loop = !video.loop;
-  if (video.loop) video.play();
+  const youloop = document.querySelector('.youloop-button');
+  if (youloop.style.opacity === '0.35') {
+    youloop.style.opacity = '0.8'; // set opacity to 80% when clicked
+    video.loop = true;
+    video.play();
+  } else {
+    youloop.style.opacity = '0.35'; // set opacity to 35% when clicked again
+    video.loop = false;
+  }
 
   updateToggleControls();
 }
diff --git a/styles/youloop.css b/styles/youloop.css
index faa06e5..0a2ad5e 100644
--- a/styles/youloop.css
+++ b/styles/youloop.css
@@ -11,6 +11,5 @@ a.youloop-button svg {
 }
 
 a.youloop-button.active svg {
-  fill: #f12b24;
   transform: rotate(90deg);
 }