Infinity アイコン
fluent-emoji:infinity
Infinity アイコン(fluent-emoji:infinity)は、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"><g filter="url(#ijDUgvb)"><path fill="url(#ijWN1Vb)" d="M23.485 9.21c-2.34-.12-4.42.88-5.78 2.53c0 0-1.53 1.98-1.53 1.97c0 0-1.93 2.53-1.92 2.53l-1.66 2.18l-.13.17c-.95 1.27-2.63 1.98-4.4 1.46a3.92 3.92 0 0 1-2.69-2.88a3.985 3.985 0 0 1 3.87-4.9c1.21 0 2.11.51 2.73 1.05c.66.58 1.67.49 2.21-.21c.47-.61.41-1.49-.15-2.01c-3.16-2.9-9.14-2.24-11.05 1.79c-2.48 5.23 1.3 10.39 6.26 10.39c2.18 0 4.13-.97 5.42-2.53l.43-.56s1.09-1.43 1.09-1.42c0 0 1.93-2.53 1.92-2.53l1.69-2.21l.12-.15c.87-1.18 2.37-1.85 4.02-1.53c1.46.29 2.67 1.43 3.03 2.88c.66 2.63-1.32 5-3.85 5c-1.19 0-2.09-.51-2.71-1.06a1.52 1.52 0 0 0-2.21.22c-.49.64-.4 1.53.2 2.07c.93.83 2.52 1.84 4.72 1.84c4.2 0 7.55-3.69 6.98-8c-.44-3.32-3.28-5.92-6.61-6.09"/></g><g filter="url(#i2JL3Bb)"><path stroke="#70B0FF" stroke-linecap="round" stroke-width=".5" d="M12.892 12.025c-1.34-1.213-3.252-1.901-6.043-.809c-3.49 1.366-3.819 5.842-2.352 8.168s5.765 3.945 9.205 0c2.75-3.156 4.585-5.563 5.158-6.372c.91-1.231 3.51-3.348 6.625-1.973c3.895 1.72 3.456 6.622 2.175 8.345c-1.467 1.972-5.007 3.894-8.142.708"/></g><g filter="url(#iPoTtpc)"><path stroke="url(#ixRN6Ne)" stroke-linecap="round" stroke-width=".75" d="M13.246 12.025c-1.34-1.213-3.252-1.901-6.043-.809c-3.49 1.366-3.819 5.842-2.352 8.168s5.765 3.945 9.205 0c2.75-3.156 4.585-5.563 5.158-6.372c.91-1.231 3.51-3.348 6.625-1.973c3.895 1.72 3.456 6.622 2.175 8.345c-1.467 1.972-5.007 3.894-8.142.708"/></g><defs><filter id="ijDUgvb" width="28.555" height="14.7" x="2.203" y="8.6" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".6" dy="-.6"/><feGaussianBlur stdDeviation=".75"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.231373 0 0 0 0 0.376471 0 0 0 0 0.819608 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18590_1754"/></filter><filter id="i2JL3Bb" width="26.896" height="13.198" x="2.675" y="9.591" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18590_1754" stdDeviation=".375"/></filter><filter id="iPoTtpc" width="27.146" height="13.448" x="2.904" y="9.466" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18590_1754" stdDeviation=".375"/></filter><linearGradient id="ijWN1Vb" x1="9.403" x2="32.364" y1="15.389" y2="15.389" gradientUnits="userSpaceOnUse"><stop stop-color="#3A8FEE"/><stop offset="1" stop-color="#5DB7FF"/></linearGradient><linearGradient id="ixRN6Ne" x1="27.862" x2="22.299" y1="10.591" y2="17.209" gradientUnits="userSpaceOnUse"><stop stop-color="#79D8FF"/><stop offset="1" stop-color="#79D8FF" stop-opacity="0"/></linearGradient></defs></g></svg>Infinity アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:infinity" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:infinity" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:infinity" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--infinity]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:infinity"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:infinity"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-emoji/infinity.svg" alt="Infinity アイコン" width="24" height="24">他のアイコンセットの Infinity アイコン
Infinity アイコン のよくある質問
Infinity アイコンは商用利用でも無料ですか?
はい。Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Infinity アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-emoji:infinity" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Infinity アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-emoji/infinity.svg" alt="Infinity アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。