Premium 28 アイコン
fluent-color:premium-28
Premium 28 アイコン(fluent-color:premium-28)は、Fluent UI System Color Icons セットの無料 SVG アイコンです（作者: Microsoft Corporation）。 28 × 28 のグリッドで描かれています。 Fluent UI System Color Icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Fluent UI System Color Icons
- 作者
- Microsoft Corporation
- ライセンス
- MIT
- サイズ
- 28 × 28
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><g fill="none"><path fill="#616161" d="M18.707 11.5h7.252a.8.8 0 0 0 .042-.25l-.002.065l.002-.1l-.01-.088l-.017-.077l-.011-.038l-.043-.102l-4.007-7.513l-.054-.087A.75.75 0 0 0 21.25 3H16a.75.75 0 0 1 .725.557l2 7.5a.75.75 0 0 1-.018.443"/><path fill="url(#SVGgznfZD2Q)" d="M18.707 11.5h7.252a.8.8 0 0 0 .042-.25l-.002.065l.002-.1l-.01-.088l-.017-.077l-.011-.038l-.043-.102l-4.007-7.513l-.054-.087A.75.75 0 0 0 21.25 3H16a.75.75 0 0 1 .725.557l2 7.5a.75.75 0 0 1-.018.443"/><path fill="#9f9f9f" d="M9.293 11.5a.75.75 0 0 1-.018-.443l2-7.5A.75.75 0 0 1 12 3H6.751l-.102.007a.75.75 0 0 0-.56.39l-4 7.5l-.027.057l-.034.096l-.01.04l-.014.098v.127l.023.131l.02.054z"/><path fill="url(#SVGBBHgiAXZ)" d="M9.293 11.5a.75.75 0 0 1-.018-.443l2-7.5A.75.75 0 0 1 12 3H6.751l-.102.007a.75.75 0 0 0-.56.39l-4 7.5l-.027.057l-.034.096l-.01.04l-.014.098v.127l.023.131l.02.054z"/><path fill="#d9d9d9" d="M19.707 11.5a.75.75 0 0 0 .018-.443l-2-7.5A.75.75 0 0 0 17 3h-6a.75.75 0 0 0-.725.557l-2 7.5a.75.75 0 0 0 .018.443z"/><path fill="url(#SVGJjVxEeKU)" d="M19.707 11.5a.75.75 0 0 0 .018-.443l-2-7.5A.75.75 0 0 0 17 3h-6a.75.75 0 0 0-.725.557l-2 7.5a.75.75 0 0 0 .018.443z"/><path fill="url(#SVGR8ZQqbOt)" d="M13.5 24.81a.75.75 0 0 0 .2-.29l5-13a.75.75 0 0 0 .025-.463L18.71 11h7.248l.005.012l.011.038l.017.077l.01.088l-.002.1l.003-.065a.8.8 0 0 1-.061.296l-.03.06l-.04.066l-.052.069L14.6 24.705a.73.73 0 0 1-.386.265l-.058.014l-.097.014L14 25l-.1-.007l-.085-.016l-.104-.034l-.025-.012a.7.7 0 0 1-.187-.121"/><path fill="#626262" d="M9.29 11H2.046l-.018.05l-.01.04l-.014.098v.127l.023.131l.035.1l.048.093l.062.087l11.272 13.027q.106.118.242.178l.026.012l.103.034l.085.016l.101.007l.059-.002l.097-.014l.058-.014a.7.7 0 0 0 .288-.158a.75.75 0 0 1-.203-.293l-5-13a.75.75 0 0 1-.025-.462z"/><path fill="url(#SVGfwDZnd6C)" d="M9.29 11H2.046l-.018.05l-.01.04l-.014.098v.127l.023.131l.035.1l.048.093l.062.087l11.272 13.027q.106.118.242.178l.026.012l.103.034l.085.016l.101.007l.059-.002l.097-.014l.058-.014a.7.7 0 0 0 .288-.158a.75.75 0 0 1-.203-.293l-5-13a.75.75 0 0 1-.025-.462z"/><path fill="#aeaeae" d="M19.71 11H8.29l-.015.057a.75.75 0 0 0 .025.462l5 13a.75.75 0 0 0 1.4 0l5-13a.75.75 0 0 0 .025-.462z"/><path fill="url(#SVGyBraNdCo)" d="M19.71 11H8.29l-.015.057a.75.75 0 0 0 .025.462l5 13a.75.75 0 0 0 1.4 0l5-13a.75.75 0 0 0 .025-.462z"/><path fill="url(#SVGKTKexeoX)" fill-opacity=".7" d="M21.251 3a.75.75 0 0 1 .608.31l.054.087l4.007 7.513l.043.102l.011.038l.017.077l.01.088l-.002.1l.002-.065a.8.8 0 0 1-.06.296l-.03.06l-.04.066l-.052.069L14.6 24.705a.73.73 0 0 1-.386.265l-.058.014l-.097.014L14 25l-.1-.007l-.086-.016l-.103-.034l-.026-.012a.7.7 0 0 1-.242-.178L2.172 11.727l-.062-.087l-.048-.093l-.035-.1l-.023-.13v-.128l.015-.099l.01-.04l.033-.095l.028-.057l4-7.5a.75.75 0 0 1 .559-.39L6.75 3z"/><defs><linearGradient id="SVGgznfZD2Q" x1="19.572" x2="25.206" y1="3" y2="15.786" gradientUnits="userSpaceOnUse"><stop stop-color="#0fafff"/><stop offset="1" stop-color="#102784"/></linearGradient><linearGradient id="SVGBBHgiAXZ" x1="10.572" x2="5.639" y1="-.542" y2="10.114" gradientUnits="userSpaceOnUse"><stop stop-color="#9ff0f9"/><stop offset="1" stop-color="#29c3ff"/></linearGradient><linearGradient id="SVGJjVxEeKU" x1="14" x2="14" y1="3" y2="13.625" gradientUnits="userSpaceOnUse"><stop stop-color="#3bd5ff"/><stop offset="1" stop-color="#367af2"/></linearGradient><linearGradient id="SVGR8ZQqbOt" x1="28.943" x2="16.611" y1="4" y2="24.154" gradientUnits="userSpaceOnUse"><stop stop-color="#1b44b1"/><stop offset="1" stop-color="#2052cb"/></linearGradient><linearGradient id="SVGfwDZnd6C" x1="4.21" x2="12.359" y1="8.2" y2="25.32" gradientUnits="userSpaceOnUse"><stop stop-color="#0094f0"/><stop offset="1" stop-color="#6ce0ff"/></linearGradient><linearGradient id="SVGyBraNdCo" x1="13.992" x2="13.992" y1="6.1" y2="25" gradientUnits="userSpaceOnUse"><stop stop-color="#2052cb"/><stop offset="1" stop-color="#0fafff"/></linearGradient><linearGradient id="SVGKTKexeoX" x1="-.433" x2="18.329" y1="-17.717" y2="26.955" gradientUnits="userSpaceOnUse"><stop offset=".533" stop-color="#ff6ce8" stop-opacity="0"/><stop offset="1" stop-color="#ff6ce8"/></linearGradient></defs></g></svg>Premium 28 アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-color:premium-28" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-color:premium-28" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-color:premium-28" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-color--premium-28]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-color -->
<div class="i-fluent-color:premium-28"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-color:premium-28"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-color/premium-28.svg" alt="Premium 28 アイコン" width="24" height="24">Fluent UI System Color Icons の関連アイコン
Premium 28 アイコン のよくある質問
Premium 28 アイコンは商用利用でも無料ですか?
はい。Fluent UI System Color Icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Premium 28 アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-color:premium-28" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Premium 28 アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-color/premium-28.svg" alt="Premium 28 アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。