Similar to Stefan's most intuitive delete icon question.

I'm designing a web app that allows users favorite pages. A lot of big sites use either a heart or star symbol -Which one is most intuitive?

enter image description here

7 Answers 7


Oh you really nailed it with this question. So, I could say the star is better because Google uses it for "starring" in all of its products (think Gmail, Google Bookmarks, search results, etc). But at the same time, Amazon uses it for ratings and so do dozens of other web properties. So when you see a single star, what does that suggest to you?

Then there's the heart, which can be construed as an "I like this" button. But liking isn't the same as favoriting something. And then in games, hearts are used for life (like in Zelda games). So there can be some confusion there if your app is in that space.

Basically there are arguments for and against both. If you do implement them, remember to implement "transparent" ones that aren't coloured until you click them. That way users who do interact with these buttons can easily tell when they have or haven't already interacted with a certain item. Look at how Gmail works for the most common and intuitive design pattern for stars. Slideshare does the same thing with Favorite.

My preference? Always add a label to an icon where possible. That way there's no possibility for confusion. If you can't put a label here, try a title attribute to give some extra information when possible. So "{Star} Favorite". And remember: Facebook uses the word "Like" instead of an icon for a reason. ;-)


The heart can mistaken for "Like" and the star can be mistaken for rating. Usually it's better to have a word next to icons (at least on the main view / page).

soundcloud.com does it like that: On their page it says "save to favorites" next to the heart (or "remove from favorites" when already added). On their apps (Mac OS and iOS) they only use the heart icon.

Take a look at this two articles for additional reading:

Hope that helps, Phil

  • Great points Phil.
    – jonshariat
    Commented May 12, 2011 at 23:01
  • If your user has to wait for a tool tip, the icon isn't working. Commented May 19, 2011 at 0:40

I've noticed that the "heart" icon tends to be more social-oriented (ie, "Daniel Hellier liked this"). I guess the idea is if you love something, you'll want to tell everyone. Grooveshark uses it for songs that you like on your profile and BitBucket uses it show users and repositories that you're following.

The "star" tends to be more private (ie, bookmarks, starred Gmail conversations, etc).


I would choose the star.

Firefox, Chrome and IE all use the star symbol for bookmarks/favourites and as you are replicating that functionality to an extent (albeit at an App rather than Browser level) then sticking with the norm should be the way to go.


Both work well but a heart can make the app seem more geared towards women. Google seems to love stars for favorite-ing things as well. A heart can be a nice touch if it compliments a smaller group. I would also suggest using a pin.

  • 2
    Can you back up your statement about women with some research?
    – Rahul
    Commented May 12, 2011 at 23:01
  • 1
    No, just personal experience. I think better answers have been posted. I just wanted to chime in since you HAD no answers :)
    – jonshariat
    Commented May 12, 2011 at 23:14

Definitely not a thumbs up. The facebook 'like' thumbs up has established it as an icon that you click and forget.

A star is better because it connotes 'special' and 'valuable'. A heart icon doesn't carry the 'valuable' property.


I would choose a star. How many users would confuse one star for a rating? Has anyone ever seen a rating system with just one star?

  • 2
    You can assign any number of stars to Product X, as long as it is 1.
    – kinokijuf
    Commented Jan 8, 2012 at 9:56

Not the answer you're looking for? Browse other questions tagged or ask your own question.