Lotus アイコン
fluent-emoji:lotus
Lotus アイコン(fluent-emoji:lotus)は、Fluent Emoji セットの無料 SVG アイコンです（作者: Microsoft Corporation）。 32 × 32 のグリッドで描かれています。 Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Fluent Emoji
- 作者
- Microsoft Corporation
- ライセンス
- MIT
- サイズ
- 32 × 32
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><path fill="url(#ibneD4a)" d="M17.688 6.991h-3.372c0-3.208-3.597-5.09-6.241-3.273c-3.68 2.533-6.09 6.78-6.075 11.588c.026 7.751 6.389 14.028 14.136 13.954C23.807 29.186 30 22.948 30 15.258a13.98 13.98 0 0 0-6.106-11.562c-2.632-1.801-6.206.106-6.206 3.295"/><path fill="#EC098D" d="M11.392 6.232a7.317 7.317 0 0 0 4.013 9.536a.73.73 0 0 0 .956-.404a7.317 7.317 0 0 0-4.014-9.536a.73.73 0 0 0-.955.404"/><path fill="#EC098D" d="M15.591 16.207a7.317 7.317 0 0 0 4.014 9.537a.73.73 0 0 0 .955-.404a7.317 7.317 0 0 0-4.013-9.537a.734.734 0 0 0-.956.404"/><path fill="#EC098D" d="M5.978 12.27a7.32 7.32 0 0 0 9.581 3.908a.73.73 0 0 0 .391-.961a7.316 7.316 0 0 0-9.58-3.908a.735.735 0 0 0-.392.962"/><path fill="#EC098D" d="M16.002 16.358a7.316 7.316 0 0 0 9.58 3.907a.73.73 0 0 0 .392-.961a7.316 7.316 0 0 0-9.581-3.908a.733.733 0 0 0-.391.962"/><path fill="#EC098D" d="M6.42 20.371a7.317 7.317 0 0 0 9.537-4.013a.73.73 0 0 0-.404-.956a7.317 7.317 0 0 0-9.536 4.014a.737.737 0 0 0 .403.955"/><path fill="#EC098D" d="M16.396 16.172a7.317 7.317 0 0 0 9.536-4.014a.73.73 0 0 0-.404-.955a7.317 7.317 0 0 0-9.536 4.014a.735.735 0 0 0 .404.955"/><path fill="#EC098D" d="M12.46 25.785a7.316 7.316 0 0 0 3.907-9.58a.733.733 0 0 0-.962-.392a7.315 7.315 0 0 0-3.907 9.581c.157.372.59.548.962.391"/><path fill="#EC098D" d="M16.473 15.752A7.315 7.315 0 0 0 20.38 6.17a.733.733 0 0 0-.961-.391a7.316 7.316 0 0 0-3.908 9.58c.16.376.59.552.962.392"/><path fill="url(#i4LA8Hc)" d="M15.373 3.517a8.484 8.484 0 0 0 0 11.995a.847.847 0 0 0 1.203 0a8.484 8.484 0 0 0 0-11.995a.847.847 0 0 0-1.203 0"/><path fill="url(#ixKND0T)" d="M15.373 16.063a8.484 8.484 0 0 0 0 11.995a.847.847 0 0 0 1.203 0a8.484 8.484 0 0 0 0-11.995a.847.847 0 0 0-1.203 0"/><path fill="url(#iliaBfb)" d="M6.872 7.536a8.483 8.483 0 0 0 8.482 8.482a.85.85 0 0 0 .85-.85a8.483 8.483 0 0 0-8.482-8.481a.847.847 0 0 0-.85.85"/><path fill="url(#i0IjDId)" d="M15.745 16.41a8.483 8.483 0 0 0 8.482 8.481a.85.85 0 0 0 .85-.85a8.483 8.483 0 0 0-8.482-8.481a.847.847 0 0 0-.85.85"/><path fill="url(#iXRAU1y)" d="M3.705 16.39a8.484 8.484 0 0 0 11.995 0a.85.85 0 0 0 0-1.202a8.484 8.484 0 0 0-11.995 0a.847.847 0 0 0 0 1.202"/><path fill="url(#iw3JaYb)" d="M16.252 16.39a8.484 8.484 0 0 0 11.995 0a.847.847 0 0 0 0-1.202a8.483 8.483 0 0 0-11.995 0a.847.847 0 0 0 0 1.202"/><path fill="url(#iUzRYgb)" d="M7.725 24.89a8.483 8.483 0 0 0 8.482-8.481a.85.85 0 0 0-.85-.85a8.48 8.48 0 0 0-8.485 8.48c0 .47.382.852.853.852"/><path fill="url(#iy0qthb)" d="M16.524 15.977a8.483 8.483 0 0 0 8.482-8.482a.85.85 0 0 0-.85-.85a8.483 8.483 0 0 0-8.481 8.482a.847.847 0 0 0 .85.85"/><path fill="url(#ih2MdBe)" d="M15.976 19.278a3.49 3.49 0 1 0 0-6.981a3.49 3.49 0 0 0 0 6.981"/><defs><linearGradient id="ibneD4a" x1="16.001" x2="16.001" y1="3" y2="29.261" gradientUnits="userSpaceOnUse"><stop offset=".011" stop-color="#8ED800"/><stop offset="1" stop-color="#008461"/></linearGradient><linearGradient id="i4LA8Hc" x1="15.976" x2="15.976" y1="3.266" y2="15.76" gradientUnits="userSpaceOnUse"><stop stop-color="#FF74BA"/><stop offset=".436" stop-color="#F748A7"/><stop offset="1" stop-color="#EC098D"/></linearGradient><linearGradient id="ixKND0T" x1="15.978" x2="15.978" y1="28.308" y2="15.813" gradientUnits="userSpaceOnUse"><stop stop-color="#FF74BA"/><stop offset=".436" stop-color="#F748A7"/><stop offset="1" stop-color="#EC098D"/></linearGradient><linearGradient id="iliaBfb" x1="11.54" x2="11.54" y1="6.684" y2="16.017" gradientUnits="userSpaceOnUse"><stop stop-color="#FF74BA"/><stop offset=".436" stop-color="#F748A7"/><stop offset="1" stop-color="#EC098D"/></linearGradient><linearGradient id="i0IjDId" x1="20.413" x2="20.413" y1="24.89" y2="15.557" gradientUnits="userSpaceOnUse"><stop stop-color="#FF74BA"/><stop offset=".436" stop-color="#F748A7"/><stop offset="1" stop-color="#EC098D"/></linearGradient><linearGradient id="iXRAU1y" x1="7.799" x2="11.61" y1="12.483" y2="19.084" gradientUnits="userSpaceOnUse"><stop stop-color="#FF74BA"/><stop offset=".436" stop-color="#F748A7"/><stop offset="1" stop-color="#EC098D"/></linearGradient><linearGradient id="iw3JaYb" x1="25.552" x2="18.952" y1="12.484" y2="19.083" gradientUnits="userSpaceOnUse"><stop stop-color="#FF74BA"/><stop offset=".436" stop-color="#F748A7"/><stop offset="1" stop-color="#EC098D"/></linearGradient><linearGradient id="iUzRYgb" x1="11.54" x2="11.54" y1="24.89" y2="15.557" gradientUnits="userSpaceOnUse"><stop stop-color="#FF74BA"/><stop offset=".436" stop-color="#F748A7"/><stop offset="1" stop-color="#EC098D"/></linearGradient><linearGradient id="iy0qthb" x1="20.339" x2="20.339" y1="6.643" y2="15.976" gradientUnits="userSpaceOnUse"><stop stop-color="#FF74BA"/><stop offset=".436" stop-color="#F748A7"/><stop offset="1" stop-color="#EC098D"/></linearGradient><linearGradient id="ih2MdBe" x1="15.976" x2="15.976" y1="12.296" y2="19.278" gradientUnits="userSpaceOnUse"><stop stop-color="#F8EC1D"/><stop offset=".863" stop-color="#F89C20"/><stop offset="1" stop-color="#F5891F"/></linearGradient></defs></g></svg>Lotus アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:lotus" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:lotus" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:lotus" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--lotus]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:lotus"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:lotus"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-emoji/lotus.svg" alt="Lotus アイコン" width="24" height="24">他のアイコンセットの Lotus アイコン
Lotus アイコン のよくある質問
Lotus アイコンは商用利用でも無料ですか?
はい。Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Lotus アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-emoji:lotus" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Lotus アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-emoji/lotus.svg" alt="Lotus アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。