Home/Libraries/OpenMoji (Iconify)/heart

OpenMoji (Iconify)

Heart

License: CC-BY-SA-4.0

ICON SIZE

STROKE WEIGHT1.5px

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 72 72"><path fill="#ea5a47" d="m38.464 14.703l.412 3.127l.403.054l1.367-2.565l2.156.761c-.14 1.558-1.74 4.232 1.07 5.26c-1.837.618-2.811 1.241-4.632-.016c-1.048-.724-2.627.08-3.242.34c-.754.32-1.636.659-1.484 1.935c.042.347.382.683-.421 1.719c-1.596 1.789-2.73 1.607-4.726 5.196c-2.448-3.237-1.18-9.924 2.915-12.305l-.49-1.943l2.106-.92l1.65 2.595l.93-3.238z"/><path fill="#d22f27" d="M37.9 51.32a22.86 22.86 0 0 0 2.06-12.01c-.373-3.598-.176-3.306.216-4.887c2.847 2.28 6.41 1.884 9.318 1.17a5.88 5.88 0 0 1 .744 4.458a27.05 27.05 0 0 1-7.305 14.576c-3.216 3.306-6.436 3.632-10.08.84c-5.132-3.931-9.458-8.54-11.164-15.056c-.928-3.542 1.94-9.104 5.354-10.403a2.085 2.085 0 0 1 2.324.505a15.86 15.86 0 0 1 4.04 6.237c.63 1.561 1.164 3.162 1.783 4.86c-2.937-8.303-4.214-9.757-5.824-11.097c1.016-2.46 3.844-4.339 4.726-5.196a1.87 1.87 0 0 0 .495-1.377a1.592 1.592 0 0 1 1.079-2.135c1.358-.567 2.654-1.337 4.184-.076c.794.387 1.713.43 2.54.116c2.193-.701 4.32-1.615 6.199-2.34l2.514 5.083c-1.536 1.066-3.425 2.29-5.215 3.646a33 33 0 0 0-3.94 3.417a7.68 7.68 0 0 0-2.103 6.904a20.35 20.35 0 0 1-1.725 12.14c-.091.2-.147.417-.22.625"/><path fill="#ea5a47" d="M29.367 30.513c-2.993-2.58-6.466 3.032-7.411 5.755a7.83 7.83 0 0 1-.88-5.597c1.089-3.984 2.26-7.947 3.353-11.765h6.869a8.3 8.3 0 0 0-1.676 1.987a10.15 10.15 0 0 0-1.095 7.995a7.7 7.7 0 0 0 .84 1.625m16.521-2.279a7.9 7.9 0 0 1 2.305 5.498c.001.407.112 2.133-.248 2.188a11.07 11.07 0 0 1-5.69-.314c-2.39-.88-2.096-1.784-1.037-3.09a26.7 26.7 0 0 1 4.67-4.282"/><g fill="none" stroke="#818cf8" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m38.464 14.703l.412 3.127l.403.054l1.367-2.565l2.156.761c-.14 1.558-1.74 4.232 1.07 5.26c-1.837.618-2.811 1.241-4.632-.016c-1.048-.724-2.627.08-3.242.34c-.754.32-1.636.659-1.484 1.935c.042.347.382.683-.421 1.719c-1.596 1.789-2.73 1.607-4.726 5.196c-2.448-3.237-1.18-9.924 2.915-12.305l-.49-1.943l2.106-.92l1.65 2.595l.93-3.238z"/><path d="M37.9 51.32a22.86 22.86 0 0 0 2.06-12.01c-.373-3.598-.176-3.306.216-4.887c2.847 2.28 6.41 1.884 9.318 1.17a5.88 5.88 0 0 1 .744 4.458a27.05 27.05 0 0 1-7.305 14.576c-3.216 3.306-6.436 3.632-10.08.84c-5.132-3.931-9.458-8.54-11.164-15.056c-.928-3.542 1.94-9.104 5.354-10.403a2.085 2.085 0 0 1 2.324.505a15.86 15.86 0 0 1 4.04 6.237c.63 1.561 1.164 3.162 1.783 4.86c-2.937-8.303-4.214-9.757-5.824-11.097c1.016-2.46 3.844-4.339 4.726-5.196a1.87 1.87 0 0 0 .495-1.377a1.592 1.592 0 0 1 1.079-2.135c1.358-.567 2.654-1.337 4.184-.076c.794.387 1.713.43 2.54.116c2.193-.701 4.32-1.615 6.199-2.34l2.514 5.083c-1.536 1.066-3.425 2.29-5.215 3.646a33 33 0 0 0-3.94 3.417"/><path d="M29.367 30.513c-2.993-2.58-6.466 3.032-7.411 5.755a7.83 7.83 0 0 1-.88-5.597c1.089-3.984 2.26-7.947 3.353-11.765h6.869a8.3 8.3 0 0 0-1.676 1.987a10.15 10.15 0 0 0-1.095 7.995a7.7 7.7 0 0 0 .84 1.625m16.521-2.279a7.9 7.9 0 0 1 2.305 5.498c.001.407.112 2.133-.248 2.188a11.07 11.07 0 0 1-5.69-.314c-2.39-.88-2.096-1.784-1.037-3.09a26.7 26.7 0 0 1 4.67-4.282"/></g></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. HeartIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **CC-BY-SA-4.0** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.