ios heart icon

ios-heart from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.

Name
ios-heart
Set
IonIcons
Style
Regular
Viewbox
512×512
License
MIT

1 other variant in IonIcons

ios-heart-outline

Related icons in IonIcons

ios-addios-add-circleios-airplaneios-alarmios-albumsios-alertios-american-footballios-americanfootballios-analyticsios-apertureios-appsios-appstoreios-archiveios-arrow-backios-arrow-downios-arrow-dropdownios-arrow-dropdown-circleios-arrow-dropleftios-arrow-dropleft-circleios-arrow-droprightios-arrow-dropright-circleios-arrow-dropupios-arrow-dropup-circleios-arrow-forward

Use the ios heart icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M352 56h-1c-39.7 0-74.8 21-95 52-20.2-31-55.3-52-95-52h-1c-61.9.6-112 50.9-112 113 0 37 16.2 89.5 47.8 132.7C156 384 256 456 256 456s100-72 160.2-154.3C447.8 258.5 464 206 464 169c0-62.1-50.1-112.4-112-113z" fill="currentColor"/></svg>

React

import type { SVGProps } from "react";

export function IonIosHeart(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M352 56h-1c-39.7 0-74.8 21-95 52-20.2-31-55.3-52-95-52h-1c-61.9.6-112 50.9-112 113 0 37 16.2 89.5 47.8 132.7C156 384 256 456 256 456s100-72 160.2-154.3C447.8 258.5 464 206 464 169c0-62.1-50.1-112.4-112-113z" fill="currentColor"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M352 56h-1c-39.7 0-74.8 21-95 52-20.2-31-55.3-52-95-52h-1c-61.9.6-112 50.9-112 113 0 37 16.2 89.5 47.8 132.7C156 384 256 456 256 456s100-72 160.2-154.3C447.8 258.5 464 206 464 169c0-62.1-50.1-112.4-112-113z" fill="currentColor"/></svg>
</template>

CSS

.icon-ios-heart {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M352%2056h-1c-39.7%200-74.8%2021-95%2052-20.2-31-55.3-52-95-52h-1c-61.9.6-112%2050.9-112%20113%200%2037%2016.2%2089.5%2047.8%20132.7C156%20384%20256%20456%20256%20456s100-72%20160.2-154.3C447.8%20258.5%20464%20206%20464%20169c0-62.1-50.1-112.4-112-113z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M352%2056h-1c-39.7%200-74.8%2021-95%2052-20.2-31-55.3-52-95-52h-1c-61.9.6-112%2050.9-112%20113%200%2037%2016.2%2089.5%2047.8%20132.7C156%20384%20256%20456%20256%20456s100-72%20160.2-154.3C447.8%20258.5%20464%20206%20464%20169c0-62.1-50.1-112.4-112-113z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/ios-heart.svg?color=%231a73e8&size=48

Ios Heart icon — IonIcons · IconsDB