Skip to content
shadcn.io

Heart

The heart icon represents love, affection, and romance.

Add shadcn.io to your AI agent. · Pro It installs Heart, or any of 294k icons, from a prompt, with Pro.

Set up MCP

Exports at 24 × 24 px

Heart icon from Font Awesome 5 Regular

Code

Heart in your framework

In any framework. Customize it above, and the code follows.

export const HeartIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512" {...props}>
    <path fill="currentColor" d="M458.4 64.3C400.6 15.7 311.3 23 256 79.3C200.7 23 111.4 15.6 53.6 64.3C-21.6 127.6-10.6 230.8 43 285.5l175.4 178.7c10 10.2 23.4 15.9 37.6 15.9c14.3 0 27.6-5.6 37.6-15.8L469 285.6c53.5-54.7 64.7-157.9-10.6-221.3m-23.6 187.5L259.4 430.5c-2.4 2.4-4.4 2.4-6.8 0L77.2 251.8c-36.5-37.2-43.9-107.6 7.3-150.7c38.9-32.7 98.9-27.8 136.5 10.5l35 35.7l35-35.7c37.8-38.5 97.8-43.2 136.5-10.6c51.1 43.1 43.5 113.9 7.3 150.8"/>
  </svg>
);

Other libraries

Heart in 8 more libraries

Each library draws it its own way. Open one to compare.

  • Heart icon from Arcticons
  • Heart icon from Phosphor
  • Heart icon from Material Design Icons
  • Heart icon from Tabler Icons
  • Heart icon from Streamline
  • Heart icon from Health Icons
  • Heart icon from IconPark Outline
  • Heart icon from Myna UI Icons

Font Awesome 5 Regular

Icons that share its tags, in the same style.

  • Kiss icon from Font Awesome 5 Regular
  • Kiss Beam icon from Font Awesome 5 Regular
  • Kiss Wink Heart icon from Font Awesome 5 Regular
  • Hand Rock icon from Font Awesome 5 Regular
  • Hand Scissors icon from Font Awesome 5 Regular
  • Hand Spock icon from Font Awesome 5 Regular
  • Laugh icon from Font Awesome 5 Regular
  • Laugh Beam icon from Font Awesome 5 Regular
  • Laugh Squint icon from Font Awesome 5 Regular
  • Laugh Wink icon from Font Awesome 5 Regular
  • Bookmark icon from Font Awesome 5 Regular
  • Grin Hearts icon from Font Awesome 5 Regular
  • Meh icon from Font Awesome 5 Regular
  • Meh Blank icon from Font Awesome 5 Regular
  • Meh Rolling Eyes icon from Font Awesome 5 Regular
  • Angry icon from Font Awesome 5 Regular
  • Circle icon from Font Awesome 5 Regular
  • Flag icon from Font Awesome 5 Regular
  • Flushed icon from Font Awesome 5 Regular
  • Frown icon from Font Awesome 5 Regular
  • Frown Open icon from Font Awesome 5 Regular
  • Grimace icon from Font Awesome 5 Regular
  • Grin icon from Font Awesome 5 Regular
  • Grin Alt icon from Font Awesome 5 Regular

Skip the copy and paste. With Pro, your AI agent finds and installs any Font Awesome 5 Regular icon from a prompt.

Get Pro

Tags

Browse by tag

Heart is tagged symbol, emotion, love and 3 more. Related tags follow; each opens its icons from every library.

Pricing

Font Awesome 5 Regular MCP, with Pro

Ask for Heart or any of 151 Font Awesome 5 Regular icons and your agent installs it. The MCP comes with every Pro plan, with 6,000+ blocks and 14 premium templates. The icons stay free.

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

  • How many people can use the license.Seats: 1 seat
  • Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
  • Production-ready React sections: hero, pricing, features, dashboards and more.Pro blocks: 6,000+ blocks
  • Complete multi-page sites you can ship as they are.Templates: All 14 templates
  • React icons from every major library, installable with one command.React icons: 294k+ icons
  • Presets that restyle every block, in light and dark.Themes: All 59 themes
  • Lets your AI editor search, preview and install blocks for you.MCP server: Basic usage
  • Priority requests are answered first.Support: Standard

Team

Most popular

For freelancers, agencies & startups

$66instead of $99/mo

$789 billed yearly · ≈ $13/dev/mo

Everything in Individual, plus

  • How many people can use the license.Seats: Up to 5 seats
  • Client work, SaaS products and anything you charge for.Commercial use: Included
  • Lets your AI editor search, preview and install blocks for you.MCP server: High usage
  • Priority requests are answered first.Support: Priority

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

  • How many people can use the license.Seats: Unlimited seats
  • Lets your AI editor search, preview and install blocks for you.MCP server: Unlimited usage
  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

FAQ

Frequently asked questions

What the Heart icon means and where it's used, then how to install, style and license it.

Install Heart from a prompt

MCP, 6,000+ blocks and 14 premium templates in every Pro plan. The icons stay free.

Get Pro