Planet 20 アイコン

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

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

fluent-color:planet-20

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

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

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g fill="none"><path fill="url(#SVGeIAPZtwy)" d="M18.176 7.53a3.6 3.6 0 0 0-1.165-.206c-.032-.083-2.085-.123-2.434-.185c-2.662.995-8.521 5.08-11.576 5.08v.465a7.5 7.5 0 0 0 7.001 4.816a7.5 7.5 0 0 0 7.28-5.69c1.281-.084 2.343-.754 2.632-1.677a1.83 1.83 0 0 0-.184-1.508c-.283-.471-.893-.85-1.554-1.094"/><path fill="url(#SVGuAnYi3Ls)" d="M18.176 7.53a3.6 3.6 0 0 0-1.165-.206c-.032-.083-2.085-.123-2.434-.185c-2.662.995-8.521 5.08-11.576 5.08v.465a7.5 7.5 0 0 0 7.001 4.816a7.5 7.5 0 0 0 7.28-5.69c1.281-.084 2.343-.754 2.632-1.677a1.83 1.83 0 0 0-.184-1.508c-.283-.471-.893-.85-1.554-1.094"/><path fill="url(#SVGYTbD7YzE)" d="M18.176 7.53a3.6 3.6 0 0 0-1.165-.206c-.032-.083-2.085-.123-2.434-.185c-2.662.995-8.521 5.08-11.576 5.08v.465a7.5 7.5 0 0 0 7.001 4.816a7.5 7.5 0 0 0 7.28-5.69c1.281-.084 2.343-.754 2.632-1.677a1.83 1.83 0 0 0-.184-1.508c-.283-.471-.893-.85-1.554-1.094"/><path fill="url(#SVGJWKZncdu)" d="M18.176 7.53a3.6 3.6 0 0 0-1.165-.206c-.032-.083-2.085-.123-2.434-.185c-2.662.995-8.521 5.08-11.576 5.08v.465a7.5 7.5 0 0 0 7.001 4.816a7.5 7.5 0 0 0 7.28-5.69c1.281-.084 2.343-.754 2.632-1.677a1.83 1.83 0 0 0-.184-1.508c-.283-.471-.893-.85-1.554-1.094"/><path fill="url(#SVGBkR9sbXJ)" fill-opacity=".5" d="M18.176 7.53a3.6 3.6 0 0 0-1.165-.206c-.032-.083-2.085-.123-2.434-.185c-2.662.995-8.521 5.08-11.576 5.08v.465a7.5 7.5 0 0 0 7.001 4.816a7.5 7.5 0 0 0 7.28-5.69c1.281-.084 2.343-.754 2.632-1.677a1.83 1.83 0 0 0-.184-1.508c-.283-.471-.893-.85-1.554-1.094"/><path fill="url(#SVGqEuUvbiP)" d="M18.176 7.53a3.6 3.6 0 0 0-1.165-.206c-.032-.083-2.085-.123-2.434-.185c-2.662.995-8.521 5.08-11.576 5.08v.465a7.5 7.5 0 0 0 7.001 4.816a7.5 7.5 0 0 0 7.28-5.69c1.281-.084 2.343-.754 2.632-1.677a1.83 1.83 0 0 0-.184-1.508c-.283-.471-.893-.85-1.554-1.094"/><path fill="url(#SVGu1JiQ92L)" d="M1.827 12.47c.351.13.74.195 1.164.206l.009.022v-.022c2.563 0 4.78-1.338 7-2.677c2.218-1.339 4.438-2.678 7.006-2.683A7.503 7.503 0 0 0 2.72 8.19C1.44 8.274.375 8.95.086 9.871A1.83 1.83 0 0 0 .27 11.38c.283.471.896.846 1.557 1.09"/><path fill="url(#SVGF05nzcgg)" d="M1.827 12.47c.351.13.74.195 1.164.206l.009.022v-.022c2.563 0 4.78-1.338 7-2.677c2.218-1.339 4.438-2.678 7.006-2.683A7.503 7.503 0 0 0 2.72 8.19C1.44 8.274.375 8.95.086 9.871A1.83 1.83 0 0 0 .27 11.38c.283.471.896.846 1.557 1.09"/><path fill="url(#SVGyZc25c4U)" d="M1.827 12.47c.351.13.74.195 1.164.206l.009.022v-.022c2.563 0 4.78-1.338 7-2.677c2.218-1.339 4.438-2.678 7.006-2.683A7.503 7.503 0 0 0 2.72 8.19C1.44 8.274.375 8.95.086 9.871A1.83 1.83 0 0 0 .27 11.38c.283.471.896.846 1.557 1.09"/><path fill="url(#SVGSXRilKdM)" d="M1.827 12.47c.351.13.74.195 1.164.206l.009.022v-.022c2.563 0 4.78-1.338 7-2.677c2.218-1.339 4.438-2.678 7.006-2.683A7.503 7.503 0 0 0 2.72 8.19C1.44 8.274.375 8.95.086 9.871A1.83 1.83 0 0 0 .27 11.38c.283.471.896.846 1.557 1.09"/><defs><radialGradient id="SVGeIAPZtwy" cx="0" cy="0" r="1" gradientTransform="rotate(234.052 12.965 5.077)scale(15.94 15.8004)" gradientUnits="userSpaceOnUse"><stop stop-color="#8f77ff"/><stop offset=".457" stop-color="#775be3"/><stop offset=".656" stop-color="#6552d9"/></radialGradient><radialGradient id="SVGuAnYi3Ls" cx="0" cy="0" r="1" gradientTransform="rotate(160.502 8.735 7.527)scale(3.47169 8.68803)" gradientUnits="userSpaceOnUse"><stop offset=".241" stop-color="#6e30c8"/><stop offset="1" stop-color="#6730c6" stop-opacity="0"/></radialGradient><radialGradient id="SVGYTbD7YzE" cx="0" cy="0" r="1" gradientTransform="rotate(235.26 12.726 7.385)scale(7.17869 27.5349)" gradientUnits="userSpaceOnUse"><stop stop-color="#f36284"/><stop offset="1" stop-color="#f36284" stop-opacity="0"/></radialGradient><radialGradient id="SVGJWKZncdu" cx="0" cy="0" r="1" gradientTransform="matrix(-13.5506 0 0 -7.64451 20.71 7.14)" gradientUnits="userSpaceOnUse"><stop stop-color="#7d40c8"/><stop offset="1" stop-color="#7f45d2" stop-opacity="0"/></radialGradient><radialGradient id="SVGBkR9sbXJ" cx="0" cy="0" r="1" gradientTransform="rotate(55.581 -10.278 19.358)scale(15.0359 45.6198)" gradientUnits="userSpaceOnUse"><stop offset=".265" stop-color="#0a26b5" stop-opacity="0"/><stop offset=".581" stop-color="#051d92"/></radialGradient><radialGradient id="SVGqEuUvbiP" cx="0" cy="0" r="1" gradientTransform="rotate(175.731 9.933 6.89)scale(3.53809 9.54879)" gradientUnits="userSpaceOnUse"><stop offset=".195" stop-color="#e173e7"/><stop offset=".901" stop-color="#e173e7" stop-opacity="0"/></radialGradient><radialGradient id="SVGu1JiQ92L" cx="0" cy="0" r="1" gradientTransform="rotate(36.275 -2.302 9.068)scale(15.6224 15.5675)" gradientUnits="userSpaceOnUse"><stop stop-color="#3dd3dc"/><stop offset="1" stop-color="#4290f0"/></radialGradient><radialGradient id="SVGF05nzcgg" cx="0" cy="0" r="1" gradientTransform="rotate(-52.08 8.371 4.09)scale(5.36757 13.083)" gradientUnits="userSpaceOnUse"><stop offset=".285" stop-color="#3a80e1"/><stop offset="1" stop-color="#488ae5" stop-opacity="0"/></radialGradient><radialGradient id="SVGyZc25c4U" cx="0" cy="0" r="1" gradientTransform="matrix(2.61929 -.46475 1.42188 8.01365 0 6.58)" gradientUnits="userSpaceOnUse"><stop offset=".232" stop-color="#3dd3dc"/><stop offset="1" stop-color="#3dd3dc" stop-opacity="0"/></radialGradient><radialGradient id="SVGSXRilKdM" cx="0" cy="0" r="1" gradientTransform="rotate(67.947 .107 4.89)scale(10.3999 31.8176)" gradientUnits="userSpaceOnUse"><stop offset=".576" stop-color="#26cfdb" stop-opacity="0"/><stop offset="1" stop-color="#19d9e7"/></radialGradient></defs></g></svg>

Planet 20 アイコンの使い方

React

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

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

Vue

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

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

Svelte

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

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

Tailwind CSS

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

UnoCSS

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

Web コンポーネント

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

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

HTML 画像

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

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

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

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

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

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

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

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

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

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