Heart Icons

The near-universal convention is outline for unliked and filled (often in red or pink) for liked — this pattern is so widely recognized from apps like Instagram and Twitter/X that deviating from it can genuinely confuse users about whether something is currently liked or not.

A small scale or bounce animation on click is a common pattern that adds satisfying feedback to a like action, typically done with a CSS transition or keyframe animation triggered on state change, rather than the icon itself being animated by default.

Visually they're often the same shape, and the distinction comes entirely from context and placement — a heart on a social post typically means 'like', while the same heart on a product page usually means 'add to wishlist' or 'save for later'. Since the shape is identical, make sure the surrounding UI makes the specific action clear.

This depends on your product — red or pink is the strongest, most immediately recognizable convention for 'liked', but some products intentionally use their own brand color for the filled state to stay visually consistent with the rest of their UI. If you deviate from red/pink, make sure the outline-to-filled contrast is still clear enough to signal state change.

Each icon keeps the license from its source library attached to it, and terms can differ depending on which library a specific icon comes from. Check the license shown on the individual icon's page before using it commercially.

Both are common, but heart tends to imply a more personal or emotional connection (liking a post, saving a product you love), while star more often implies a rating or a neutral 'bookmark this for later' action (favoriting an app, starring a repository). Pick based on which framing fits your feature's intent.