diff --git a/front/src/components/favorites/TrackFavoriteIcon.vue b/front/src/components/favorites/TrackFavoriteIcon.vue
index dbad609b5..970cc7888 100644
--- a/front/src/components/favorites/TrackFavoriteIcon.vue
+++ b/front/src/components/favorites/TrackFavoriteIcon.vue
@@ -35,7 +35,7 @@ const title = computed(() => isFavorite.value
 <template>
   <Button
     v-if="button"
-    icon="bi-heart-fill"
+    :icon="isFavorite ? 'bi-heart-fill' : 'bi-heart'"
     :class="['ui', 'pink', {'inverted': isFavorite}, {'favorited': isFavorite}, 'icon', 'labeled', 'button']"
     @click.stop="store.dispatch('favorites/toggle', track.id)"
   >
@@ -50,7 +50,7 @@ const title = computed(() => isFavorite.value
     v-else
     :ghost="ghost"
     :secondary="!ghost"
-    icon="bi-heart-fill"
+    :icon="isFavorite ? 'bi-heart-fill' : 'bi-heart'"
     :class="['ui', 'favorite-icon', {'pink': isFavorite}, {'favorited': isFavorite}, 'basic', 'circular', 'icon', {'really': !border}, 'button']"
     :aria-label="title"
     :title="title"