Heart Exclamation アイコン
fluent-emoji:heart-exclamation
Heart Exclamation アイコン(fluent-emoji:heart-exclamation)は、Fluent Emoji セットの無料 SVG アイコンです（作者: Microsoft Corporation）。 32 × 32 のグリッドで描かれています。 Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Fluent Emoji
- 作者
- Microsoft Corporation
- ライセンス
- MIT
- サイズ
- 32 × 32
- タグ
- heartexclamation
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><path fill="url(#iABBTve)" d="M15.257 21.947a1.7 1.7 0 0 0 1.708-.02c2.947-1.718 7.888-5.519 9.85-10.43c2.93-6.51-3.95-11.706-8.706-7.969c-.463.364-1.038.777-1.461 1.174c-.243.228-.667.252-.917.03c-.565-.5-1.385-1.11-1.921-1.473c-4.055-2.743-11.431.873-8.285 8.59C6.66 15.256 12 20.07 15.257 21.946"/><path fill="url(#iybuSxc)" d="M15.257 21.947a1.7 1.7 0 0 0 1.708-.02c2.947-1.718 7.888-5.519 9.85-10.43c2.93-6.51-3.95-11.706-8.706-7.969c-.463.364-1.038.777-1.461 1.174c-.243.228-.667.252-.917.03c-.565-.5-1.385-1.11-1.921-1.473c-4.055-2.743-11.431.873-8.285 8.59C6.66 15.256 12 20.07 15.257 21.946"/><path fill="url(#i41gsid)" d="M15.257 21.947a1.7 1.7 0 0 0 1.708-.02c2.947-1.718 7.888-5.519 9.85-10.43c2.93-6.51-3.95-11.706-8.706-7.969c-.463.364-1.038.777-1.461 1.174c-.243.228-.667.252-.917.03c-.565-.5-1.385-1.11-1.921-1.473c-4.055-2.743-11.431.873-8.285 8.59C6.66 15.256 12 20.07 15.257 21.946"/><path fill="url(#ip3rmAe)" d="M15.257 21.947a1.7 1.7 0 0 0 1.708-.02c2.947-1.718 7.888-5.519 9.85-10.43c2.93-6.51-3.95-11.706-8.706-7.969c-.463.364-1.038.777-1.461 1.174c-.243.228-.667.252-.917.03c-.565-.5-1.385-1.11-1.921-1.473c-4.055-2.743-11.431.873-8.285 8.59C6.66 15.256 12 20.07 15.257 21.946"/><path fill="url(#i3hdmFf)" d="M15.257 21.947a1.7 1.7 0 0 0 1.708-.02c2.947-1.718 7.888-5.519 9.85-10.43c2.93-6.51-3.95-11.706-8.706-7.969c-.463.364-1.038.777-1.461 1.174c-.243.228-.667.252-.917.03c-.565-.5-1.385-1.11-1.921-1.473c-4.055-2.743-11.431.873-8.285 8.59C6.66 15.256 12 20.07 15.257 21.946"/><path fill="url(#iBh9dyb)" d="M15.257 21.947a1.7 1.7 0 0 0 1.708-.02c2.947-1.718 7.888-5.519 9.85-10.43c2.93-6.51-3.95-11.706-8.706-7.969c-.463.364-1.038.777-1.461 1.174c-.243.228-.667.252-.917.03c-.565-.5-1.385-1.11-1.921-1.473c-4.055-2.743-11.431.873-8.285 8.59C6.66 15.256 12 20.07 15.257 21.946"/><g filter="url(#iQHlFhd)"><path fill="#FA1C56" d="M16.623 6.943v9.556c0 .905 1.026 1.273 1.5.502c1.475-2.403 2.781-5.907 1.906-8.724c-.485-1.561-1.906-2.158-2.853-2.073c-.357.033-.553.38-.553.739"/></g><g filter="url(#i6ccS6b)"><ellipse cx="23.278" cy="7.345" fill="url(#iebHbQb)" rx="3.399" ry="2.338" transform="rotate(-44.19 23.278 7.345)"/></g><circle cx="16" cy="26.977" r="3.211" fill="url(#ic68IMc)"/><circle cx="16" cy="26.977" r="3.211" fill="url(#in3uV9D)"/><circle cx="16" cy="26.977" r="3.211" fill="url(#iXaZKdc)"/><g filter="url(#iF5VieE)"><ellipse cx="17.073" cy="26.435" fill="url(#izSpfBc)" rx="1.363" ry="1.266" transform="rotate(-21.467 17.073 26.435)"/></g><g filter="url(#i57iusb)"><ellipse cx="14.063" cy="7.345" fill="url(#ij404be)" fill-opacity=".6" rx="3.905" ry="2.107" transform="rotate(-128.955 14.063 7.345)"/></g><defs><radialGradient id="iABBTve" cx="0" cy="0" r="1" gradientTransform="matrix(0 -26.6008 45.2214 0 18.45 21.854)" gradientUnits="userSpaceOnUse"><stop stop-color="#F12E52"/><stop offset=".596" stop-color="#FF3B79"/><stop offset="1" stop-color="#FF4EC6"/></radialGradient><radialGradient id="iybuSxc" cx="0" cy="0" r="1" gradientTransform="matrix(-17.09851 12.8912 -24.1465 -32.02721 21.787 7.47)" gradientUnits="userSpaceOnUse"><stop offset=".483" stop-color="#B91D43" stop-opacity="0"/><stop offset=".834" stop-color="#B91D43"/></radialGradient><radialGradient id="i41gsid" cx="0" cy="0" r="1" gradientTransform="rotate(-158.663 10.855 4.539)scale(18.5745 26.2576)" gradientUnits="userSpaceOnUse"><stop offset=".41" stop-color="#B91D43" stop-opacity="0"/><stop offset=".834" stop-color="#B91D43"/></radialGradient><radialGradient id="ip3rmAe" cx="0" cy="0" r="1" gradientTransform="rotate(90 3.11 12.582)scale(16.1659)" gradientUnits="userSpaceOnUse"><stop offset=".671" stop-color="#FF7AF2" stop-opacity="0"/><stop offset=".934" stop-color="#FFBCE6"/></radialGradient><radialGradient id="iebHbQb" cx="0" cy="0" r="1" gradientTransform="matrix(-5.01798 -.28275 .19092 -3.38837 26.698 8.064)" gradientUnits="userSpaceOnUse"><stop stop-color="#FF93BA"/><stop offset="1" stop-color="#FF73A6" stop-opacity="0"/></radialGradient><radialGradient id="ic68IMc" cx="0" cy="0" r="1" gradientTransform="rotate(-45 43.089 -2.228)scale(7.4596 12.0939)" gradientUnits="userSpaceOnUse"><stop stop-color="#F12E52"/><stop offset=".596" stop-color="#FF3B79"/><stop offset="1" stop-color="#FF4EC6"/></radialGradient><radialGradient id="in3uV9D" cx="0" cy="0" r="1" gradientTransform="rotate(110.556 -1.171 18.778)scale(4.73925 4.85721)" gradientUnits="userSpaceOnUse"><stop offset=".671" stop-color="#FF7AF2" stop-opacity="0"/><stop offset=".934" stop-color="#FFBCE6"/></radialGradient><radialGradient id="iXaZKdc" cx="0" cy="0" r="1" gradientTransform="rotate(-152.663 13.124 12.133)scale(8.30216 8.87118)" gradientUnits="userSpaceOnUse"><stop offset=".41" stop-color="#B91D43" stop-opacity="0"/><stop offset=".834" stop-color="#B91D43"/></radialGradient><radialGradient id="izSpfBc" cx="0" cy="0" r="1" gradientTransform="rotate(174.347 8.715 13.789)scale(3.03081 5.73982)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA3BD"/><stop offset="1" stop-color="#FF80A3" stop-opacity="0"/></radialGradient><radialGradient id="ij404be" cx="0" cy="0" r="1" gradientTransform="matrix(-8.30787 -.19332 .10239 -4.40002 16.367 7.914)" gradientUnits="userSpaceOnUse"><stop stop-color="#FF93BA"/><stop offset="1" stop-color="#FF73A6" stop-opacity="0"/></radialGradient><filter id="iQHlFhd" width="7.689" height="15.223" x="14.623" y="4.196" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7000_5051" stdDeviation="1"/></filter><filter id="i6ccS6b" width="8.864" height="8.805" x="18.846" y="2.942" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7000_5051" stdDeviation=".75"/></filter><filter id="iF5VieE" width="4.702" height="4.56" x="14.722" y="24.154" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7000_5051" stdDeviation=".5"/></filter><filter id="i57iusb" width="8.903" height="9.627" x="9.611" y="2.531" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7000_5051" stdDeviation=".75"/></filter><linearGradient id="i3hdmFf" x1="17.477" x2="24.018" y1="11.364" y2="19.15" gradientUnits="userSpaceOnUse"><stop offset=".694" stop-color="#FF7AF2" stop-opacity="0"/><stop offset=".934" stop-color="#FFBCE6"/></linearGradient><linearGradient id="iBh9dyb" x1="16.666" x2="8.988" y1="11.689" y2="20.34" gradientUnits="userSpaceOnUse"><stop offset=".694" stop-color="#FF7AF2" stop-opacity="0"/><stop offset=".934" stop-color="#FFBCE6"/></linearGradient></defs></g></svg>Heart Exclamation アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:heart-exclamation" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:heart-exclamation" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:heart-exclamation" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--heart-exclamation]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:heart-exclamation"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:heart-exclamation"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-emoji/heart-exclamation.svg" alt="Heart Exclamation アイコン" width="24" height="24">Fluent Emoji の関連アイコン
他のアイコンセットの Heart Exclamation アイコン
Heart Exclamation アイコン のよくある質問
Heart Exclamation アイコンは商用利用でも無料ですか?
はい。Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Heart Exclamation アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-emoji:heart-exclamation" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Heart Exclamation アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-emoji/heart-exclamation.svg" alt="Heart Exclamation アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。