The Phosphor list heart icon depicts a list with a heart, commonly used to represent features like wishlists, favorites, or liked items within an application.
Common uses
- Adding an item to a wishlist
- Marking a product as a favorite
- Indicating a liked post or comment
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { ListHeart } from '@phosphor-icons/react';
<ListHeart size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<ListHeart size={24} />thin
<ListHeart size={24} weight="thin" />light
<ListHeart size={24} weight="light" />bold
<ListHeart size={24} weight="bold" />fill
<ListHeart size={24} weight="fill" />duotone
<ListHeart size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- editor
- Keywords
- *new*favoriteswishlistlikededitorsystemlistheartliked listsave
FAQ
- What is the list heart icon used for?
- It's typically used to signify user-selected items such as favorites, wishlists, or liked content.
- How do I use the list heart icon in React?
- Import it as `ListHeart` from '@phosphor-icons/react' and use it as a component: `<ListHeart />`.
- What is the license for the Phosphor list heart icon?
- The Phosphor icon library, including the list heart icon, is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Phosphor.
Looking for something else? Search Phosphor and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →