Planet 32 アイコン

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

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

fluent-color:planet-32

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

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

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><path fill="url(#SVGXFk5T5RI)" d="M28.2 12.047a8 8 0 0 0-.9-.093C22.999 11 4.713 19 4.713 19l-.003 1.053h-.007C6.364 24.686 10.795 28 16 28c5.054 0 9.379-3.125 11.147-7.548c1.118-.161 2.346-.715 3.265-1.507c1.117-.962 2.05-2.501 1.332-4.303c-.635-1.596-2.049-2.348-3.544-2.595"/><path fill="url(#SVGz2dHXbAC)" d="M28.2 12.047a8 8 0 0 0-.9-.093C22.999 11 4.713 19 4.713 19l-.003 1.053h-.007C6.364 24.686 10.795 28 16 28c5.054 0 9.379-3.125 11.147-7.548c1.118-.161 2.346-.715 3.265-1.507c1.117-.962 2.05-2.501 1.332-4.303c-.635-1.596-2.049-2.348-3.544-2.595"/><path fill="url(#SVG5FBORdAc)" d="M28.2 12.047a8 8 0 0 0-.9-.093C22.999 11 4.713 19 4.713 19l-.003 1.053h-.007C6.364 24.686 10.795 28 16 28c5.054 0 9.379-3.125 11.147-7.548c1.118-.161 2.346-.715 3.265-1.507c1.117-.962 2.05-2.501 1.332-4.303c-.635-1.596-2.049-2.348-3.544-2.595"/><path fill="url(#SVGLvZlUbvV)" d="M28.2 12.047a8 8 0 0 0-.9-.093C22.999 11 4.713 19 4.713 19l-.003 1.053h-.007C6.364 24.686 10.795 28 16 28c5.054 0 9.379-3.125 11.147-7.548c1.118-.161 2.346-.715 3.265-1.507c1.117-.962 2.05-2.501 1.332-4.303c-.635-1.596-2.049-2.348-3.544-2.595"/><path fill="url(#SVGk3pTke5l)" fill-opacity=".5" d="M28.2 12.047a8 8 0 0 0-.9-.093C22.999 11 4.713 19 4.713 19l-.003 1.053h-.007C6.364 24.686 10.795 28 16 28c5.054 0 9.379-3.125 11.147-7.548c1.118-.161 2.346-.715 3.265-1.507c1.117-.962 2.05-2.501 1.332-4.303c-.635-1.596-2.049-2.348-3.544-2.595"/><path fill="url(#SVGo5vpOc5u)" d="M28.2 12.047a8 8 0 0 0-.9-.093C22.999 11 4.713 19 4.713 19l-.003 1.053h-.007C6.364 24.686 10.795 28 16 28c5.054 0 9.379-3.125 11.147-7.548c1.118-.161 2.346-.715 3.265-1.507c1.117-.962 2.05-2.501 1.332-4.303c-.635-1.596-2.049-2.348-3.544-2.595"/><path fill="url(#SVGLAsTWddw)" d="M3.8 19.953a8 8 0 0 0 .9.093c4.082-.001 7.712-2.032 11.336-4.06c3.611-2.021 7.216-4.039 11.255-4.039h.007C25.636 7.314 21.205 4 16 4c-5.054 0-9.379 3.125-11.147 7.548c-1.118.161-2.346.715-3.265 1.507c-1.117.963-2.055 2.537-1.338 4.34c.635 1.595 2.055 2.311 3.55 2.558"/><path fill="url(#SVGbelUl09R)" d="M3.8 19.953a8 8 0 0 0 .9.093c4.082-.001 7.712-2.032 11.336-4.06c3.611-2.021 7.216-4.039 11.255-4.039h.007C25.636 7.314 21.205 4 16 4c-5.054 0-9.379 3.125-11.147 7.548c-1.118.161-2.346.715-3.265 1.507c-1.117.963-2.055 2.537-1.338 4.34c.635 1.595 2.055 2.311 3.55 2.558"/><path fill="url(#SVGPFXjfbUX)" d="M3.8 19.953a8 8 0 0 0 .9.093c4.082-.001 7.712-2.032 11.336-4.06c3.611-2.021 7.216-4.039 11.255-4.039h.007C25.636 7.314 21.205 4 16 4c-5.054 0-9.379 3.125-11.147 7.548c-1.118.161-2.346.715-3.265 1.507c-1.117.963-2.055 2.537-1.338 4.34c.635 1.595 2.055 2.311 3.55 2.558"/><path fill="url(#SVGlRKBmdlq)" d="M3.8 19.953a8 8 0 0 0 .9.093c4.082-.001 7.712-2.032 11.336-4.06c3.611-2.021 7.216-4.039 11.255-4.039h.007C25.636 7.314 21.205 4 16 4c-5.054 0-9.379 3.125-11.147 7.548c-1.118.161-2.346.715-3.265 1.507c-1.117.963-2.055 2.537-1.338 4.34c.635 1.595 2.055 2.311 3.55 2.558"/><defs><radialGradient id="SVGXFk5T5RI" cx="0" cy="0" r="1" gradientTransform="rotate(233.199 20.581 8.23)scale(25.0822 25.0936)" gradientUnits="userSpaceOnUse"><stop stop-color="#8f77ff"/><stop offset=".457" stop-color="#775be3"/><stop offset=".656" stop-color="#6552d9"/></radialGradient><radialGradient id="SVGz2dHXbAC" cx="0" cy="0" r="1" gradientTransform="rotate(161.058 14 12.09)scale(5.55561 13.5675)" gradientUnits="userSpaceOnUse"><stop offset=".241" stop-color="#6e30c8"/><stop offset="1" stop-color="#6730c6" stop-opacity="0"/></radialGradient><radialGradient id="SVG5FBORdAc" cx="0" cy="0" r="1" gradientTransform="rotate(234.419 20.127 11.83)scale(11.2889 43.7572)" gradientUnits="userSpaceOnUse"><stop stop-color="#f36284"/><stop offset="1" stop-color="#f36284" stop-opacity="0"/></radialGradient><radialGradient id="SVGLvZlUbvV" cx="0" cy="0" r="1" gradientTransform="matrix(-21.758 0 0 -11.8977 33.136 11.875)" gradientUnits="userSpaceOnUse"><stop stop-color="#7d40c8"/><stop offset="1" stop-color="#7f45d2" stop-opacity="0"/></radialGradient><radialGradient id="SVGk3pTke5l" cx="0" cy="0" r="1" gradientTransform="rotate(54.743 -16.957 31.25)scale(23.6408 72.5089)" gradientUnits="userSpaceOnUse"><stop offset=".265" stop-color="#0a26b5" stop-opacity="0"/><stop offset=".581" stop-color="#051d92"/></radialGradient><radialGradient id="SVGo5vpOc5u" cx="0" cy="0" r="1" gradientTransform="rotate(175.862 15.9 11.104)scale(5.68009 14.8639)" gradientUnits="userSpaceOnUse"><stop offset=".195" stop-color="#e173e7"/><stop offset=".901" stop-color="#e173e7" stop-opacity="0"/></radialGradient><radialGradient id="SVGLAsTWddw" cx="0" cy="0" r="1" gradientTransform="rotate(35.729 -3.77 14.736)scale(24.9059 24.6651)" gradientUnits="userSpaceOnUse"><stop stop-color="#3dd3dc"/><stop offset="1" stop-color="#4290f0"/></radialGradient><radialGradient id="SVGbelUl09R" cx="0" cy="0" r="1" gradientTransform="rotate(-51.522 13.404 6.47)scale(8.51067 20.8422)" gradientUnits="userSpaceOnUse"><stop offset=".285" stop-color="#3a80e1"/><stop offset="1" stop-color="#488ae5" stop-opacity="0"/></radialGradient><radialGradient id="SVGPFXjfbUX" cx="0" cy="0" r="1" gradientTransform="matrix(4.20483 -.73129 2.19556 12.6242 0 10.42)" gradientUnits="userSpaceOnUse"><stop offset=".232" stop-color="#3dd3dc"/><stop offset="1" stop-color="#3dd3dc" stop-opacity="0"/></radialGradient><radialGradient id="SVGlRKBmdlq" cx="0" cy="0" r="1" gradientTransform="rotate(67.544 .165 7.876)scale(16.4109 50.9313)" gradientUnits="userSpaceOnUse"><stop offset=".576" stop-color="#26cfdb" stop-opacity="0"/><stop offset="1" stop-color="#19d9e7"/></radialGradient></defs></g></svg>

Planet 32 アイコンの使い方

React

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

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

Vue

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

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

Svelte

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

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

Tailwind CSS

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

UnoCSS

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

Web コンポーネント

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

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

HTML 画像

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

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

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

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

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

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

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

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

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

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