Green Heart アイコン

Q: Green Heart アイコンは商用利用でも無料ですか?

はい。Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。

fluent-emoji:green-heart

Green Heart アイコン(fluent-emoji:green-heart)は、Fluent Emoji セットの無料 SVG アイコンです（作者: Microsoft Corporation）。 32 × 32 のグリッドで描かれています。 Fluent Emoji icons は MIT ライセンスで公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット: Fluent Emoji
作者: Microsoft Corporation
ライセンス: MIT
サイズ: 32 × 32
タグ: greenheart

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><path fill="url(#igwHOnb)" 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(#i4T0ZPr)" 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(#iOrCJ9f)" 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(#ieo9ghd)" 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(#isQasTc)" 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(#iPWT4je)" 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(#izwp7Cb)" 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(#iA8DDVc)" 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(#iagkC0j)" 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(#iAXXmLB)"><path fill="#2EBC6F" d="M15.795 10.54v6.823c0 .905 1.096 1.334 1.66.627c1.745-2.19 3.153-4.851 1.582-7.025c-.602-.834-1.756-1.368-2.699-1.198c-.353.063-.543.415-.543.774"/></g><g filter="url(#iRc33Qc)"><path fill="url(#i42XdnC)" d="M25.908 6.91c2.598 1.07 3.38 5.152 1.747 9.12c-1.632 3.966-5.062 6.315-7.66 5.245s-3.38-5.152-1.748-9.118C19.88 8.19 23.31 5.84 25.907 6.91"/></g><g filter="url(#ik6OJms)"><path fill="url(#iO6C4Vc)" d="m14.84 9.846l.205 10.366C8.17 13.525 6.939 8.734 9.277 7.127c1.67-1.147 4.813 1.156 5.563 2.719"/></g><g filter="url(#iJxEjJM)"><path stroke="url(#iLXdCWc)" stroke-linecap="round" stroke-opacity=".5" stroke-width=".25" d="M21.831 6.388c1.087-.135 4.786.121 6.042 3.322"/></g><g filter="url(#ipIQzze)"><path stroke="url(#ioYlvTc)" stroke-linecap="round" stroke-opacity=".5" stroke-width=".25" d="M8.44 6.413c1.087-.135 4.025 0 6.4 3.433"/></g><defs><radialGradient id="igwHOnb" cx="0" cy="0" r="1" gradientTransform="matrix(0 25.0559 -26.6012 0 15.77 5.634)" gradientUnits="userSpaceOnUse"><stop offset=".204" stop-color="#31C66A"/><stop offset=".528" stop-color="#40B98A"/><stop offset="1" stop-color="#43A395"/></radialGradient><radialGradient id="i4T0ZPr" cx="0" cy="0" r="1" gradientTransform="rotate(-57.293 33.282 3.665)scale(30.305 28.3828)" gradientUnits="userSpaceOnUse"><stop offset=".801" stop-color="#5BE689" stop-opacity="0"/><stop offset="1" stop-color="#5BE689"/></radialGradient><radialGradient id="isQasTc" cx="0" cy="0" r="1" gradientTransform="matrix(0 26.6875 -33.0073 0 15.895 6.064)" gradientUnits="userSpaceOnUse"><stop offset=".733" stop-color="#408B91" stop-opacity="0"/><stop offset=".895" stop-color="#408B91"/></radialGradient><radialGradient id="iPWT4je" cx="0" cy="0" r="1" gradientTransform="matrix(-11.74996 10.8126 -15.86844 -17.2441 19.965 13.377)" gradientUnits="userSpaceOnUse"><stop offset=".616" stop-color="#408B91" stop-opacity="0"/><stop offset="1" stop-color="#408B91"/></radialGradient><radialGradient id="izwp7Cb" cx="0" cy="0" r="1" gradientTransform="matrix(-20.12509 -26.99987 27.39507 -20.41966 19.465 27.69)" gradientUnits="userSpaceOnUse"><stop offset=".669" stop-color="#409157" stop-opacity="0"/><stop offset="1" stop-color="#409157"/></radialGradient><radialGradient id="iA8DDVc" cx="0" cy="0" r="1" gradientTransform="matrix(0 17.499 -19.705 0 15.447 13.815)" gradientUnits="userSpaceOnUse"><stop offset=".764" stop-color="#8590CE" stop-opacity="0"/><stop offset=".934" stop-color="#8590CE"/></radialGradient><radialGradient id="iagkC0j" cx="0" cy="0" r="1" gradientTransform="scale(17.6425 17.499)rotate(90 .043 .833)" gradientUnits="userSpaceOnUse"><stop offset=".864" stop-color="#ADB6E8" stop-opacity="0"/><stop offset=".934" stop-color="#ADB6E8"/></radialGradient><radialGradient id="i42XdnC" cx="0" cy="0" r="1" gradientTransform="rotate(113.398 11.914 11.344)scale(15.0883 5.91581)" gradientUnits="userSpaceOnUse"><stop stop-color="#48FF90"/><stop offset="1" stop-color="#48FF90" stop-opacity="0"/></radialGradient><radialGradient id="iO6C4Vc" cx="0" cy="0" r="1" gradientTransform="matrix(-6.68755 -6.56244 11.64945 -11.87155 16.402 11.877)" gradientUnits="userSpaceOnUse"><stop stop-color="#80F2AD"/><stop offset="1" stop-color="#68EC9C" stop-opacity="0"/></radialGradient><filter id="iAXXmLB" width="7.923" height="12.608" x="13.795" y="7.735" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7320_6094" stdDeviation="1"/></filter><filter id="iRc33Qc" width="14.114" height="17.881" x="15.894" y="5.152" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7320_6094" stdDeviation=".75"/></filter><filter id="ik6OJms" width="12.852" height="19.394" x="5.192" y="3.818" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7320_6094" stdDeviation="1.5"/></filter><filter id="iJxEjJM" width="8.292" height="5.6" x="20.706" y="5.236" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7320_6094" stdDeviation=".5"/></filter><filter id="ipIQzze" width="8.649" height="5.715" x="7.316" y="5.256" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_7320_6094" stdDeviation=".5"/></filter><linearGradient id="iOrCJ9f" x1="17.632" x2="25.645" y1="16.133" y2="25.668" gradientUnits="userSpaceOnUse"><stop offset=".694" stop-color="#8590CE" stop-opacity="0"/><stop offset=".934" stop-color="#8590CE"/></linearGradient><linearGradient id="ieo9ghd" x1="16.639" x2="7.152" y1="16.53" y2="26.439" gradientUnits="userSpaceOnUse"><stop offset=".694" stop-color="#8590CE" stop-opacity="0"/><stop offset=".885" stop-color="#7E8DE2"/></linearGradient><linearGradient id="iLXdCWc" x1="26.46" x2="23.806" y1="8.131" y2="6.792" gradientUnits="userSpaceOnUse"><stop stop-color="#48FF90"/><stop offset="1" stop-color="#48FF90" stop-opacity="0"/></linearGradient><linearGradient id="ioYlvTc" x1="13.069" x2="10.415" y1="8.156" y2="6.818" gradientUnits="userSpaceOnUse"><stop stop-color="#48FF90"/><stop offset="1" stop-color="#48FF90" stop-opacity="0"/></linearGradient></defs></g></svg>

Green Heart アイコンの使い方

React

import { Icon } from "@iconify/react";

<Icon icon="fluent-emoji:green-heart" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="fluent-emoji:green-heart" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="fluent-emoji:green-heart" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--green-heart]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:green-heart"></div>

Web コンポーネント

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="fluent-emoji:green-heart"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/fluent-emoji/green-heart.svg" alt="Green Heart アイコン" width="24" height="24">

Fluent Emoji の関連アイコン

他のアイコンセットの Green Heart アイコン

Green Heart アイコンのよくある質問

Green Heart アイコンは商用利用でも無料ですか?

はい。Fluent Emoji icons は MIT ライセンスで公開されており、個人・商用プロジェクトで利用できます。

React で Green Heart アイコンを使うには?

@iconify/react をインストールして <Icon icon="fluent-emoji:green-heart" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。

Green Heart アイコンをウェブページに追加するには?

画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-emoji/green-heart.svg" alt="Green Heart アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。

Fluent Emoji アイコンをすべて見る →