Planet 16 アイコン

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

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

fluent-color:planet-16

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

アイコンセット: Fluent UI System Color Icons
作者: Microsoft Corporation
ライセンス: MIT
サイズ: 16 × 16

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVGWdk9GE6U)" d="M14.725 6.053a3 3 0 0 0-1.157-.293C13.255 4.982 2.496 9.5 2.496 9.5l-.064.74a6.002 6.002 0 0 0 11.229-.246c.89-.066 1.766-.656 2.136-1.397c.203-.408.28-.894.11-1.376c-.172-.481-.603-.877-1.182-1.168"/><path fill="url(#SVGVuzGleKA)" d="M14.725 6.053a3 3 0 0 0-1.157-.293C13.255 4.982 2.496 9.5 2.496 9.5l-.064.74a6.002 6.002 0 0 0 11.229-.246c.89-.066 1.766-.656 2.136-1.397c.203-.408.28-.894.11-1.376c-.172-.481-.603-.877-1.182-1.168"/><path fill="url(#SVGJxZ2LeCd)" d="M14.725 6.053a3 3 0 0 0-1.157-.293C13.255 4.982 2.496 9.5 2.496 9.5l-.064.74a6.002 6.002 0 0 0 11.229-.246c.89-.066 1.766-.656 2.136-1.397c.203-.408.28-.894.11-1.376c-.172-.481-.603-.877-1.182-1.168"/><path fill="url(#SVGNtwyGduB)" d="M14.725 6.053a3 3 0 0 0-1.157-.293C13.255 4.982 2.496 9.5 2.496 9.5l-.064.74a6.002 6.002 0 0 0 11.229-.246c.89-.066 1.766-.656 2.136-1.397c.203-.408.28-.894.11-1.376c-.172-.481-.603-.877-1.182-1.168"/><path fill="url(#SVGSV4rteRq)" fill-opacity=".5" d="M14.725 6.053a3 3 0 0 0-1.157-.293C13.255 4.982 2.496 9.5 2.496 9.5l-.064.74a6.002 6.002 0 0 0 11.229-.246c.89-.066 1.766-.656 2.136-1.397c.203-.408.28-.894.11-1.376c-.172-.481-.603-.877-1.182-1.168"/><path fill="url(#SVGAcf0Ep3j)" d="M14.725 6.053a3 3 0 0 0-1.157-.293C13.255 4.982 2.496 9.5 2.496 9.5l-.064.74a6.002 6.002 0 0 0 11.229-.246c.89-.066 1.766-.656 2.136-1.397c.203-.408.28-.894.11-1.376c-.172-.481-.603-.877-1.182-1.168"/><path fill="url(#SVG9MxAObUH)" d="M1.275 9.947a3 3 0 0 0 1.157.293l.006.015v-.016c1.982 0 3.776-1.12 5.57-2.24c1.79-1.119 3.582-2.237 5.56-2.24a6.002 6.002 0 0 0-11.229.247c-.893.065-1.76.65-2.13 1.39c-.204.409-.282.895-.11 1.376c.17.482.597.884 1.176 1.175"/><path fill="url(#SVGJzJUHePp)" d="M1.275 9.947a3 3 0 0 0 1.157.293l.006.015v-.016c1.982 0 3.776-1.12 5.57-2.24c1.79-1.119 3.582-2.237 5.56-2.24a6.002 6.002 0 0 0-11.229.247c-.893.065-1.76.65-2.13 1.39c-.204.409-.282.895-.11 1.376c.17.482.597.884 1.176 1.175"/><path fill="url(#SVGoO1iaera)" d="M1.275 9.947a3 3 0 0 0 1.157.293l.006.015v-.016c1.982 0 3.776-1.12 5.57-2.24c1.79-1.119 3.582-2.237 5.56-2.24a6.002 6.002 0 0 0-11.229.247c-.893.065-1.76.65-2.13 1.39c-.204.409-.282.895-.11 1.376c.17.482.597.884 1.176 1.175"/><path fill="url(#SVGvEwzTbHi)" d="M1.275 9.947a3 3 0 0 0 1.157.293l.006.015v-.016c1.982 0 3.776-1.12 5.57-2.24c1.79-1.119 3.582-2.237 5.56-2.24a6.002 6.002 0 0 0-11.229.247c-.893.065-1.76.65-2.13 1.39c-.204.409-.282.895-.11 1.376c.17.482.597.884 1.176 1.175"/><defs><radialGradient id="SVGWdk9GE6U" cx="0" cy="0" r="1" gradientTransform="rotate(234.247 10.392 4.048)scale(12.7836 12.6431)" gradientUnits="userSpaceOnUse"><stop stop-color="#8f77ff"/><stop offset=".457" stop-color="#775be3"/><stop offset=".656" stop-color="#6552d9"/></radialGradient><radialGradient id="SVGVuzGleKA" cx="0" cy="0" r="1" gradientTransform="rotate(160.373 6.986 6.02)scale(2.77338 6.97917)" gradientUnits="userSpaceOnUse"><stop offset=".241" stop-color="#6e30c8"/><stop offset="1" stop-color="#6730c6" stop-opacity="0"/></radialGradient><radialGradient id="SVGJxZ2LeCd" cx="0" cy="0" r="1" gradientTransform="rotate(235.452 10.21 5.902)scale(5.75799 22.0297)" gradientUnits="userSpaceOnUse"><stop stop-color="#f36284"/><stop offset="1" stop-color="#f36284" stop-opacity="0"/></radialGradient><radialGradient id="SVGNtwyGduB" cx="0" cy="0" r="1" gradientTransform="matrix(-10.8163 0 0 -6.14584 16.567 5.67)" gradientUnits="userSpaceOnUse"><stop stop-color="#7d40c8"/><stop offset="1" stop-color="#7f45d2" stop-opacity="0"/></radialGradient><radialGradient id="SVGSV4rteRq" cx="0" cy="0" r="1" gradientTransform="rotate(55.772 -8.16 15.466)scale(12.0607 36.4974)" gradientUnits="userSpaceOnUse"><stop offset=".265" stop-color="#0a26b5" stop-opacity="0"/><stop offset=".581" stop-color="#051d92"/></radialGradient><radialGradient id="SVGAcf0Ep3j" cx="0" cy="0" r="1" gradientTransform="rotate(175.701 7.946 5.506)scale(2.82427 7.67648)" gradientUnits="userSpaceOnUse"><stop offset=".195" stop-color="#e173e7"/><stop offset=".901" stop-color="#e173e7" stop-opacity="0"/></radialGradient><radialGradient id="SVG9MxAObUH" cx="0" cy="0" r="1" gradientTransform="rotate(36.679 -1.81 7.175)scale(12.5257 12.5357)" gradientUnits="userSpaceOnUse"><stop stop-color="#3dd3dc"/><stop offset="1" stop-color="#4290f0"/></radialGradient><radialGradient id="SVGJzJUHePp" cx="0" cy="0" r="1" gradientTransform="rotate(-52.489 6.693 3.295)scale(4.32092 10.493)" gradientUnits="userSpaceOnUse"><stop offset=".285" stop-color="#3a80e1"/><stop offset="1" stop-color="#488ae5" stop-opacity="0"/></radialGradient><radialGradient id="SVGoO1iaera" cx="0" cy="0" r="1" gradientTransform="matrix(2.0892 -.37617 1.1669 6.48077 .004 5.302)" gradientUnits="userSpaceOnUse"><stop offset=".232" stop-color="#3dd3dc"/><stop offset="1" stop-color="#3dd3dc" stop-opacity="0"/></radialGradient><radialGradient id="SVGvEwzTbHi" cx="0" cy="0" r="1" gradientTransform="rotate(68.24 .088 3.893)scale(8.40097 25.4305)" gradientUnits="userSpaceOnUse"><stop offset=".576" stop-color="#26cfdb" stop-opacity="0"/><stop offset="1" stop-color="#19d9e7"/></radialGradient></defs></g></svg>

Planet 16 アイコンの使い方

React

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

<Icon icon="fluent-color:planet-16" width="24" />

Vue

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

<template>
  <Icon icon="fluent-color:planet-16" width="24" />
</template>

Svelte

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

<Icon icon="fluent-color:planet-16" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-color--planet-16]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/fluent-color -->
<div class="i-fluent-color:planet-16"></div>

Web コンポーネント

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

<iconify-icon icon="fluent-color:planet-16"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/fluent-color/planet-16.svg" alt="Planet 16 アイコン" width="24" height="24">

Fluent UI System Color Icons の関連アイコン

Planet 16 アイコンのよくある質問

Planet 16 アイコンは商用利用でも無料ですか?

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

React で Planet 16 アイコンを使うには?

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

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

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

Fluent UI System Color Icons をすべて見る →