Planet 24 アイコン
fluent-color:planet-24
Planet 24 アイコン(fluent-color:planet-24)は、Fluent UI System Color Icons セットの無料 SVG アイコンです（作者: Microsoft Corporation）。 24 × 24 のグリッドで描かれています。 Fluent UI System Color Icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Fluent UI System Color Icons
- 作者
- Microsoft Corporation
- ライセンス
- MIT
- サイズ
- 24 × 24
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGfFiYYcgu)" d="M20.38 8.713a9 9 0 0 0-1.18.033c-1.882.176-4.367.938-7.542 2.59c-3.073 1.598-5.366 2.274-6.99 2.426a6.2 6.2 0 0 1-1.5-.022a9.004 9.004 0 0 0 17.55.506c1.293-.057 2.37-.648 2.903-1.509c.569-.92.518-2.099-.316-2.956c-.62-.64-1.648-1.01-2.924-1.068"/><path fill="url(#SVGt87x9WEc)" d="M20.38 8.713a9 9 0 0 0-1.18.033c-1.882.176-4.367.938-7.542 2.59c-3.073 1.598-5.366 2.274-6.99 2.426a6.2 6.2 0 0 1-1.5-.022a9.004 9.004 0 0 0 17.55.506c1.293-.057 2.37-.648 2.903-1.509c.569-.92.518-2.099-.316-2.956c-.62-.64-1.648-1.01-2.924-1.068"/><path fill="url(#SVGyhvr2d2j)" d="M20.38 8.713a9 9 0 0 0-1.18.033c-1.882.176-4.367.938-7.542 2.59c-3.073 1.598-5.366 2.274-6.99 2.426a6.2 6.2 0 0 1-1.5-.022a9.004 9.004 0 0 0 17.55.506c1.293-.057 2.37-.648 2.903-1.509c.569-.92.518-2.099-.316-2.956c-.62-.64-1.648-1.01-2.924-1.068"/><path fill="url(#SVGTMPVuc2j)" d="M20.38 8.713a9 9 0 0 0-1.18.033c-1.882.176-4.367.938-7.542 2.59c-3.073 1.598-5.366 2.274-6.99 2.426a6.2 6.2 0 0 1-1.5-.022a9.004 9.004 0 0 0 17.55.506c1.293-.057 2.37-.648 2.903-1.509c.569-.92.518-2.099-.316-2.956c-.62-.64-1.648-1.01-2.924-1.068"/><path fill="url(#SVGhz8wQcQY)" fill-opacity=".5" d="M20.38 8.713a9 9 0 0 0-1.18.033c-1.882.176-4.367.938-7.542 2.59c-3.073 1.598-5.366 2.274-6.99 2.426a6.2 6.2 0 0 1-1.5-.022a9.004 9.004 0 0 0 17.55.506c1.293-.057 2.37-.648 2.903-1.509c.569-.92.518-2.099-.316-2.956c-.62-.64-1.648-1.01-2.924-1.068"/><path fill="url(#SVG5FdDxYEi)" d="M20.38 8.713a9 9 0 0 0-1.18.033c-1.882.176-4.367.938-7.542 2.59c-3.073 1.598-5.366 2.274-6.99 2.426a6.2 6.2 0 0 1-1.5-.022a9.004 9.004 0 0 0 17.55.506c1.293-.057 2.37-.648 2.903-1.509c.569-.92.518-2.099-.316-2.956c-.62-.64-1.648-1.01-2.924-1.068"/><path fill="url(#SVGg9Q2BCTX)" d="m3.641 15.343l.002-.03c3.03 0 5.433-1.56 7.9-3.16c2.603-1.69 5.278-3.427 8.836-3.427l.006-.003a9.003 9.003 0 0 0-17.102 1.03c-1.294.058-2.371.651-2.904 1.513c-.569.92-.519 2.098.315 2.956c.621.639 1.649 1.008 2.925 1.065z"/><path fill="url(#SVGSiGApbwa)" d="m3.641 15.343l.002-.03c3.03 0 5.433-1.56 7.9-3.16c2.603-1.69 5.278-3.427 8.836-3.427l.006-.003a9.003 9.003 0 0 0-17.102 1.03c-1.294.058-2.371.651-2.904 1.513c-.569.92-.519 2.098.315 2.956c.621.639 1.649 1.008 2.925 1.065z"/><path fill="url(#SVGWwmM7K8s)" d="m3.641 15.343l.002-.03c3.03 0 5.433-1.56 7.9-3.16c2.603-1.69 5.278-3.427 8.836-3.427l.006-.003a9.003 9.003 0 0 0-17.102 1.03c-1.294.058-2.371.651-2.904 1.513c-.569.92-.519 2.098.315 2.956c.621.639 1.649 1.008 2.925 1.065z"/><path fill="url(#SVGQf3RZcvT)" d="m3.641 15.343l.002-.03c3.03 0 5.433-1.56 7.9-3.16c2.603-1.69 5.278-3.427 8.836-3.427l.006-.003a9.003 9.003 0 0 0-17.102 1.03c-1.294.058-2.371.651-2.904 1.513c-.569.92-.519 2.098.315 2.956c.621.639 1.649 1.008 2.925 1.065z"/><defs><radialGradient id="SVGfFiYYcgu" cx="0" cy="0" r="1" gradientTransform="rotate(233.173 15.401 6.204)scale(19.13 19.1438)" gradientUnits="userSpaceOnUse"><stop stop-color="#8f77ff"/><stop offset=".457" stop-color="#775be3"/><stop offset=".656" stop-color="#6552d9"/></radialGradient><radialGradient id="SVGt87x9WEc" cx="0" cy="0" r="1" gradientTransform="rotate(161.074 10.505 9.01)scale(4.23938 10.3453)" gradientUnits="userSpaceOnUse"><stop offset=".241" stop-color="#6e30c8"/><stop offset="1" stop-color="#6730c6" stop-opacity="0"/></radialGradient><radialGradient id="SVGyhvr2d2j" cx="0" cy="0" r="1" gradientTransform="rotate(234.393 15.05 8.952)scale(8.60975 33.3829)" gradientUnits="userSpaceOnUse"><stop stop-color="#f36284"/><stop offset="1" stop-color="#f36284" stop-opacity="0"/></radialGradient><radialGradient id="SVGTMPVuc2j" cx="0" cy="0" r="1" gradientTransform="matrix(-16.6048 0 0 -9.07115 24.868 8.706)" gradientUnits="userSpaceOnUse"><stop stop-color="#7d40c8"/><stop offset="1" stop-color="#7f45d2" stop-opacity="0"/></radialGradient><radialGradient id="SVGhz8wQcQY" cx="0" cy="0" r="1" gradientTransform="rotate(54.718 -12.806 23.267)scale(18.0302 55.3181)" gradientUnits="userSpaceOnUse"><stop offset=".265" stop-color="#0a26b5" stop-opacity="0"/><stop offset=".581" stop-color="#051d92"/></radialGradient><radialGradient id="SVG5FdDxYEi" cx="0" cy="0" r="1" gradientTransform="rotate(175.866 11.931 8.285)scale(4.33478 11.3328)" gradientUnits="userSpaceOnUse"><stop offset=".195" stop-color="#e173e7"/><stop offset=".901" stop-color="#e173e7" stop-opacity="0"/></radialGradient><radialGradient id="SVGg9Q2BCTX" cx="0" cy="0" r="1" gradientTransform="rotate(36.541 -2.73 10.806)scale(18.7897 18.7776)" gradientUnits="userSpaceOnUse"><stop stop-color="#3dd3dc"/><stop offset="1" stop-color="#4290f0"/></radialGradient><radialGradient id="SVGSiGApbwa" cx="0" cy="0" r="1" gradientTransform="rotate(-52.35 10.046 4.936)scale(6.47293 15.7391)" gradientUnits="userSpaceOnUse"><stop offset=".285" stop-color="#3a80e1"/><stop offset="1" stop-color="#488ae5" stop-opacity="0"/></radialGradient><radialGradient id="SVGWwmM7K8s" cx="0" cy="0" r="1" gradientTransform="rotate(-10.158 44.656 3.96)scale(3.18956 9.84778)" gradientUnits="userSpaceOnUse"><stop offset=".232" stop-color="#3dd3dc"/><stop offset="1" stop-color="#3dd3dc" stop-opacity="0"/></radialGradient><radialGradient id="SVGQf3RZcvT" cx="0" cy="0" r="1" gradientTransform="rotate(68.14 .132 5.85)scale(12.5703 38.1896)" gradientUnits="userSpaceOnUse"><stop offset=".576" stop-color="#26cfdb" stop-opacity="0"/><stop offset="1" stop-color="#19d9e7"/></radialGradient></defs></g></svg>Planet 24 アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-color:planet-24" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-color:planet-24" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-color:planet-24" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-color--planet-24]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-color -->
<div class="i-fluent-color:planet-24"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-color:planet-24"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-color/planet-24.svg" alt="Planet 24 アイコン" width="24" height="24">Fluent UI System Color Icons の関連アイコン
Planet 24 アイコン のよくある質問
Planet 24 アイコンは商用利用でも無料ですか?
はい。Fluent UI System Color Icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Planet 24 アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-color:planet-24" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Planet 24 アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-color/planet-24.svg" alt="Planet 24 アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。