diff --git a/client/src/components/icons/BulbIcon.vue b/client/src/components/icons/BulbIcon.vue
index 3b65ac6f..effdd6c9 100644
--- a/client/src/components/icons/BulbIcon.vue
+++ b/client/src/components/icons/BulbIcon.vue
@@ -10,7 +10,7 @@
         cx="50"
         cy="50"
         r="50"
-        style="fill: #17a887"
+        class="background"
       />
       <path
         d="M57.96318,62.73515H41.99379A2.48236,2.48236,0,0,1,39.51288,60.34c-.06061-1.72061-.21515-2.61273-3.23576-5.60545a20.69086,20.69086,0,1,1,27.55152-.18485l-.27394.26848c-2.89273,2.86424-3.04424,3.76485-3.11091,5.52848A2.48231,2.48231,0,0,1,57.96318,62.73515ZM44.17652,57.7703H55.77409c.50667-2.1903,1.72788-3.94606,4.29636-6.48909l.317-.3103c.02364-.023.04727-.04545.07212-.06788a15.62483,15.62483,0,1,0-20.85788.14364c.03848.03333.07606.06848.11273.10424C42.38379,53.78848,43.65439,55.58424,44.17652,57.7703Z"
@@ -23,3 +23,11 @@
     </g>
   </svg>
 </template>
+
+<style scoped lang="scss">
+@import '@/styles/mixins';
+
+.background {
+  fill: $color-brand;
+}
+</style>
diff --git a/client/src/components/icons/DefaultAvatar.vue b/client/src/components/icons/DefaultAvatar.vue
index fda8c75c..64acc692 100644
--- a/client/src/components/icons/DefaultAvatar.vue
+++ b/client/src/components/icons/DefaultAvatar.vue
@@ -16,7 +16,7 @@
     </defs>
     <g id="bg">
       <circle
-        class="cls-2"
+        class="background"
         cx="200"
         cy="200"
         r="197"
@@ -25,7 +25,7 @@
     <g id="objects">
       <g class="cls-3">
         <path
-          class="cls-4"
+          class="shirt"
           d="M380.03229,346.82485l-99.89952-29.68554-75.91247-7.58045h-2.40707l-78.31955,7.58045-103.526,30.44984s75.62737,95.55272,183.04906,95.55272S380.03229,346.82485,380.03229,346.82485Z"
         />
         <path
@@ -33,7 +33,7 @@
           d="M272.15765,65.53589a86.01591,86.01591,0,0,0-20.524-14.33295,103.61294,103.61294,0,0,0-49.8204-11.92284,103.61271,103.61271,0,0,0-49.8198,11.92255A86.01706,86.01706,0,0,0,131.4688,65.53589c-47.89186,45.957-59.684,136.053-53.17653,195.51559,22.30221,28.20465,70.43168,35.98046,103.97675,29.59277-1.699-28.98109-18.28465-55.36789-18.09824-84.40807,16.82179-9.95623,9.42329-59.11938,10.702-81.59916l26.94039-6.97556,26.9404,6.97556c1.27875,22.47978-6.11974,71.64293,10.70211,81.59916.18642,29.04018-16.39928,55.427-18.09824,84.40807,33.545,6.38769,81.67447-1.38812,103.97668-29.59277C331.84167,201.58886,320.04951,111.49293,272.15765,65.53589Z"
         />
         <path
-          class="cls-6"
+          class="neck"
           d="M237.057,266.23162H166.56944c0,34.9025-27.34,45.73431-43.07576,50.90769,15.73577,67.03868,142.10688,67.03868,156.63909,0C260.78642,311.96593,241.52987,305.94826,237.057,266.23162Z"
         />
         <ellipse
@@ -60,21 +60,23 @@
   </svg>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+@import '@/styles/mixins';
+
 .cls-1 {
   fill: none;
 }
 
-.cls-2 {
-  fill: #d1eee7;
+.background {
+  fill: $color-brand-light;
 }
 
 .cls-3 {
   clip-path: url(#avatar-clip-path);
 }
 
-.cls-4 {
-  fill: #17a887;
+.shirt {
+  fill: $color-brand;
 }
 
 .cls-4,
@@ -88,8 +90,8 @@
   fill: #102d24;
 }
 
-.cls-6 {
-  fill: #e5f5f2;
+.neck {
+  fill: #ffffff;
 }
 
 .cls-7,
diff --git a/client/src/components/icons/Play.vue b/client/src/components/icons/Play.vue
index d2d0113f..23b09b3b 100644
--- a/client/src/components/icons/Play.vue
+++ b/client/src/components/icons/Play.vue
@@ -5,7 +5,15 @@
   >
     <path
       d="M50,0a50,50,0,1,0,50,50A50,50,0,0,0,50,0ZM38,74V26L70,50Z"
-      style="fill: #17a887"
+      class="background"
     />
   </svg>
 </template>
+
+<style scoped lang="scss">
+@import '@/styles/mixins';
+
+.background {
+  fill: $color-brand;
+}
+</style>