diff --git a/lib/classes/ResponsiveHelper.php b/lib/classes/ResponsiveHelper.php
index 713dd2b9ac43cfb80d3b99552c93bba170a18f01..b470eb07f43a58e45c713326e1b9d1fcfef66ad7 100644
--- a/lib/classes/ResponsiveHelper.php
+++ b/lib/classes/ResponsiveHelper.php
@@ -230,14 +230,12 @@ class ResponsiveHelper
             }
 
             $avatar = $avatarClass::getAvatar($course->id);
-            if ($avatar->is_customized()) {
-                $icon = $avatar->getURL(Avatar::SMALL);
-            } else {
-                $icon = $standardIcon;
-            }
+            $hasAvatar = $avatar->is_customized();
+            $icon = $hasAvatar ? $avatar->getURL(Avatar::SMALL) : $standardIcon;
 
             $cnav = [
                 'icon'     => $icon,
+                'avatar'   => $hasAvatar,
                 'title'    => $course->getFullname(),
                 'url'      => URLHelper::getURL($url, ['cid' => $course->id]),
                 'parent'   => 'browse/my_courses',
diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index eb0045de10c6ab947de227ce1a1151c69269defc..cbf2e75205942836e51dabb2c1c4561fb46d1c39 100644
--- a/resources/assets/stylesheets/scss/responsive.scss
+++ b/resources/assets/stylesheets/scss/responsive.scss
@@ -242,8 +242,11 @@ $sidebarOut: -330px;
 
         img,
         svg {
-            vertical-align: text-bottom;
+            &:not(.avatar) {
+                filter: contrast(0) brightness(2);
+            }
             margin-right: 10px;
+            vertical-align: text-bottom;
         }
 
     }
diff --git a/resources/vue/components/responsive/NavigationItem.vue b/resources/vue/components/responsive/NavigationItem.vue
index f98df5718991ecea4e6dc4be64944f5ed24b078c..5fb1452b22fd728befd60c494adacf71a3f32977 100644
--- a/resources/vue/components/responsive/NavigationItem.vue
+++ b/resources/vue/components/responsive/NavigationItem.vue
@@ -10,7 +10,7 @@
                 >
                     <span class="navigation-icon">
                         <studip-icon v-if="isCourse" shape="seminar" role="info_alt" :size="24" alt=""></studip-icon>
-                        <img v-if="item.icon" :src="iconUrl" width="24" alt="" />
+                        <img v-if="item.icon" :src="iconUrl" width="24" alt="" :class="{avatar: item.avatar}"/>
                     </span>
                     <span class="navigation-text">
                         {{ item.title }}
@@ -36,7 +36,7 @@
                 :aria-label="navigateToText(item.title)"
             >
                 <studip-icon v-if="isCourse" shape="seminar" role="info_alt" :size="24" alt=""></studip-icon>
-                <img v-if="item.icon" :src="iconUrl" width="24" alt="" />
+                <img v-if="item.icon" :src="iconUrl" width="24" alt="" :class="{avatar: item.avatar}"/>
                 {{ item.title }}
             </a>
         </div>