Mobile favorite button UI examples

Favorite button UI examples

• See the flow
  Zalando – Online fashion↗

  Each card includes a heart icon in the top right corner for wishlisting, with one heart already filled in red.

• See the flow
  Deezer: Music Player, Podcast↗

  Some artists are selected, indicated by a purple heart icon overlaying their image and a purple border.

• See the flow
  Deezer: Music Player, Podcast↗

  The main content area is a vertical list of tracks, each showing album art, a verified checkmark, song title, artist name, a heart icon, and a three-dot menu.

• See the flow
  IDAGIO Stream Classical Music↗

  The background shows a blurred, grayscale portrait of a musician with a 'Add to Collection' heart icon button.

• See the flow
  Yelp: Food, Services & Reviews↗

  Below this, a 'Recently viewed' section lists five businesses with their names, addresses, and bookmark icons.

• See the flow
  ThemeKit: Widget & Icon Themes↗

  The top of the screen includes a close button, a heart icon, and a share icon.

• See the flow
  Vivino: Drink The Right Wine↗

  The card includes a shopping cart button, a personal rating of 5.0, a comment count of 2, a bookmark icon, and an options menu.

• See the flow
  Litres: Audio↗

  Top header with title and filters, followed by a scrollable list of podcast cards, and a fixed bottom navigation bar.

• See the flow
  Hotels.com: Book hotels & more↗

  Top search summary, followed by horizontal category filters, destination highlights, and a vertical list of hotel property cards.

• See the flow
  HelloBot - Astrology & Tarot↗

  Each card includes a thumbnail image, a title, the creator's name, a star rating, view count, a percentage indicator, and a heart icon with a count.

• See the flow
  calimoto Motorcycle Navigation↗

  The top navigation bar contains a 'Done' button, a thumbs-up icon, a bookmark icon, and a three-dot menu icon.

• See the flow
  Litres: Audio↗

  Each list item includes a book cover image, title, author, narrator, an 'Audio' tag, a star rating with review count, a heart icon for favorites, and a three-dot menu icon.

• See the flow
  Fishbox - Smart Fishing App↗

  The main content area begins with two large, side-by-side cards labeled 'Favorite' (with a heart icon) and 'Top rated' (with a star icon).

• See the flow
  Zumba - Dance Fitness Workout↗

  The central area features a circular profile photo of the instructor, Desserie Bergado, with a 'Saved' heart icon next to her name.

• See the flow
  Scroll The Bible↗

  At the top, a navigation bar contains a grid icon, a heart icon, a 'KJV' version selector, a bookmark icon, and a dropdown menu for 'Psalms 83'.

• See the flow
  Scroll The Bible↗

  The background shows a minimalist reading interface with a crown of thorns icon, a 'KJV' version selector, a bookmark icon, and a chapter selector for 'Psalms 83'.

• See the flow
  Scroll The Bible↗

  The background interface features a top navigation bar with a dice icon, a heart icon, a 'KJV' version selector, a bookmark icon, and a dropdown menu for 'Psalms 83'.

• See the flow
  Fishbox - Smart Fishing App↗

  At the top, a navigation bar includes a back button, the title 'Orvis tippet knot', and a heart icon for favoriting.

• See the flow
  Zumba - Dance Fitness Workout↗

  At the top, a header includes the title 'Zumba Virtual+' and a bookmark icon.

• See the flow
  Pick Up Limes↗

  The top section features a hero image of the soup, a back button, and a heart icon for favoriting.