Иконка Orange Heart
fluent-emoji:orange-heart
Иконка Orange Heart (fluent-emoji:orange-heart) — бесплатная SVG-иконка из набора Fluent Emoji от Microsoft Corporation. Она нарисована на сетке 32 × 32. Fluent Emoji icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах. Скопируйте её как код SVG, JSX, Vue или Svelte или скачайте SVG-файл.
- Набор
- Fluent Emoji
- Автор
- Microsoft Corporation
- Лицензия
- MIT
- Размер
- 32 × 32
- Теги
- orangeheart
Код SVG
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><path fill="url(#i6684ed)" d="M15.104 29.202a1.73 1.73 0 0 0 1.71-.023c3.584-2.047 9.81-6.761 12.255-12.884c3.59-7.973-4.838-14.337-10.662-9.76c-.608.478-1.372 1.025-1.897 1.542c-.238.234-.657.258-.904.034c-.69-.63-1.771-1.436-2.465-1.905c-4.965-3.36-14 1.069-10.146 10.52c1.412 4.242 8.14 10.26 12.11 12.476"/><path fill="url(#i0SdE4b)" d="M15.104 29.202a1.73 1.73 0 0 0 1.71-.023c3.584-2.047 9.81-6.761 12.255-12.884c3.59-7.973-4.838-14.337-10.662-9.76c-.608.478-1.372 1.025-1.897 1.542c-.238.234-.657.258-.904.034c-.69-.63-1.771-1.436-2.465-1.905c-4.965-3.36-14 1.069-10.146 10.52c1.412 4.242 8.14 10.26 12.11 12.476"/><path fill="url(#iXj5SFd)" d="M15.104 29.202a1.73 1.73 0 0 0 1.71-.023c3.584-2.047 9.81-6.761 12.255-12.884c3.59-7.973-4.838-14.337-10.662-9.76c-.608.478-1.372 1.025-1.897 1.542c-.238.234-.657.258-.904.034c-.69-.63-1.771-1.436-2.465-1.905c-4.965-3.36-14 1.069-10.146 10.52c1.412 4.242 8.14 10.26 12.11 12.476"/><path fill="url(#iqtJypb)" d="M15.104 29.202a1.73 1.73 0 0 0 1.71-.023c3.584-2.047 9.81-6.761 12.255-12.884c3.59-7.973-4.838-14.337-10.662-9.76c-.608.478-1.372 1.025-1.897 1.542c-.238.234-.657.258-.904.034c-.69-.63-1.771-1.436-2.465-1.905c-4.965-3.36-14 1.069-10.146 10.52c1.412 4.242 8.14 10.26 12.11 12.476"/><path fill="url(#ialEbhe)" d="M15.104 29.202a1.73 1.73 0 0 0 1.71-.023c3.584-2.047 9.81-6.761 12.255-12.884c3.59-7.973-4.838-14.337-10.662-9.76c-.608.478-1.372 1.025-1.897 1.542c-.238.234-.657.258-.904.034c-.69-.63-1.771-1.436-2.465-1.905c-4.965-3.36-14 1.069-10.146 10.52c1.412 4.242 8.14 10.26 12.11 12.476"/><path fill="url(#iqdc8Qc)" d="M15.104 29.202a1.73 1.73 0 0 0 1.71-.023c3.584-2.047 9.81-6.761 12.255-12.884c3.59-7.973-4.838-14.337-10.662-9.76c-.608.478-1.372 1.025-1.897 1.542c-.238.234-.657.258-.904.034c-.69-.63-1.771-1.436-2.465-1.905c-4.965-3.36-14 1.069-10.146 10.52c1.412 4.242 8.14 10.26 12.11 12.476"/><g filter="url(#i85SZnM)"><path fill="#FF6826" d="M16.233 10.478v6.823c0 .905 1.1 1.338 1.674.638c1.728-2.112 3.163-4.647 2.093-7.093c-.554-1.267-2.151-1.476-3.232-1.167c-.345.099-.535.44-.535.8"/></g><g filter="url(#i4kb5ud)"><ellipse cx="24.259" cy="12.324" fill="url(#igkGkDb)" fill-opacity=".6" rx="5.33" ry="4.176" transform="rotate(-44.19 24.259 12.324)"/></g><g filter="url(#ijQuE0c)"><ellipse cx="23.316" cy="6.463" fill="#FF8557" rx="1.693" ry=".356" transform="rotate(7.165 23.316 6.463)"/></g><g filter="url(#iINSggb)"><ellipse cx="9.276" cy="6.053" fill="#FF8557" rx="1.519" ry=".249" transform="rotate(-.697 9.276 6.053)"/></g><g filter="url(#iGnubqr)"><path fill="url(#i99ZEib)" fill-opacity=".75" d="m14.732 9.962l.313 10.25C8.17 13.524 6.848 8.828 9.482 7.774c2.5-1 4.5.625 5.25 2.188"/></g><defs><radialGradient id="i6684ed" cx="0" cy="0" r="1" gradientTransform="rotate(108.641 4.184 12.312)scale(24.5702 36.1876)" gradientUnits="userSpaceOnUse"><stop stop-color="#FF753D"/><stop offset="1" stop-color="#FF7670"/></radialGradient><radialGradient id="i0SdE4b" cx="0" cy="0" r="1" gradientTransform="rotate(-152.069 11.282 6.404)scale(22.2832 31.5004)" gradientUnits="userSpaceOnUse"><stop offset=".41" stop-color="#B13E20" stop-opacity="0"/><stop offset="1" stop-color="#B34E33"/></radialGradient><radialGradient id="iqtJypb" cx="0" cy="0" r="1" gradientTransform="matrix(0 19.7992 -26.4278 0 15.447 13.816)" gradientUnits="userSpaceOnUse"><stop offset=".671" stop-color="#FF79CC" stop-opacity="0"/><stop offset=".934" stop-color="#FF79CC"/></radialGradient><radialGradient id="igkGkDb" cx="0" cy="0" r="1" gradientTransform="rotate(173.315 14.436 6.955)scale(8.70393 10.9507)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC289"/><stop offset="1" stop-color="#FFC289" stop-opacity="0"/></radialGradient><radialGradient id="i99ZEib" cx="0" cy="0" r="1" gradientTransform="matrix(-10.06248 -1.99991 5.64058 -28.3804 20.813 10.346)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC289"/><stop offset="1" stop-color="#FFC289" stop-opacity="0"/></radialGradient><filter id="i85SZnM" width="8.135" height="12.733" x="14.233" y="7.553" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7305_6103" stdDeviation="1"/></filter><filter id="i4kb5ud" width="12.609" height="12.544" x="17.954" y="6.052" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7305_6103" stdDeviation=".75"/></filter><filter id="ijQuE0c" width="7.36" height="4.823" x="19.636" y="4.052" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7305_6103" stdDeviation="1"/></filter><filter id="iINSggb" width="6.037" height="3.5" x="6.257" y="4.303" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7305_6103" stdDeviation=".75"/></filter><filter id="iGnubqr" width="12.825" height="18.745" x="5.22" y="4.467" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7305_6103" stdDeviation="1.5"/></filter><linearGradient id="iXj5SFd" x1="13.688" x2="4.687" y1="16.346" y2="26.033" gradientUnits="userSpaceOnUse"><stop offset=".151" stop-color="#D8505A" stop-opacity="0"/><stop offset="1" stop-color="#B73D46"/></linearGradient><linearGradient id="ialEbhe" x1="17.632" x2="25.645" y1="16.133" y2="25.669" gradientUnits="userSpaceOnUse"><stop offset=".694" stop-color="#FF7AF2" stop-opacity="0"/><stop offset=".934" stop-color="#FFBCE6"/></linearGradient><linearGradient id="iqdc8Qc" x1="16.639" x2="7.236" y1="16.53" y2="27.125" gradientUnits="userSpaceOnUse"><stop offset=".694" stop-color="#FF7AF2" stop-opacity="0"/><stop offset=".934" stop-color="#FFBCE6"/></linearGradient></defs></g></svg>Как использовать иконку Orange Heart
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:orange-heart" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:orange-heart" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:orange-heart" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--orange-heart]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:orange-heart"></div>Веб-компонент
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:orange-heart"></iconify-icon>Изображение HTML
<img src="https://iconyz.com/api/public/svg/fluent-emoji/orange-heart.svg" alt="Иконка Orange Heart" width="24" height="24">Похожие иконки в наборе Fluent Emoji
Иконка Orange Heart в других наборах
Вопросы и ответы: Иконка Orange Heart
Можно ли бесплатно использовать иконку Orange Heart в коммерческих проектах?
Да. Fluent Emoji icons выпущены под лицензией MIT, которая разрешает использование в личных и коммерческих проектах.
Как использовать иконку Orange Heart в React?
Установите @iconify/react и выведите <Icon icon="fluent-emoji:orange-heart" /> или нажмите «Копировать код» на этой странице, чтобы получить отдельный React-компонент.
Как добавить иконку Orange Heart на веб-страницу?
Подключите SVG-файл в теге изображения: <img src="https://iconyz.com/api/public/svg/fluent-emoji/orange-heart.svg" alt="Иконка Orange Heart">, или вставьте SVG-код прямо в страницу, чтобы стилизовать его через CSS.