Toolbox アイコン

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

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

fluent-emoji:toolbox

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

アイコンセット: Fluent Emoji
作者: 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"><g filter="url(#iZbNsSb)"><path stroke="url(#iaY5bNb)" stroke-width="2.25" d="M11.035 10.962V8.494a1.4 1.4 0 0 1 1.4-1.4h6.934a1.4 1.4 0 0 1 1.4 1.4v2.678"/></g><g stroke-width=".6" filter="url(#ig4Hlic)"><path stroke="url(#iQWiyLe)" d="M11.035 10.796v-2.53c0-.792.64-1.434 1.428-1.434h7.074c.789 0 1.428.642 1.428 1.435v2.744"/><path stroke="url(#iCAxWoY)" d="M11.035 10.796v-2.53c0-.792.64-1.434 1.428-1.434h7.074c.789 0 1.428.642 1.428 1.435v2.744"/></g><g filter="url(#iC4Mnhd)"><path fill="url(#isAvGfb)" d="M2.019 13.531a3.5 3.5 0 0 1 3.5-3.5H26.3a3.5 3.5 0 0 1 3.5 3.5v14.344a2 2 0 0 1-2 2H4.02a2 2 0 0 1-2-2z"/></g><g filter="url(#itBlDBc)"><path fill="#DE2356" d="M20.324 17.06a.75.75 0 0 1 .75-.75h2.485a.75.75 0 0 1 .75.75v1.195a1.992 1.992 0 0 1-3.985 0z"/></g><g filter="url(#izVGUTc)"><rect width="19.945" height=".992" x="5.925" y="22.977" fill="#C1AECA" rx=".496"/></g><g filter="url(#il9rayc)"><rect width="28.25" height=".992" x="1.785" y="17.008" fill="#CB236C" rx=".4"/><rect width="28.25" height=".992" x="1.785" y="17.008" fill="url(#iwtQjQc)" rx=".4"/></g><g filter="url(#i4mt58d)"><rect width="19.945" height=".992" x="5.925" y="25.961" fill="#C1AECA" rx=".496"/></g><g filter="url(#iVevGDd)"><path stroke="url(#irQqBMd)" stroke-linecap="round" stroke-width=".2" d="M29.675 17.406H6.082"/></g><g filter="url(#imEhefe)"><path fill="#C4B3D4" d="M6.925 16.75a.75.75 0 0 1 .75-.75h2.485a.75.75 0 0 1 .75.75v1.195a1.992 1.992 0 0 1-3.985 0z"/><path fill="url(#iQtKjne)" d="M6.925 16.75a.75.75 0 0 1 .75-.75h2.485a.75.75 0 0 1 .75.75v1.195a1.992 1.992 0 0 1-3.985 0z"/><path fill="url(#ivvQ5pd)" d="M6.925 16.75a.75.75 0 0 1 .75-.75h2.485a.75.75 0 0 1 .75.75v1.195a1.992 1.992 0 0 1-3.985 0z"/></g><g filter="url(#iRPGpmz)"><path fill="#C4B3D4" d="M20.894 16.75a.75.75 0 0 1 .75-.75h2.484a.75.75 0 0 1 .75.75v1.195a1.992 1.992 0 1 1-3.984 0z"/><path fill="url(#iTBnXad)" d="M20.894 16.75a.75.75 0 0 1 .75-.75h2.484a.75.75 0 0 1 .75.75v1.195a1.992 1.992 0 1 1-3.984 0z"/><path fill="url(#ieGruyg)" d="M20.894 16.75a.75.75 0 0 1 .75-.75h2.484a.75.75 0 0 1 .75.75v1.195a1.992 1.992 0 1 1-3.984 0z"/></g><g filter="url(#igxkkbc)"><path stroke="url(#icZK0fd)" stroke-linecap="round" stroke-width=".2" d="M6.526 23.366h18.926"/></g><g filter="url(#i7Hwmec)"><path stroke="url(#igFERJe)" stroke-linecap="round" stroke-width=".2" d="M6.526 26.352h18.926"/></g><g filter="url(#ijVEQpE)"><rect width="21.664" height="2.255" x="6.526" y="11.893" fill="url(#ilWwHOb)" rx="1.128"/></g><defs><filter id="iZbNsSb" width="11.984" height="5.703" x="9.91" y="5.469" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-.5"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.309804 0 0 0 0 0.160784 0 0 0 0 0.380392 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_24749"/></filter><filter id="ig4Hlic" width="11.731" height="5.679" x="10.135" y="5.932" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_24749" stdDeviation=".3"/></filter><filter id="iC4Mnhd" width="29.781" height="21.344" x="2.019" y="9.031" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="2"/><feGaussianBlur stdDeviation="1"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.854902 0 0 0 0 0.282353 0 0 0 0 0.305882 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_24749"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-1"/><feGaussianBlur stdDeviation="1"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.882353 0 0 0 0 0.164706 0 0 0 0 0.4 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_24749" result="effect2_innerShadow_18_24749"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".5"/><feGaussianBlur stdDeviation=".75"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.858824 0 0 0 0 0.223529 0 0 0 0 0.45098 0 0 0 1 0"/><feBlend in2="effect2_innerShadow_18_24749" result="effect3_innerShadow_18_24749"/></filter><filter id="itBlDBc" width="6.984" height="6.938" x="18.824" y="14.81" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_24749" stdDeviation=".75"/></filter><filter id="izVGUTc" width="19.945" height="1.292" x="5.925" y="22.677" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-.3"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.752941 0 0 0 0 0.627451 0 0 0 0 0.823529 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_24749"/></filter><filter id="il9rayc" width="28.25" height="1.242" x="1.785" y="17.008" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".25"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.803922 0 0 0 0 0.101961 0 0 0 0 0.298039 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_24749"/></filter><filter id="i4mt58d" width="19.945" height="1.292" x="5.925" y="25.661" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-.3"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.752941 0 0 0 0 0.627451 0 0 0 0 0.823529 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_24749"/></filter><filter id="iVevGDd" width="24.294" height=".7" x="5.732" y="17.056" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_24749" stdDeviation=".125"/></filter><filter id="imEhefe" width="4.484" height="4.438" x="6.925" y="16" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".5" dy=".5"/><feGaussianBlur stdDeviation=".5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.670588 0 0 0 0 0.592157 0 0 0 0 0.709804 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_24749"/></filter><filter id="iRPGpmz" width="4.484" height="4.438" x="20.894" y="16" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".5" dy=".5"/><feGaussianBlur stdDeviation=".5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.670588 0 0 0 0 0.592157 0 0 0 0 0.709804 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_24749"/></filter><filter id="igxkkbc" width="19.526" height=".6" x="6.226" y="23.066" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_24749" stdDeviation=".1"/></filter><filter id="i7Hwmec" width="19.526" height=".6" x="6.226" y="26.052" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_24749" stdDeviation=".1"/></filter><filter id="ijVEQpE" width="24.664" height="5.255" x="5.026" y="10.393" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_24749" stdDeviation=".75"/></filter><linearGradient id="iaY5bNb" x1="15.902" x2="15.902" y1="6.688" y2="11.172" gradientUnits="userSpaceOnUse"><stop stop-color="#5C486E"/><stop offset="1" stop-color="#4B3341"/></linearGradient><linearGradient id="iQWiyLe" x1="21.275" x2="13.053" y1="7.458" y2="10.023" gradientUnits="userSpaceOnUse"><stop stop-color="#7B6C89"/><stop offset="1" stop-color="#7B6C89" stop-opacity="0"/></linearGradient><linearGradient id="iCAxWoY" x1="11.035" x2="12.467" y1="10.566" y2="6.836" gradientUnits="userSpaceOnUse"><stop stop-color="#7B6C89"/><stop offset="1" stop-color="#7B6C89" stop-opacity="0"/></linearGradient><linearGradient id="isAvGfb" x1="15.91" x2="15.91" y1="15.688" y2="29.875" gradientUnits="userSpaceOnUse"><stop stop-color="#FF417D"/><stop offset="1" stop-color="#F2295E"/></linearGradient><linearGradient id="iwtQjQc" x1="2.05" x2="7.363" y1="18" y2="18" gradientUnits="userSpaceOnUse"><stop stop-color="#B14757"/><stop offset="1" stop-color="#B14757" stop-opacity="0"/></linearGradient><linearGradient id="irQqBMd" x1="29.113" x2="10.425" y1="17.25" y2="17.25" gradientUnits="userSpaceOnUse"><stop stop-color="#E65F7C"/><stop offset="1" stop-color="#E65F7C" stop-opacity="0"/></linearGradient><linearGradient id="icZK0fd" x1="25.001" x2="4.663" y1="23.209" y2="23.209" gradientUnits="userSpaceOnUse"><stop stop-color="#D6C7DE"/><stop offset="1" stop-color="#C1ADCC"/></linearGradient><linearGradient id="igFERJe" x1="25.001" x2="4.663" y1="26.196" y2="26.196" gradientUnits="userSpaceOnUse"><stop stop-color="#D6C7DE"/><stop offset="1" stop-color="#C1ADCC"/></linearGradient><linearGradient id="ilWwHOb" x1="28.19" x2="3.599" y1="13.611" y2="13.611" gradientUnits="userSpaceOnUse"><stop stop-color="#FF6891"/><stop offset="1" stop-color="#FF6891" stop-opacity="0"/></linearGradient><radialGradient id="iQtKjne" cx="0" cy="0" r="1" gradientTransform="matrix(0 3.05159 -3.79105 0 8.917 16.886)" gradientUnits="userSpaceOnUse"><stop offset=".457" stop-color="#C5B4D5" stop-opacity="0"/><stop offset="1" stop-color="#B474B3"/></radialGradient><radialGradient id="ivvQ5pd" cx="0" cy="0" r="1" gradientTransform="rotate(135.956 2.192 10.273)scale(1.62184 .44544)" gradientUnits="userSpaceOnUse"><stop stop-color="#DED3E3"/><stop offset="1" stop-color="#DED3E3" stop-opacity="0"/></radialGradient><radialGradient id="iTBnXad" cx="0" cy="0" r="1" gradientTransform="matrix(0 3.05159 -3.79105 0 22.886 16.886)" gradientUnits="userSpaceOnUse"><stop offset=".457" stop-color="#C5B4D5" stop-opacity="0"/><stop offset="1" stop-color="#B474B3"/></radialGradient><radialGradient id="ieGruyg" cx="0" cy="0" r="1" gradientTransform="rotate(135.956 9.176 13.098)scale(1.62184 .44544)" gradientUnits="userSpaceOnUse"><stop stop-color="#DED3E3"/><stop offset="1" stop-color="#DED3E3" stop-opacity="0"/></radialGradient></defs></g></svg>

Toolbox アイコンの使い方

React

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

<Icon icon="fluent-emoji:toolbox" width="24" />

Vue

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

<template>
  <Icon icon="fluent-emoji:toolbox" width="24" />
</template>

Svelte

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

<Icon icon="fluent-emoji:toolbox" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--toolbox]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:toolbox"></div>

Web コンポーネント

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

<iconify-icon icon="fluent-emoji:toolbox"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/fluent-emoji/toolbox.svg" alt="Toolbox アイコン" width="24" height="24">

他のアイコンセットの Toolbox アイコン

Toolbox アイコンのよくある質問

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

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

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

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

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

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

Fluent Emoji アイコンをすべて見る →