diff --git a/front/src/components/favorites/TrackFavoriteIcon.vue b/front/src/components/favorites/TrackFavoriteIcon.vue
index 6ebd199f0..570e420ea 100644
--- a/front/src/components/favorites/TrackFavoriteIcon.vue
+++ b/front/src/components/favorites/TrackFavoriteIcon.vue
@@ -6,6 +6,8 @@ import { useI18n } from 'vue-i18n'
 import { useStore } from '~/store'
 import { computed } from 'vue'
 
+import Button from '~/components/ui/Button.vue'
+
 interface Props {
   track?: QueueTrack | Track
   button?: boolean
@@ -29,19 +31,19 @@ const title = computed(() => isFavorite.value
 </script>
 
 <template>
-  <button
+  <Button
     v-if="button"
+    icon="bi-heart-fill"
     :class="['ui', 'pink', {'inverted': isFavorite}, {'favorited': isFavorite}, 'icon', 'labeled', 'button']"
     @click.stop="store.dispatch('favorites/toggle', track.id)"
   >
-    <i class="heart icon" />
     <span v-if="isFavorite">
       {{ t('components.favorites.TrackFavoriteIcon.label.inFavorites') }}
     </span>
     <span v-else>
       {{ t('components.favorites.TrackFavoriteIcon.button.add') }}
     </span>
-  </button>
+  </Button>
   <button
     v-else
     :class="['ui', 'favorite-icon', {'pink': isFavorite}, {'favorited': isFavorite}, 'basic', 'circular', 'icon', {'really': !border}, 'button']"
@@ -49,6 +51,6 @@ const title = computed(() => isFavorite.value
     :title="title"
     @click.stop="store.dispatch('favorites/toggle', track.id)"
   >
-    <i :class="['heart', {'pink': isFavorite}, 'basic', 'icon']" />
+    <i :class="['bi', 'bi-heart-fill', {'pink': isFavorite}, 'basic', 'icon']" />
   </button>
 </template>