envelope open heart icon

envelope-open-heart from Bootstrap Icons by The Bootstrap Authors · Outline · MIT Free for personal and commercial use.

Name: envelope-open-heart
Set: Bootstrap Icons
Style: Outline
Viewbox: 16×16
License: MIT

1 other variant in Bootstrap Icons

Related icons in Bootstrap Icons

envelope-arrow-down envelope-arrow-up envelope-at envelope-check envelope-dash envelope-exclamation envelope-heart envelope-open envelope-paper envelope-paper-heart envelope-plus envelope-slash envelope-x

Use the envelope open heart icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8.47 1.318a1 1 0 0 0-.94 0l-6 3.2A1 1 0 0 0 1 5.4v.817l3.235 1.94a2.8 2.8 0 0 0-.233 1.027L1 7.384v5.733l3.479-2.087q.224.414.558.83l-4.002 2.402A1 1 0 0 0 2 15h12a1 1 0 0 0 .965-.738l-4.002-2.401q.334-.418.558-.831L15 13.117V7.383l-3.002 1.801a2.8 2.8 0 0 0-.233-1.026L15 6.217V5.4a1 1 0 0 0-.53-.882zM7.06.435a2 2 0 0 1 1.882 0l6 3.2A2 2 0 0 1 16 5.4V14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5.4a2 2 0 0 1 1.059-1.765zM8 7.993c1.664-1.711 5.825 1.283 0 5.132c-5.825-3.85-1.664-6.843 0-5.132"/></svg>

React

import type { SVGProps } from "react";

export function BiEnvelopeOpenHeart(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" fillRule="evenodd" d="M8.47 1.318a1 1 0 0 0-.94 0l-6 3.2A1 1 0 0 0 1 5.4v.817l3.235 1.94a2.8 2.8 0 0 0-.233 1.027L1 7.384v5.733l3.479-2.087q.224.414.558.83l-4.002 2.402A1 1 0 0 0 2 15h12a1 1 0 0 0 .965-.738l-4.002-2.401q.334-.418.558-.831L15 13.117V7.383l-3.002 1.801a2.8 2.8 0 0 0-.233-1.026L15 6.217V5.4a1 1 0 0 0-.53-.882zM7.06.435a2 2 0 0 1 1.882 0l6 3.2A2 2 0 0 1 16 5.4V14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5.4a2 2 0 0 1 1.059-1.765zM8 7.993c1.664-1.711 5.825 1.283 0 5.132c-5.825-3.85-1.664-6.843 0-5.132"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8.47 1.318a1 1 0 0 0-.94 0l-6 3.2A1 1 0 0 0 1 5.4v.817l3.235 1.94a2.8 2.8 0 0 0-.233 1.027L1 7.384v5.733l3.479-2.087q.224.414.558.83l-4.002 2.402A1 1 0 0 0 2 15h12a1 1 0 0 0 .965-.738l-4.002-2.401q.334-.418.558-.831L15 13.117V7.383l-3.002 1.801a2.8 2.8 0 0 0-.233-1.026L15 6.217V5.4a1 1 0 0 0-.53-.882zM7.06.435a2 2 0 0 1 1.882 0l6 3.2A2 2 0 0 1 16 5.4V14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5.4a2 2 0 0 1 1.059-1.765zM8 7.993c1.664-1.711 5.825 1.283 0 5.132c-5.825-3.85-1.664-6.843 0-5.132"/></svg>
</template>

CSS

.icon-envelope-open-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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M8.47%201.318a1%201%200%200%200-.94%200l-6%203.2A1%201%200%200%200%201%205.4v.817l3.235%201.94a2.8%202.8%200%200%200-.233%201.027L1%207.384v5.733l3.479-2.087q.224.414.558.83l-4.002%202.402A1%201%200%200%200%202%2015h12a1%201%200%200%200%20.965-.738l-4.002-2.401q.334-.418.558-.831L15%2013.117V7.383l-3.002%201.801a2.8%202.8%200%200%200-.233-1.026L15%206.217V5.4a1%201%200%200%200-.53-.882zM7.06.435a2%202%200%200%201%201.882%200l6%203.2A2%202%200%200%201%2016%205.4V14a2%202%200%200%201-2%202H2a2%202%200%200%201-2-2V5.4a2%202%200%200%201%201.059-1.765zM8%207.993c1.664-1.711%205.825%201.283%200%205.132c-5.825-3.85-1.664-6.843%200-5.132%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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M8.47%201.318a1%201%200%200%200-.94%200l-6%203.2A1%201%200%200%200%201%205.4v.817l3.235%201.94a2.8%202.8%200%200%200-.233%201.027L1%207.384v5.733l3.479-2.087q.224.414.558.83l-4.002%202.402A1%201%200%200%200%202%2015h12a1%201%200%200%200%20.965-.738l-4.002-2.401q.334-.418.558-.831L15%2013.117V7.383l-3.002%201.801a2.8%202.8%200%200%200-.233-1.026L15%206.217V5.4a1%201%200%200%200-.53-.882zM7.06.435a2%202%200%200%201%201.882%200l6%203.2A2%202%200%200%201%2016%205.4V14a2%202%200%200%201-2%202H2a2%202%200%200%201-2-2V5.4a2%202%200%200%201%201.059-1.765zM8%207.993c1.664-1.711%205.825%201.283%200%205.132c-5.825-3.85-1.664-6.843%200-5.132%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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