Icône Broken Heart
fluent-emoji:broken-heart
L'icône Broken Heart (fluent-emoji:broken-heart) est une icône SVG gratuite de la collection Fluent Emoji par Microsoft Corporation. Elle est dessinée sur une grille de 32 × 32. Les Fluent Emoji icons sont publiées sous la licence MIT, qui autorise leur utilisation dans des projets personnels et commerciaux. Copiez-la en code SVG, JSX, Vue ou Svelte, ou téléchargez le fichier SVG.
- Collection
- Fluent Emoji
- Auteur
- Microsoft Corporation
- Licence
- MIT
- Taille
- 32 × 32
- Mots-clés
- brokenheart
Code SVG
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><g clip-path="url(#ik9o6Ph)"><path fill="url(#iOsiCkc)" d="M15.269 25.734a.9.9 0 0 1 .187-.555l1.211-1.855c.245-.316.256-.647.063-.993l-2.485-4.914c-.214-.386-.067-.592.086-.765c.45-.509 1.344-1.696 1.69-2.139l.633-.803c.225-.274.276-.65.153-.986c-.497-1.329-1.078-2.919-1.624-4.408c-.185-.504-.35-1.079-.735-1.438c-.74-.691-2.076-1.416-3.099-1.594C4.27 3.777 1.577 9.98 2.534 14.94c1.39 6.086 7.969 12.148 11.961 14.16c.45.226.75.06.75-.309z"/><path fill="url(#ijeQ6gc)" d="M15.269 25.734a.9.9 0 0 1 .187-.555l1.211-1.855c.245-.316.256-.647.063-.993l-2.485-4.914c-.214-.386-.067-.592.086-.765c.45-.509 1.344-1.696 1.69-2.139l.633-.803c.225-.274.276-.65.153-.986c-.497-1.329-1.078-2.919-1.624-4.408c-.185-.504-.35-1.079-.735-1.438c-.74-.691-2.076-1.416-3.099-1.594C4.27 3.777 1.577 9.98 2.534 14.94c1.39 6.086 7.969 12.148 11.961 14.16c.45.226.75.06.75-.309z"/><path fill="url(#iXwv3mc)" d="M15.269 25.734a.9.9 0 0 1 .187-.555l1.211-1.855c.245-.316.256-.647.063-.993l-2.485-4.914c-.214-.386-.067-.592.086-.765c.45-.509 1.344-1.696 1.69-2.139l.633-.803c.225-.274.276-.65.153-.986c-.497-1.329-1.078-2.919-1.624-4.408c-.185-.504-.35-1.079-.735-1.438c-.74-.691-2.076-1.416-3.099-1.594C4.27 3.777 1.577 9.98 2.534 14.94c1.39 6.086 7.969 12.148 11.961 14.16c.45.226.75.06.75-.309z"/><path fill="url(#iNQCaoe)" d="M15.269 25.734a.9.9 0 0 1 .187-.555l1.211-1.855c.245-.316.256-.647.063-.993l-2.485-4.914c-.214-.386-.067-.592.086-.765c.45-.509 1.344-1.696 1.69-2.139l.633-.803c.225-.274.276-.65.153-.986c-.497-1.329-1.078-2.919-1.624-4.408c-.185-.504-.35-1.079-.735-1.438c-.74-.691-2.076-1.416-3.099-1.594C4.27 3.777 1.577 9.98 2.534 14.94c1.39 6.086 7.969 12.148 11.961 14.16c.45.226.75.06.75-.309z"/><path fill="url(#i1HWN8b)" d="M21.815 5.09c-1.64.283-3.489 1.394-4.428 2.377c0 0-.123.102-.123.254c0 .06.02.142.03.152l1.943 5.341a.66.66 0 0 1-.07.703c-.725.898-1.524 1.969-2.227 2.871c-.31.315-.341.681-.125 1.067l2.422 4.676c.196.354.117.593-.043.828l-1.554 2.37c-.135.173-.266.516-.266.731l-.027 2.524c0 .316.482.348.875.074c3.828-2.094 10.411-7.917 11.78-14.063c1.126-5.047-1.75-10.78-8.187-9.906"/><path fill="url(#i6gqirT)" d="M21.815 5.09c-1.64.283-3.489 1.394-4.428 2.377c0 0-.123.102-.123.254c0 .06.02.142.03.152l1.943 5.341a.66.66 0 0 1-.07.703c-.725.898-1.524 1.969-2.227 2.871c-.31.315-.341.681-.125 1.067l2.422 4.676c.196.354.117.593-.043.828l-1.554 2.37c-.135.173-.266.516-.266.731l-.027 2.524c0 .316.482.348.875.074c3.828-2.094 10.411-7.917 11.78-14.063c1.126-5.047-1.75-10.78-8.187-9.906"/><path fill="url(#i1v8CBc)" d="M21.815 5.09c-1.64.283-3.489 1.394-4.428 2.377c0 0-.123.102-.123.254c0 .06.02.142.03.152l1.943 5.341a.66.66 0 0 1-.07.703c-.725.898-1.524 1.969-2.227 2.871c-.31.315-.341.681-.125 1.067l2.422 4.676c.196.354.117.593-.043.828l-1.554 2.37c-.135.173-.266.516-.266.731l-.027 2.524c0 .316.482.348.875.074c3.828-2.094 10.411-7.917 11.78-14.063c1.126-5.047-1.75-10.78-8.187-9.906"/><path fill="url(#ioxCtGc)" d="M21.815 5.09c-1.64.283-3.489 1.394-4.428 2.377c0 0-.123.102-.123.254c0 .06.02.142.03.152l1.943 5.341a.66.66 0 0 1-.07.703c-.725.898-1.524 1.969-2.227 2.871c-.31.315-.341.681-.125 1.067l2.422 4.676c.196.354.117.593-.043.828l-1.554 2.37c-.135.173-.266.516-.266.731l-.027 2.524c0 .316.482.348.875.074c3.828-2.094 10.411-7.917 11.78-14.063c1.126-5.047-1.75-10.78-8.187-9.906"/><g filter="url(#i87Oogq)"><ellipse cx="24.453" cy="12.672" fill="url(#iEolPLe)" rx="4.04" ry="5.171" transform="rotate(41.528 24.453 12.672)"/></g><g filter="url(#isb001c)"><ellipse cx="12.11" cy="11.281" fill="url(#iG3JQVd)" rx="2.968" ry="4.662" transform="rotate(150.611 12.11 11.281)"/></g><g filter="url(#i02nmpe)"><path stroke="url(#iRxyRFd)" stroke-linecap="round" stroke-width=".25" d="m16.41 22.606l-2.75-5.438"/></g><g filter="url(#il7mqkN)"><path stroke="url(#i47zAin)" stroke-linecap="round" stroke-opacity=".75" stroke-width=".15" d="m13.815 16.511l2.688-3.312l-1.375-3.782"/></g></g><defs><radialGradient id="iXwv3mc" cx="0" cy="0" r="1" gradientTransform="rotate(-138.643 11.823 5.79)scale(23.9312 14.1578)" gradientUnits="userSpaceOnUse"><stop offset=".671" stop-color="#FF7AF2" stop-opacity="0"/><stop offset=".785" stop-color="#FF96D7"/></radialGradient><radialGradient id="iNQCaoe" cx="0" cy="0" r="1" gradientTransform="rotate(178.046 10.034 10.148)scale(25.1878 31.5353)" gradientUnits="userSpaceOnUse"><stop offset=".536" stop-color="#AB1F51" stop-opacity="0"/><stop offset=".814" stop-color="#AB1F51"/></radialGradient><radialGradient id="i1v8CBc" cx="0" cy="0" r="1" gradientTransform="matrix(39.74996 -6.5 3.74657 22.9117 2.972 16.136)" gradientUnits="userSpaceOnUse"><stop offset=".67" stop-color="#FF7AF2" stop-opacity="0"/><stop offset=".735" stop-color="#FF96D7"/></radialGradient><radialGradient id="ioxCtGc" cx="0" cy="0" r="1" gradientTransform="matrix(-16.37517 -20.43737 54.0988 -43.34597 25.66 24.948)" gradientUnits="userSpaceOnUse"><stop offset=".607" stop-color="#AB1F51" stop-opacity="0"/><stop offset=".814" stop-color="#AB1F51"/></radialGradient><radialGradient id="iEolPLe" cx="0" cy="0" r="1" gradientTransform="rotate(99.933 9.313 14.79)scale(9.0832 29.5242)" gradientUnits="userSpaceOnUse"><stop stop-color="#EF6E9D"/><stop offset="1" stop-color="#EF6E9D" stop-opacity="0"/></radialGradient><radialGradient id="iG3JQVd" cx="0" cy="0" r="1" gradientTransform="rotate(96.854 2.12 10.142)scale(8.73812 23.3563)" gradientUnits="userSpaceOnUse"><stop offset=".229" stop-color="#EC5A8F"/><stop offset="1" stop-color="#EC5A8F" stop-opacity="0"/></radialGradient><linearGradient id="iOsiCkc" x1="9.765" x2="9.765" y1="29.266" y2="5.164" gradientUnits="userSpaceOnUse"><stop offset=".026" stop-color="#EC008C"/><stop offset=".198" stop-color="#FF1F50"/><stop offset=".536" stop-color="#FF2868"/><stop offset="1" stop-color="#EC008C"/></linearGradient><linearGradient id="ijeQ6gc" x1="17.784" x2="14.329" y1="14.744" y2="14.744" gradientUnits="userSpaceOnUse"><stop stop-color="#C6162A"/><stop offset="1" stop-color="#C6162A" stop-opacity="0"/></linearGradient><linearGradient id="i1HWN8b" x1="23.302" x2="23.302" y1="29.26" y2="5.156" gradientUnits="userSpaceOnUse"><stop stop-color="#FF2657"/><stop offset=".444" stop-color="#FF2F67"/><stop offset="1" stop-color="#EC008C"/></linearGradient><linearGradient id="i6gqirT" x1="16.284" x2="19.097" y1="14.728" y2="14.728" gradientUnits="userSpaceOnUse"><stop stop-color="#C01567"/><stop offset="1" stop-color="#C01567" stop-opacity="0"/></linearGradient><linearGradient id="iRxyRFd" x1="14.597" x2="12.803" y1="19.262" y2="16.218" gradientUnits="userSpaceOnUse"><stop stop-color="#FF757B"/><stop offset="1" stop-color="#FF757B" stop-opacity="0"/></linearGradient><linearGradient id="i47zAin" x1="15.675" x2="13.659" y1="14.573" y2="9.039" gradientUnits="userSpaceOnUse"><stop stop-color="#FF989D"/><stop offset="1" stop-color="#FF989D" stop-opacity="0"/></linearGradient><filter id="i87Oogq" width="15.144" height="15.416" x="16.881" y="4.964" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7133_6142" stdDeviation="1.5"/></filter><filter id="isb001c" width="12.906" height="14.633" x="5.657" y="3.965" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7133_6142" stdDeviation="1.5"/></filter><filter id="i02nmpe" width="3.7" height="6.388" x="13.184" y="16.693" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7133_6142" stdDeviation=".175"/></filter><filter id="il7mqkN" width="3.547" height="7.944" x="13.39" y="8.992" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7133_6142" stdDeviation=".175"/></filter><clipPath id="ik9o6Ph"><path fill="#fff" d="M0 0h32v32H0z"/></clipPath></defs></g></svg>Comment utiliser l'icône Broken Heart
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:broken-heart" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:broken-heart" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:broken-heart" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--broken-heart]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:broken-heart"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:broken-heart"></iconify-icon>Image HTML
<img src="https://iconyz.com/api/public/svg/fluent-emoji/broken-heart.svg" alt="Icône Broken Heart" width="24" height="24">Icônes similaires dans Fluent Emoji
L'icône Broken Heart dans d'autres collections
FAQ : Icône Broken Heart
L'icône Broken Heart est-elle gratuite pour un usage commercial ?
Oui. Les Fluent Emoji icons sont publiées sous la licence MIT, qui autorise leur utilisation dans des projets personnels et commerciaux.
Comment utiliser l'icône Broken Heart dans React ?
Installez @iconify/react et affichez <Icon icon="fluent-emoji:broken-heart" />, ou utilisez « Copier le code » sur cette page pour obtenir un composant React autonome.
Comment ajouter l'icône Broken Heart à une page web ?
Liez le fichier SVG dans une balise image : <img src="https://iconyz.com/api/public/svg/fluent-emoji/broken-heart.svg" alt="Icône Broken Heart">, ou collez le code SVG directement dans la page pour le styliser en CSS.