heart icon

Common uses

• Like/Unlike button
• Add to favorites
• User profile/status indicator

Use it in React

npm i @heroicons/react

import { HeartIcon } from '@heroicons/react/24/outline';

<HeartIcon className="size-6" />

Styles

Heroicons ships this icon in 4 styles — each its own import:

<HeartIcon className="size-6" />

<HeartIcon className="size-6" />

<HeartIcon className="size-6" />

<HeartIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

heartlikefavoriteloveheart shape

FAQ

What is the heart icon used for?

It's typically used for actions like liking content, marking items as favorites, or indicating a positive sentiment.

How do I use the heart icon in React?

You can import it directly from the Heroicons library like this: `import { HeartIcon } from '@heroicons/react/24/outline'`.

What is the license for Heroicons?

Heroicons are released under the MIT license, allowing for free use in both personal and commercial projects.

Related icons

The same idea in other libraries, and near matches in Heroicons.