Construction アイコン
fluent-emoji:construction
Construction アイコン(fluent-emoji:construction)は、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 xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><g filter="url(#iZbROeS)"><path fill="url(#iuVm5Ub)" d="M3 9a1 1 0 0 1 1-1h24a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"/></g><path fill="url(#iENGfGN)" d="M3 9a1 1 0 0 1 1-1h24a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"/><path fill="url(#ixuY7QD)" d="M3 9a1 1 0 0 1 1-1h24a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"/><path fill="url(#ib2NvfB)" fill-rule="evenodd" d="M24.475 21h-4.95L29 11.525v4.95z" clip-rule="evenodd"/><path fill="url(#i8Yy61b)" fill-rule="evenodd" d="M24.475 21h-4.95L29 11.525v4.95z" clip-rule="evenodd"/><path fill="url(#ithF98b)" fill-rule="evenodd" d="M24.475 21h-4.95L29 11.525v4.95z" clip-rule="evenodd"/><path fill="url(#iw1mtPb)" fill-rule="evenodd" d="M14.475 21h-4.95l13-13h4.95z" clip-rule="evenodd"/><path fill="url(#isWbFab)" fill-rule="evenodd" d="M14.475 21h-4.95l13-13h4.95z" clip-rule="evenodd"/><path fill="url(#iogbNYc)" fill-rule="evenodd" d="M14.475 21h-4.95l13-13h4.95z" clip-rule="evenodd"/><path fill="url(#inv9YPd)" fill-rule="evenodd" d="M4.475 21H4a1 1 0 0 1-1-1v-2.475L12.525 8h4.95z" clip-rule="evenodd"/><path fill="url(#iMr2bib)" fill-rule="evenodd" d="M4.475 21H4a1 1 0 0 1-1-1v-2.475L12.525 8h4.95z" clip-rule="evenodd"/><path fill="url(#iWN2PJb)" fill-rule="evenodd" d="M4.475 21H4a1 1 0 0 1-1-1v-2.475L12.525 8h4.95z" clip-rule="evenodd"/><path fill="url(#ig0blfm)" fill-rule="evenodd" d="M4.475 21H4a1 1 0 0 1-1-1v-2.475L12.525 8h4.95z" clip-rule="evenodd"/><path fill="url(#iMkGCTd)" fill-rule="evenodd" d="M7.475 8H4a1 1 0 0 0-1 1v3.475z" clip-rule="evenodd"/><path fill="url(#i7g9hHc)" fill-rule="evenodd" d="M7.475 8H4a1 1 0 0 0-1 1v3.475z" clip-rule="evenodd"/><path fill="url(#iL81Mme)" fill-rule="evenodd" d="M7.475 8H4a1 1 0 0 0-1 1v3.475z" clip-rule="evenodd"/><path fill="url(#iEpdcMc)" fill-rule="evenodd" d="M26 21h-2v9h2z" clip-rule="evenodd"/><path fill="url(#iIQZP8b)" fill-rule="evenodd" d="M26 21h-2v9h2z" clip-rule="evenodd"/><path fill="url(#i3Ns2xc)" fill-rule="evenodd" d="M8 21H6v9h2z" clip-rule="evenodd"/><path fill="url(#iTGs6oc)" fill-rule="evenodd" d="M8 21H6v9h2z" clip-rule="evenodd"/><path fill="url(#i4TpSUb)" d="M6 7.5a1.5 1.5 0 1 1 3 0V8H6z"/><path fill="url(#i7UWQdd)" d="M23 7.5a1.5 1.5 0 0 1 3 0V8h-3z"/><g filter="url(#iKZNFme)"><rect width=".475" height="8" x="7.109" y="21.5" fill="#DFD0E9" rx=".237"/></g><g filter="url(#i2LF5kd)"><rect width=".475" height="8" x="25" y="21.5" fill="#DFD0E9" rx=".237"/></g><defs><linearGradient id="iuVm5Ub" x1="25.846" x2="8.5" y1="9.985" y2="18.625" gradientUnits="userSpaceOnUse"><stop stop-color="#F7D142"/><stop offset="1" stop-color="#FCB545"/></linearGradient><linearGradient id="iENGfGN" x1="3" x2="3.79" y1="14.011" y2="14.011" gradientUnits="userSpaceOnUse"><stop stop-color="#A57C4B"/><stop offset="1" stop-color="#A57C4B" stop-opacity="0"/></linearGradient><linearGradient id="ib2NvfB" x1="27.607" x2="18.41" y1="11.525" y2="17.982" gradientUnits="userSpaceOnUse"><stop stop-color="#353138"/><stop offset="1" stop-color="#503B62"/></linearGradient><linearGradient id="i8Yy61b" x1="22.078" x2="22.078" y1="21" y2="20.312" gradientUnits="userSpaceOnUse"><stop stop-color="#4B2867"/><stop offset="1" stop-color="#4B2867" stop-opacity="0"/></linearGradient><linearGradient id="ithF98b" x1="29" x2="25.743" y1="14.491" y2="14.491" gradientUnits="userSpaceOnUse"><stop stop-color="#353139"/><stop offset=".166" stop-color="#413D46"/><stop offset=".456" stop-color="#413D46" stop-opacity="0"/></linearGradient><linearGradient id="iw1mtPb" x1="24.836" x2="11.426" y1="8" y2="21" gradientUnits="userSpaceOnUse"><stop stop-color="#353138"/><stop offset="1" stop-color="#503B62"/></linearGradient><linearGradient id="isWbFab" x1="14.362" x2="14.362" y1="21" y2="20.056" gradientUnits="userSpaceOnUse"><stop stop-color="#4B2867"/><stop offset="1" stop-color="#4B2867" stop-opacity="0"/></linearGradient><linearGradient id="iogbNYc" x1="23.343" x2="23.343" y1="8" y2="12.069" gradientUnits="userSpaceOnUse"><stop stop-color="#353139"/><stop offset=".166" stop-color="#413D46"/><stop offset=".422" stop-color="#413D46" stop-opacity="0"/></linearGradient><linearGradient id="inv9YPd" x1="15.347" x2="2.327" y1="8" y2="18.178" gradientUnits="userSpaceOnUse"><stop stop-color="#353138"/><stop offset="1" stop-color="#503B62"/></linearGradient><linearGradient id="iMr2bib" x1="6.9" x2="6.9" y1="21" y2="20.056" gradientUnits="userSpaceOnUse"><stop stop-color="#4B2867"/><stop offset="1" stop-color="#4B2867" stop-opacity="0"/></linearGradient><linearGradient id="iWN2PJb" x1="14.143" x2="14.143" y1="8" y2="12.069" gradientUnits="userSpaceOnUse"><stop stop-color="#353139"/><stop offset=".166" stop-color="#413D46"/><stop offset=".422" stop-color="#413D46" stop-opacity="0"/></linearGradient><linearGradient id="ig0blfm" x1="3" x2="3.75" y1="15.114" y2="15.114" gradientUnits="userSpaceOnUse"><stop stop-color="#2F2C32"/><stop offset="1" stop-color="#2F2C32" stop-opacity="0"/></linearGradient><linearGradient id="iMkGCTd" x1="6.817" x2="2.473" y1="8" y2="11.05" gradientUnits="userSpaceOnUse"><stop stop-color="#353138"/><stop offset="1" stop-color="#503B62"/></linearGradient><linearGradient id="i7g9hHc" x1="6.445" x2="6.445" y1="8" y2="9.401" gradientUnits="userSpaceOnUse"><stop stop-color="#353139"/><stop offset=".166" stop-color="#413D46"/><stop offset=".422" stop-color="#413D46" stop-opacity="0"/></linearGradient><linearGradient id="iL81Mme" x1="3" x2="4" y1="10.449" y2="10.449" gradientUnits="userSpaceOnUse"><stop stop-color="#2F2C32"/><stop offset="1" stop-color="#2F2C32" stop-opacity="0"/></linearGradient><linearGradient id="iEpdcMc" x1="24" x2="25" y1="23.938" y2="23.938" gradientUnits="userSpaceOnUse"><stop stop-color="#857C8C"/><stop offset="1" stop-color="#B9A7C4"/></linearGradient><linearGradient id="i3Ns2xc" x1="6" x2="7" y1="23.938" y2="23.938" gradientUnits="userSpaceOnUse"><stop stop-color="#857C8C"/><stop offset="1" stop-color="#B9A7C4"/></linearGradient><linearGradient id="i4TpSUb" x1="7.5" x2="7.5" y1="6" y2="8" gradientUnits="userSpaceOnUse"><stop offset=".563" stop-color="#CB1E72"/><stop offset="1" stop-color="#E61C31"/></linearGradient><linearGradient id="i7UWQdd" x1="24.5" x2="24.5" y1="6" y2="8" gradientUnits="userSpaceOnUse"><stop offset=".563" stop-color="#CB1E72"/><stop offset="1" stop-color="#E61C31"/></linearGradient><radialGradient id="ixuY7QD" cx="0" cy="0" r="1" gradientTransform="matrix(12.0629 0 0 1.90436 4.688 8)" gradientUnits="userSpaceOnUse"><stop offset=".136" stop-color="#FBBC43"/><stop offset="1" stop-color="#FBBC43" stop-opacity="0"/></radialGradient><radialGradient id="iIQZP8b" cx="0" cy="0" r="1" gradientTransform="matrix(0 -8.79687 5.25369 0 25 29.594)" gradientUnits="userSpaceOnUse"><stop offset=".913" stop-color="#7E5E91" stop-opacity="0"/><stop offset=".993" stop-color="#7E5E91"/></radialGradient><radialGradient id="iTGs6oc" cx="0" cy="0" r="1" gradientTransform="matrix(0 -8.79687 5.25369 0 7 29.594)" gradientUnits="userSpaceOnUse"><stop offset=".913" stop-color="#7E5E91" stop-opacity="0"/><stop offset=".993" stop-color="#7E5E91"/></radialGradient><filter id="iZbROeS" width="27" height="14" x="2.5" y="7.5" 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=".375"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.831373 0 0 0 0 0.494118 0 0 0 0 0.282353 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_12057"/><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=".375"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 0.415686 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_12057" result="effect2_innerShadow_18_12057"/></filter><filter id="iKZNFme" width="1.775" height="9.3" x="6.459" y="20.85" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_12057" stdDeviation=".325"/></filter><filter id="i2LF5kd" width="1.775" height="9.3" x="24.35" y="20.85" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_12057" stdDeviation=".325"/></filter></defs></g></svg>Construction アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:construction" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:construction" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:construction" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--construction]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:construction"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:construction"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-emoji/construction.svg" alt="Construction アイコン" width="24" height="24">Fluent Emoji の関連アイコン
他のアイコンセットの Construction アイコン
Construction アイコン のよくある質問
Construction アイコンは商用利用でも無料ですか?
はい。Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Construction アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-emoji:construction" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Construction アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-emoji/construction.svg" alt="Construction アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。