balloon heart icon
balloon-heart-fill from Bootstrap Icons by The Bootstrap Authors · Fill · MIT Free for personal and commercial use.
- Name
- balloon-heart-fill
- Set
- Bootstrap Icons
- Style
- Fill
- Viewbox
- 16×16
- License
- MIT
1 other variant in Bootstrap Icons
Use the balloon 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.49 10.92C19.412 3.382 11.28-2.387 8 .986C4.719-2.387-3.413 3.382 7.51 10.92l-.234.468a.25.25 0 1 0 .448.224l.04-.08c.009.17.024.315.051.45c.068.344.208.622.448 1.102l.013.028c.212.422.182.85.05 1.246c-.135.402-.366.751-.534 1.003a.25.25 0 0 0 .416.278l.004-.007c.166-.248.431-.646.588-1.115c.16-.479.212-1.051-.076-1.629c-.258-.515-.365-.732-.419-1.004a2 2 0 0 1-.037-.289l.008.017a.25.25 0 1 0 .448-.224l-.235-.468ZM6.726 1.269c-1.167-.61-2.8-.142-3.454 1.135c-.237.463-.36 1.08-.202 1.85c.055.27.467.197.527-.071c.285-1.256 1.177-2.462 2.989-2.528c.234-.008.348-.278.14-.386"/></svg>
React
import type { SVGProps } from "react";
export function BiBalloonHeartFill(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.49 10.92C19.412 3.382 11.28-2.387 8 .986C4.719-2.387-3.413 3.382 7.51 10.92l-.234.468a.25.25 0 1 0 .448.224l.04-.08c.009.17.024.315.051.45c.068.344.208.622.448 1.102l.013.028c.212.422.182.85.05 1.246c-.135.402-.366.751-.534 1.003a.25.25 0 0 0 .416.278l.004-.007c.166-.248.431-.646.588-1.115c.16-.479.212-1.051-.076-1.629c-.258-.515-.365-.732-.419-1.004a2 2 0 0 1-.037-.289l.008.017a.25.25 0 1 0 .448-.224l-.235-.468ZM6.726 1.269c-1.167-.61-2.8-.142-3.454 1.135c-.237.463-.36 1.08-.202 1.85c.055.27.467.197.527-.071c.285-1.256 1.177-2.462 2.989-2.528c.234-.008.348-.278.14-.386"/></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.49 10.92C19.412 3.382 11.28-2.387 8 .986C4.719-2.387-3.413 3.382 7.51 10.92l-.234.468a.25.25 0 1 0 .448.224l.04-.08c.009.17.024.315.051.45c.068.344.208.622.448 1.102l.013.028c.212.422.182.85.05 1.246c-.135.402-.366.751-.534 1.003a.25.25 0 0 0 .416.278l.004-.007c.166-.248.431-.646.588-1.115c.16-.479.212-1.051-.076-1.629c-.258-.515-.365-.732-.419-1.004a2 2 0 0 1-.037-.289l.008.017a.25.25 0 1 0 .448-.224l-.235-.468ZM6.726 1.269c-1.167-.61-2.8-.142-3.454 1.135c-.237.463-.36 1.08-.202 1.85c.055.27.467.197.527-.071c.285-1.256 1.177-2.462 2.989-2.528c.234-.008.348-.278.14-.386"/></svg> </template>
CSS
.icon-balloon-heart-fill {
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.49%2010.92C19.412%203.382%2011.28-2.387%208%20.986C4.719-2.387-3.413%203.382%207.51%2010.92l-.234.468a.25.25%200%201%200%20.448.224l.04-.08c.009.17.024.315.051.45c.068.344.208.622.448%201.102l.013.028c.212.422.182.85.05%201.246c-.135.402-.366.751-.534%201.003a.25.25%200%200%200%20.416.278l.004-.007c.166-.248.431-.646.588-1.115c.16-.479.212-1.051-.076-1.629c-.258-.515-.365-.732-.419-1.004a2%202%200%200%201-.037-.289l.008.017a.25.25%200%201%200%20.448-.224l-.235-.468ZM6.726%201.269c-1.167-.61-2.8-.142-3.454%201.135c-.237.463-.36%201.08-.202%201.85c.055.27.467.197.527-.071c.285-1.256%201.177-2.462%202.989-2.528c.234-.008.348-.278.14-.386%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.49%2010.92C19.412%203.382%2011.28-2.387%208%20.986C4.719-2.387-3.413%203.382%207.51%2010.92l-.234.468a.25.25%200%201%200%20.448.224l.04-.08c.009.17.024.315.051.45c.068.344.208.622.448%201.102l.013.028c.212.422.182.85.05%201.246c-.135.402-.366.751-.534%201.003a.25.25%200%200%200%20.416.278l.004-.007c.166-.248.431-.646.588-1.115c.16-.479.212-1.051-.076-1.629c-.258-.515-.365-.732-.419-1.004a2%202%200%200%201-.037-.289l.008.017a.25.25%200%201%200%20.448-.224l-.235-.468ZM6.726%201.269c-1.167-.61-2.8-.142-3.454%201.135c-.237.463-.36%201.08-.202%201.85c.055.27.467.197.527-.071c.285-1.256%201.177-2.462%202.989-2.528c.234-.008.348-.278.14-.386%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/bi/balloon-heart-fill.svg?color=%231a73e8&size=48
