Icône Heart With Arrow
fluent-emoji:heart-with-arrow
L'icône Heart With Arrow (fluent-emoji:heart-with-arrow) 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
- heartwith, witharrow, heartwitharrow
Code SVG
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><path stroke="#F48622" stroke-linecap="round" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="m5.862 5.862l6.16 6.16"/><path fill="url(#i2JAQps)" d="M20.658 7.147c-2.639.457-4.658 3.55-4.658 3.55s-2.02-3.093-4.658-3.55c-6.507-1.134-9.196 4.535-8.106 8.761c1.558 6.074 8.93 11.793 11.705 13.766c.639.454 1.48.454 2.118 0c2.773-1.974 10.139-7.692 11.706-13.766c1.089-4.226-1.6-9.895-8.107-8.761"/><path fill="url(#iotltPe)" d="M20.658 7.147c-2.639.457-4.658 3.55-4.658 3.55s-2.02-3.093-4.658-3.55c-6.507-1.134-9.196 4.535-8.106 8.761c1.558 6.074 8.93 11.793 11.705 13.766c.639.454 1.48.454 2.118 0c2.773-1.974 10.139-7.692 11.706-13.766c1.089-4.226-1.6-9.895-8.107-8.761"/><g filter="url(#i6rnKFb)" opacity=".75"><path fill="#FFB5C2" d="M15 10v9L9 8z"/></g><g filter="url(#iz9ZFke)" opacity=".75"><ellipse cx="24.5" cy="12.5" fill="#FF98AB" rx="2.5" ry="3.5" transform="rotate(48.308 24.5 12.5)"/></g><g filter="url(#i6shmye)"><path fill="#E02167" d="M17.179 20.507v-9c2-2.4 5.5-3 7-3z"/></g><path fill="url(#i2wJDwe)" d="m3.512 7.562l-1.49-4.85c-.12-.42.27-.81.69-.69l4.85 1.49c.39.12.52.62.23.91l-3.37 3.36c-.29.29-.79.17-.91-.22"/><path fill="url(#iiRT23c)" d="m25.942 27.032l-5-5.12l-.02 3.15c0 .57.22 1.11.61 1.52l2.84 2.91l.01.01l.01.01c.27.27.64.43 1.05.43c.83 0 1.5-.67 1.5-1.5c0-.65-.42-1.2-1-1.41"/><path fill="url(#iYFVsAe)" d="m27.052 25.942l-5.12-5l3.15-.02c.57 0 1.11.22 1.52.61l2.91 2.84l.01.01l.01.01c.27.27.43.64.43 1.05a1.498 1.498 0 0 1-2.91.5"/><g filter="url(#il7E8Sc)"><path fill="#CF1D5E" d="M16 17h2v4h-2z"/></g><path stroke="#FF9D49" stroke-linecap="round" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="2" d="m17.962 17.962l8.06 8.06"/><g filter="url(#iKYLMze)"><path stroke="#F88A3B" stroke-linecap="round" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width=".5" d="M17.962 17.962L25.5 25.5"/></g><defs><filter id="i6rnKFb" width="14" height="19" x="5" y="4" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_40_120" stdDeviation="2"/></filter><filter id="iz9ZFke" width="14.196" height="13.968" x="17.402" y="5.516" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_40_120" stdDeviation="2"/></filter><filter id="i6shmye" width="13" height="18" x="14.179" y="5.507" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_40_120" stdDeviation="1.5"/></filter><filter id="il7E8Sc" width="6" height="8" x="14" y="15" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_40_120" stdDeviation="1"/></filter><filter id="iKYLMze" width="9.038" height="9.038" x="17.212" y="17.212" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_40_120" stdDeviation=".25"/></filter><linearGradient id="i2JAQps" x1="16.002" x2="16.002" y1="30.001" y2="7.001" gradientUnits="userSpaceOnUse"><stop stop-color="#F91D61"/><stop offset=".444" stop-color="#FF3660"/><stop offset="1" stop-color="#FF297F"/></linearGradient><linearGradient id="i2wJDwe" x1="2.703" x2="7.5" y1="2.703" y2="8.5" gradientUnits="userSpaceOnUse"><stop stop-color="#7F5CD9"/><stop offset="1" stop-color="#614EAC"/></linearGradient><linearGradient id="iiRT23c" x1="21.904" x2="26.012" y1="24.906" y2="29.015" gradientUnits="userSpaceOnUse"><stop stop-color="#7A4ACA"/><stop offset="1" stop-color="#654DB7"/></linearGradient><linearGradient id="iYFVsAe" x1="24.5" x2="25.695" y1="22" y2="26.974" gradientUnits="userSpaceOnUse"><stop stop-color="#7A4ACA"/><stop offset="1" stop-color="#654DB7"/></linearGradient><radialGradient id="iotltPe" cx="0" cy="0" r="1" gradientTransform="rotate(169.087 9.256 9.04)scale(21.3775 21.62)" gradientUnits="userSpaceOnUse"><stop offset=".553" stop-color="#B33F5B" stop-opacity="0"/><stop offset=".854" stop-color="#B33F5B"/></radialGradient></defs></g></svg>
Comment utiliser l'icône Heart With Arrow
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:heart-with-arrow" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:heart-with-arrow" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:heart-with-arrow" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--heart-with-arrow]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:heart-with-arrow"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:heart-with-arrow"></iconify-icon>
Image HTML
<img src="https://iconyz.com/api/public/svg/fluent-emoji/heart-with-arrow.svg" alt="Icône Heart With Arrow" width="24" height="24">
Icônes similaires dans Fluent Emoji
L'icône Heart With Arrow dans d'autres collections
FAQ : Icône Heart With Arrow
L'icône Heart With Arrow 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 Heart With Arrow dans React ?
Installez @iconify/react et affichez <Icon icon="fluent-emoji:heart-with-arrow" />, ou utilisez « Copier le code » sur cette page pour obtenir un composant React autonome.
Comment ajouter l'icône Heart With Arrow à une page web ?
Liez le fichier SVG dans une balise image : <img src="https://iconyz.com/api/public/svg/fluent-emoji/heart-with-arrow.svg" alt="Icône Heart With Arrow">, ou collez le code SVG directement dans la page pour le styliser en CSS.
Voir toutes les Icônes Fluent Emoji →
ICONYZ
