diff --git a/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.scss b/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.scss
index b43ad6a6c..30add70c2 100644
--- a/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/action-buttons/video-rate.component.scss
@@ -10,4 +10,10 @@
 
 .activated {
   color: pvar(--fg) !important;
+
+  my-global-icon {
+    color: pvar(--active-icon-color) !important;
+
+    @include fill-svg-color(pvar(--active-icon-bg));
+  }
 }
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 402e841e2..c224bf931 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -69,7 +69,8 @@ body {
   --main-col-width: calc(100vw - #{$menu-width});
 
   --secondary-icon-color: #{pvar(--fg-50)};
-  --secondary-fg: #{pvar(--fg-50)};
+  --active-icon-color: #{pvar(--on-primary)};
+  --active-icon-bg: #{pvar(--primary)};
 
   --border-primary: #{pvar(--primary)};
 
@@ -136,6 +137,9 @@ body {
     --alert-primary-fg: #{pvar(--primary-650)};
     --alert-primary-bg: #{pvar(--primary-100)};
     --alert-primary-border-color: #{pvar(--primary-300)};
+
+    --active-icon-color: #{pvar(--fg-450)};
+    --active-icon-bg: #{pvar(--bg-secondary-600)};
   }
 
   & {
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index c32d619a5..e90f55941 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -117,6 +117,8 @@ $variables: (
   --support-btn-heart-bg: var(--support-btn-heart-bg),
 
   --secondary-icon-color: var(--secondary-icon-color),
+  --active-icon-color: var(--active-icon-color),
+  --active-icon-bg: var(--active-icon-bg),
 
   --fg-500: var(--fg-500),
   --fg-450: var(--fg-450),