Иконка White Heart
fluent-emoji:white-heart
Иконка White Heart (fluent-emoji:white-heart) — бесплатная SVG-иконка из набора Fluent Emoji от Microsoft Corporation. Она нарисована на сетке 32 × 32. Fluent Emoji icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах. Скопируйте её как код SVG, JSX, Vue или Svelte или скачайте SVG-файл.
- Набор
- Fluent Emoji
- Автор
- Microsoft Corporation
- Лицензия
- MIT
- Размер
- 32 × 32
- Теги
- whiteheart
Код 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(#iYamrgc)" d="M15.125 29.202a1.73 1.73 0 0 0 1.71-.023c3.584-2.047 9.81-6.761 12.256-12.884c3.589-7.973-4.839-14.337-10.663-9.76c-.607.478-1.371 1.025-1.897 1.542c-.238.234-.657.258-.903.034c-.691-.63-1.772-1.436-2.465-1.905c-4.966-3.36-14 1.069-10.147 10.52c1.412 4.242 8.14 10.26 12.11 12.476"/><path fill="url(#iTb0UZa)" d="M15.125 29.202a1.73 1.73 0 0 0 1.71-.023c3.584-2.047 9.81-6.761 12.256-12.884c3.589-7.973-4.839-14.337-10.663-9.76c-.607.478-1.371 1.025-1.897 1.542c-.238.234-.657.258-.903.034c-.691-.63-1.772-1.436-2.465-1.905c-4.966-3.36-14 1.069-10.147 10.52c1.412 4.242 8.14 10.26 12.11 12.476"/><path fill="url(#i82tCqc)" d="M15.125 29.202a1.73 1.73 0 0 0 1.71-.023c3.584-2.047 9.81-6.761 12.256-12.884c3.589-7.973-4.839-14.337-10.663-9.76c-.607.478-1.371 1.025-1.897 1.542c-.238.234-.657.258-.903.034c-.691-.63-1.772-1.436-2.465-1.905c-4.966-3.36-14 1.069-10.147 10.52c1.412 4.242 8.14 10.26 12.11 12.476"/><path fill="url(#iPdtsCe)" d="M15.125 29.202a1.73 1.73 0 0 0 1.71-.023c3.584-2.047 9.81-6.761 12.256-12.884c3.589-7.973-4.839-14.337-10.663-9.76c-.607.478-1.371 1.025-1.897 1.542c-.238.234-.657.258-.903.034c-.691-.63-1.772-1.436-2.465-1.905c-4.966-3.36-14 1.069-10.147 10.52c1.412 4.242 8.14 10.26 12.11 12.476"/><path fill="url(#iYifmIc)" d="M15.125 29.202a1.73 1.73 0 0 0 1.71-.023c3.584-2.047 9.81-6.761 12.256-12.884c3.589-7.973-4.839-14.337-10.663-9.76c-.607.478-1.371 1.025-1.897 1.542c-.238.234-.657.258-.903.034c-.691-.63-1.772-1.436-2.465-1.905c-4.966-3.36-14 1.069-10.147 10.52c1.412 4.242 8.14 10.26 12.11 12.476"/><path fill="url(#ife8RfW)" d="M24.349 23.313c1.939-2.012 3.69-4.385 4.741-7.018c3.59-7.972-4.838-14.336-10.662-9.76c-.15.12-.311.242-.475.368c-.497.38-1.027.785-1.422 1.174a.68.68 0 0 1-.454.19l-.002.003z"/><path fill="url(#imT3Rrd)" d="M3.35 17.558c1.926 4.163 8.059 9.57 11.775 11.644a1.73 1.73 0 0 0 1.71-.022c3.333-1.905 8.953-6.116 11.69-11.622z"/><path fill="url(#ivYIGFc)" d="M3.35 17.558c1.926 4.163 8.059 9.57 11.775 11.644a1.73 1.73 0 0 0 1.71-.022c3.333-1.905 8.953-6.116 11.69-11.622z"/><path fill="url(#i6w8a2b)" d="M3.35 17.558c1.926 4.163 8.059 9.57 11.775 11.644a1.73 1.73 0 0 0 1.71-.022c3.333-1.905 8.953-6.116 11.69-11.622z"/><path fill="url(#iu0dYVc)" d="M15.628 8.11c.946.861 2.456.65 3.31-.302c.915-1.018 2.146-2.075 3.639-2.806c-1.404.03-2.842.507-4.149 1.534c-.15.118-.311.241-.475.366c-.497.38-1.027.786-1.422 1.175c-.238.234-.657.258-.903.034"/><g filter="url(#iSbhVPb)"><path fill="url(#iXopabb)" fill-opacity=".6" d="M25.638 5.973c2.598 1.07 3.975 3.488 2.343 7.455c-2.875 5.437-5.963 5.533-7.563 4.875c-1.875-1.125-3.195-4.409-1.562-8.375s4.184-5.024 6.782-3.955"/></g><g filter="url(#ikonRqe)"><path fill="url(#i8IICeI)" d="M16.708 9.32v12.468c3.002-5.667 8.852-12.573 6.377-15.48c-.835-.98-3.295-.077-6.038 2.267a.98.98 0 0 0-.339.744"/></g><g filter="url(#iUh2Hue)"><path stroke="url(#iUhM1Ie)" stroke-linecap="round" stroke-width=".25" d="M22.771 6.115c1.087-.135 4.063.281 5.281 3.688"/></g><g filter="url(#iE7YdPd)"><path fill="url(#iQbiQCd)" fill-opacity=".6" d="m14.861 9.18l.205 13.407C8.191 15.9 6.96 8.734 9.298 7.127c1.67-1.147 4.813.491 5.563 2.054"/></g><g filter="url(#izD4yZd)"><path stroke="url(#ig53FSc)" stroke-linecap="round" stroke-width="2" d="M27.807 10.929c-.636 4.507-5.78 12.02-10.576 15.545"/></g><g filter="url(#igwHE7b)"><path fill="url(#ilSq5LT)" d="M6.898 20.308c2 2.85 6.625 6.73 8.687 8.313l-2.812-10.938z"/></g></g><defs><radialGradient id="iYamrgc" cx="0" cy="0" r="1" gradientTransform="matrix(-2.94862 24.04125 -29.72566 -3.6458 17.924 5.9)" gradientUnits="userSpaceOnUse"><stop offset=".063" stop-color="#F5F3F8"/><stop offset=".463" stop-color="#E4D9F1"/><stop offset="1" stop-color="#E3CCFB"/></radialGradient><radialGradient id="iTb0UZa" cx="0" cy="0" r="1" gradientTransform="matrix(-24.3124 -6.87514 4.15616 -14.69735 23.648 15.37)" gradientUnits="userSpaceOnUse"><stop offset=".682" stop-color="#DCC2F7" stop-opacity="0"/><stop offset="1" stop-color="#DCC2F7"/></radialGradient><radialGradient id="i82tCqc" cx="0" cy="0" r="1" gradientTransform="matrix(-17.1875 -13.18749 11.85052 -15.44502 19.71 18.37)" gradientUnits="userSpaceOnUse"><stop offset=".69" stop-color="#B6B6B6" stop-opacity="0"/><stop offset="1" stop-color="#B6B6B6"/></radialGradient><radialGradient id="iPdtsCe" cx="0" cy="0" r="1" gradientTransform="matrix(-17.1875 -13.18749 11.85052 -15.44502 19.71 18.37)" gradientUnits="userSpaceOnUse"><stop offset=".821" stop-color="#B6B6B6" stop-opacity="0"/><stop offset="1" stop-color="#919191"/></radialGradient><radialGradient id="iYifmIc" cx="0" cy="0" r="1" gradientTransform="matrix(-14.25005 11.12495 -15.55588 -19.92567 18.71 11.183)" gradientUnits="userSpaceOnUse"><stop offset=".8" stop-color="#B6B6B6" stop-opacity="0"/><stop offset="1" stop-color="#B6B6B6"/></radialGradient><radialGradient id="ife8RfW" cx="0" cy="0" r="1" gradientTransform="matrix(-1.73372 -12.19397 16.83648 -2.39379 21.913 15.61)" gradientUnits="userSpaceOnUse"><stop offset=".565" stop-color="#B6B6B6" stop-opacity="0"/><stop offset="1" stop-color="#B6B6B6"/></radialGradient><radialGradient id="imT3Rrd" cx="0" cy="0" r="1" gradientTransform="scale(15.7131 15.8728)rotate(90 .06 .954)" gradientUnits="userSpaceOnUse"><stop offset=".751" stop-color="#DBAEFF" stop-opacity="0"/><stop offset="1" stop-color="#DBAEFF"/></radialGradient><radialGradient id="iXopabb" cx="0" cy="0" r="1" gradientTransform="matrix(-6.06251 9.43753 -3.93674 -2.5289 26.106 7.178)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><radialGradient id="iQbiQCd" cx="0" cy="0" r="1" gradientTransform="matrix(-7.12673 -5.5468 5.67683 -7.2938 14.587 15.917)" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><linearGradient id="ivYIGFc" x1="16.273" x2="5.773" y1="17.246" y2="28.121" gradientUnits="userSpaceOnUse"><stop offset=".632" stop-color="#DBAEFF" stop-opacity="0"/><stop offset="1" stop-color="#DBAEFF"/></linearGradient><linearGradient id="i6w8a2b" x1="16.273" x2="25.773" y1="17.246" y2="27.464" gradientUnits="userSpaceOnUse"><stop offset=".622" stop-color="#DBAEFF" stop-opacity="0"/><stop offset="1" stop-color="#DBAEFF"/></linearGradient><linearGradient id="iu0dYVc" x1="18.908" x2="15.316" y1="11.853" y2="7.149" gradientUnits="userSpaceOnUse"><stop offset=".6" stop-color="#B6B6B6" stop-opacity="0"/><stop offset=".89" stop-color="#919191"/></linearGradient><linearGradient id="i8IICeI" x1="20.71" x2="26.085" y1="2.871" y2="4.652" gradientUnits="userSpaceOnUse"><stop stop-color="#CFC7D9"/><stop offset="1" stop-color="#CFC7D9" stop-opacity="0"/></linearGradient><linearGradient id="iUhM1Ie" x1="27.803" x2="24.771" y1="8.146" y2="6.396" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="ig53FSc" x1="27.806" x2="17.693" y1="13.645" y2="26.474" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><linearGradient id="ilSq5LT" x1="15.96" x2="9.648" y1="30.496" y2="23.152" gradientUnits="userSpaceOnUse"><stop stop-color="#DCBFF9"/><stop offset="1" stop-color="#DCBFF9" stop-opacity="0"/></linearGradient><filter id="iSbhVPb" width="13.569" height="16.002" x="16.617" y="4.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7320_6140" stdDeviation=".75"/></filter><filter id="ikonRqe" width="10.972" height="19.871" x="14.708" y="3.917" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7320_6140" stdDeviation="1"/></filter><filter id="iUh2Hue" width="7.531" height="5.959" x="21.646" y="4.969" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7320_6140" stdDeviation=".5"/></filter><filter id="iE7YdPd" width="12.852" height="21.845" x="5.214" y="3.743" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7320_6140" stdDeviation="1.5"/></filter><filter id="izD4yZd" width="20.576" height="25.546" x="12.23" y="5.928" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7320_6140" stdDeviation="2"/></filter><filter id="igwHE7b" width="14.688" height="16.938" x="3.898" y="14.683" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7320_6140" stdDeviation="1.5"/></filter><clipPath id="ik9o6Ph"><path fill="#fff" d="M0 0h32v32H0z"/></clipPath></defs></g></svg>Как использовать иконку White Heart
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:white-heart" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:white-heart" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:white-heart" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--white-heart]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:white-heart"></div>Веб-компонент
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:white-heart"></iconify-icon>Изображение HTML
<img src="https://iconyz.com/api/public/svg/fluent-emoji/white-heart.svg" alt="Иконка White Heart" width="24" height="24">Похожие иконки в наборе Fluent Emoji
Иконка White Heart в других наборах
Вопросы и ответы: Иконка White Heart
Можно ли бесплатно использовать иконку White Heart в коммерческих проектах?
Да. Fluent Emoji icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах.
Как использовать иконку White Heart в React?
Установите @iconify/react и выведите <Icon icon="fluent-emoji:white-heart" /> или нажмите «Копировать код» на этой странице, чтобы получить отдельный React-компонент.
Как добавить иконку White Heart на веб-страницу?
Подключите SVG-файл в теге изображения: <img src="https://iconyz.com/api/public/svg/fluent-emoji/white-heart.svg" alt="Иконка White Heart">, или вставьте SVG-код прямо в страницу, чтобы стилизовать его через CSS.