Broom アイコン

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

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

fluent-emoji:broom

Broom アイコン(fluent-emoji:broom)は、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"><path stroke="#9F6261" stroke-linecap="round" stroke-width="2.75" d="M25.658 3.5L14.86 22.234"/><path stroke="url(#ilcR2Vc)" stroke-linecap="round" stroke-width="2.75" d="M25.658 3.5L14.86 22.234"/><path stroke="url(#iKdmkpd)" stroke-linecap="round" stroke-width="2.75" d="M25.658 3.5L14.86 22.234"/><path stroke="url(#iqGN1qe)" stroke-linecap="round" stroke-width="2.75" d="M25.658 3.5L14.86 22.234"/><g filter="url(#iN4yszb)"><path stroke="#96596B" stroke-linecap="round" stroke-width=".75" d="M25.733 3.896L15.148 22.234"/></g><g filter="url(#iDzT4sc)"><path fill="url(#i9CDzCb)" d="m9.704 23.328l-5.14 4.805c-.594.601-.228 1.476.5 1.476h7.515c2.43-.117 3.774-1.195 4.27-2.98l.543-2.09c.398-1.93-.24-3.241-1.586-4.016c-1.433-.824-3.21-.567-4.286.687z"/><path fill="url(#icYaJHc)" d="m9.704 23.328l-5.14 4.805c-.594.601-.228 1.476.5 1.476h7.515c2.43-.117 3.774-1.195 4.27-2.98l.543-2.09c.398-1.93-.24-3.241-1.586-4.016c-1.433-.824-3.21-.567-4.286.687z"/><path fill="url(#i1kmfBb)" d="m9.704 23.328l-5.14 4.805c-.594.601-.228 1.476.5 1.476h7.515c2.43-.117 3.774-1.195 4.27-2.98l.543-2.09c.398-1.93-.24-3.241-1.586-4.016c-1.433-.824-3.21-.567-4.286.687z"/><path fill="url(#iGWxWtC)" d="m9.704 23.328l-5.14 4.805c-.594.601-.228 1.476.5 1.476h7.515c2.43-.117 3.774-1.195 4.27-2.98l.543-2.09c.398-1.93-.24-3.241-1.586-4.016c-1.433-.824-3.21-.567-4.286.687z"/></g><path stroke="url(#iU2pFee)" stroke-linecap="round" stroke-width=".6" d="m11.267 21.547l6.047 3.281"/><path stroke="url(#i0e9cpb)" stroke-linecap="round" stroke-width=".6" d="m11.267 21.547l6.047 3.281"/><path stroke="url(#i69vMHc)" stroke-linecap="round" stroke-width=".6" d="m10.243 22.773l6.711 3.774"/><path stroke="url(#iPierKd)" stroke-linecap="round" stroke-width=".6" d="m10.243 22.773l6.711 3.774"/><rect width="3.803" height="1.319" x="14.683" y="18.683" fill="url(#iC3UpFT)" rx=".659" transform="rotate(30 14.683 18.683)"/><rect width="3.803" height="1.319" x="14.683" y="18.683" fill="url(#iVnxQkc)" rx=".659" transform="rotate(30 14.683 18.683)"/><rect width="3.803" height="1.319" x="14.683" y="18.683" fill="url(#ixZAt9d)" rx=".659" transform="rotate(30 14.683 18.683)"/><defs><radialGradient id="iKdmkpd" cx="0" cy="0" r="1" gradientTransform="matrix(-2.13812 2.44623 -3.62306 -3.16673 27.796 2.05)" gradientUnits="userSpaceOnUse"><stop stop-color="#A57667"/><stop offset="1" stop-color="#A57667" stop-opacity="0"/></radialGradient><radialGradient id="iqGN1qe" cx="0" cy="0" r="1" gradientTransform="matrix(1.1152 -.47965 .29802 .6929 26.656 2.985)" gradientUnits="userSpaceOnUse"><stop offset=".071" stop-color="#BB8B86"/><stop offset="1" stop-color="#BB8B86" stop-opacity="0"/></radialGradient><radialGradient id="icYaJHc" cx="0" cy="0" r="1" gradientTransform="matrix(-1.125 1.84376 -3.04093 -1.85546 16.157 22.344)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFD46F"/><stop offset="1" stop-color="#FFD46F" stop-opacity="0"/></radialGradient><radialGradient id="iGWxWtC" cx="0" cy="0" r="1" gradientTransform="matrix(-1.71873 2.71876 -3.47064 -2.19405 13.72 25.813)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFA565"/><stop offset="1" stop-color="#FFA565" stop-opacity="0"/></radialGradient><radialGradient id="i0e9cpb" cx="0" cy="0" r="1" gradientTransform="matrix(-.09855 .18342 -2.59954 -1.39673 15.096 23.524)" gradientUnits="userSpaceOnUse"><stop offset=".243" stop-color="#FF516D"/><stop offset="1" stop-color="#FF516D" stop-opacity="0"/></radialGradient><radialGradient id="iPierKd" cx="0" cy="0" r="1" gradientTransform="rotate(117.408 -.366 16.929)scale(.23761 3.30054)" gradientUnits="userSpaceOnUse"><stop offset=".243" stop-color="#FF516D"/><stop offset="1" stop-color="#FF516D" stop-opacity="0"/></radialGradient><radialGradient id="iVnxQkc" cx="0" cy="0" r="1" gradientTransform="rotate(164.846 7.64 10.512)scale(3.29759 2.01065)" gradientUnits="userSpaceOnUse"><stop offset=".478" stop-color="#9B8DAC" stop-opacity="0"/><stop offset=".966" stop-color="#7E7785"/></radialGradient><radialGradient id="ixZAt9d" cx="0" cy="0" r="1" gradientTransform="matrix(-.00351 .65017 -1.93386 -.01044 17.438 18.85)" gradientUnits="userSpaceOnUse"><stop offset=".152" stop-color="#C3B6D4"/><stop offset="1" stop-color="#C3B6D4" stop-opacity="0"/></radialGradient><linearGradient id="ilcR2Vc" x1="15.439" x2="17.782" y1="18.063" y2="19.438" gradientUnits="userSpaceOnUse"><stop offset=".142" stop-color="#6E4240"/><stop offset="1" stop-color="#834953" stop-opacity="0"/></linearGradient><linearGradient id="i9CDzCb" x1="7.439" x2="15.876" y1="29.063" y2="21.25" gradientUnits="userSpaceOnUse"><stop stop-color="#F58C43"/><stop offset="1" stop-color="#FDAD47"/></linearGradient><linearGradient id="i1kmfBb" x1="6.439" x2="10.626" y1="29.125" y2="26.75" gradientUnits="userSpaceOnUse"><stop stop-color="#FF8655"/><stop offset="1" stop-color="#FF8655" stop-opacity="0"/></linearGradient><linearGradient id="iU2pFee" x1="15.314" x2="10.486" y1="24.125" y2="21.472" gradientUnits="userSpaceOnUse"><stop stop-color="#FF1951"/><stop offset=".718" stop-color="#DC1E43"/><stop offset="1" stop-color="#B2424F"/></linearGradient><linearGradient id="i69vMHc" x1="14.735" x2="9.29" y1="25.738" y2="22.851" gradientUnits="userSpaceOnUse"><stop stop-color="#FF1951"/><stop offset=".718" stop-color="#DC1E43"/><stop offset="1" stop-color="#B2424F"/></linearGradient><linearGradient id="iC3UpFT" x1="16.584" x2="16.611" y1="18.683" y2="19.885" gradientUnits="userSpaceOnUse"><stop stop-color="#AA9FB9"/><stop offset="1" stop-color="#B69BCC"/></linearGradient><filter id="iN4yszb" width="12.835" height="20.588" x="14.023" y="2.771" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_26124" stdDeviation=".375"/></filter><filter id="iDzT4sc" width="14.242" height="10.062" x="4.267" y="19.547" 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="1"/><feGaussianBlur stdDeviation=".75"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.756863 0 0 0 0 0.517647 0 0 0 0 0.298039 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_26124"/><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 1 0 0 0 0 0.427451 0 0 0 0 0.529412 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_26124" result="effect2_innerShadow_18_26124"/></filter></defs></g></svg>

Broom アイコンの使い方

React

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

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

Vue

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

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

Svelte

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

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

Tailwind CSS

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

UnoCSS

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

Web コンポーネント

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

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

HTML 画像

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

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

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

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

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

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

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

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

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

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