Hut アイコン
fluent-emoji:hut
Hut アイコン(fluent-emoji:hut)は、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"><path fill="url(#iBBtqWk)" d="M28 30H4V17h24z"/><path fill="url(#i3lk5Nd)" d="M28 30H4V17h24z"/><path fill="url(#iqe4KCd)" d="M28 30H4V17h24z"/><g filter="url(#i5GAONc)"><path fill="url(#isS5h0E)" d="M26.92 19c.597 0 1.08-.503 1.08-1.125c0-.158-.028-.306-.057-.444a2 2 0 0 1-.093-.161l-.03-.056l-.128-.214H5.329v1.005q.165-.021.36-.021c.756 0 1.135.253 1.514.507c.381.254.762.509 1.526.509c.756 0 1.135-.253 1.514-.507c.38-.254.762-.51 1.525-.51c.757 0 1.136.254 1.515.508c.38.254.762.509 1.525.509s1.144-.254 1.525-.508s.762-.508 1.525-.508s1.143.254 1.524.508s.763.508 1.525.508s1.143-.254 1.525-.508c.38-.254.762-.508 1.524-.508c.768 0 1.151.253 1.534.506c.326.216.651.431 1.213.49c.066.01.151.02.218.02"/></g><g filter="url(#ihMcBFe)"><path fill="url(#ieE7sqf)" d="M30 17.875c0 .622-.511 1.125-1.143 1.125c-.07 0-.16-.01-.23-.02c-1.294-.128-1.404-.996-2.908-.996c-1.614 0-1.614 1.016-3.228 1.016s-1.614-1.016-3.228-1.016S17.65 19 16.035 19s-1.614-1.016-3.218-1.016c-1.614 0-1.614 1.016-3.218 1.016c-1.614 0-1.614-1.016-3.218-1.016C4.767 17.984 4.767 19 3.153 19h-.03A1.123 1.123 0 0 1 2 17.875c0-.158.03-.306.08-.444c.01-.01.02-.02.02-.04c.05-.078.11-.157.16-.226a54 54 0 0 1 2.487-3.612c2.657-3.581 5.534-6.61 8.842-9.413c1.454-1.233 3.609-1.233 5.043.02c3.188 2.792 6.095 5.851 8.681 9.393a62 62 0 0 1 2.497 3.661c.04.07.08.148.13.217c.03.138.06.286.06.444"/></g><path fill="url(#iQoGgKb)" d="M30 17.875c0 .622-.511 1.125-1.143 1.125c-.07 0-.16-.01-.23-.02c-1.294-.128-1.404-.996-2.908-.996c-1.614 0-1.614 1.016-3.228 1.016s-1.614-1.016-3.228-1.016S17.65 19 16.035 19s-1.614-1.016-3.218-1.016c-1.614 0-1.614 1.016-3.218 1.016c-1.614 0-1.614-1.016-3.218-1.016C4.767 17.984 4.767 19 3.153 19h-.03A1.123 1.123 0 0 1 2 17.875c0-.158.03-.306.08-.444c.01-.01.02-.02.02-.04c.05-.078.11-.157.16-.226a54 54 0 0 1 2.487-3.612c2.657-3.581 5.534-6.61 8.842-9.413c1.454-1.233 3.609-1.233 5.043.02c3.188 2.792 6.095 5.851 8.681 9.393a62 62 0 0 1 2.497 3.661c.04.07.08.148.13.217c.03.138.06.286.06.444"/><path fill="url(#iLxmhIb)" d="M30 17.875c0 .622-.511 1.125-1.143 1.125c-.07 0-.16-.01-.23-.02c-1.294-.128-1.404-.996-2.908-.996c-1.614 0-1.614 1.016-3.228 1.016s-1.614-1.016-3.228-1.016S17.65 19 16.035 19s-1.614-1.016-3.218-1.016c-1.614 0-1.614 1.016-3.218 1.016c-1.614 0-1.614-1.016-3.218-1.016C4.767 17.984 4.767 19 3.153 19h-.03A1.123 1.123 0 0 1 2 17.875c0-.158.03-.306.08-.444c.01-.01.02-.02.02-.04c.05-.078.11-.157.16-.226a54 54 0 0 1 2.487-3.612c2.657-3.581 5.534-6.61 8.842-9.413c1.454-1.233 3.609-1.233 5.043.02c3.188 2.792 6.095 5.851 8.681 9.393a62 62 0 0 1 2.497 3.661c.04.07.08.148.13.217c.03.138.06.286.06.444"/><g filter="url(#inUOKLe)"><path fill="url(#ieZy0DC)" d="M12.507 24.949a2 2 0 0 1 2-2h2.986a2 2 0 0 1 2 2v5.05h-6.986z"/></g><defs><linearGradient id="i3lk5Nd" x1="1.696" x2="7.252" y1="24.702" y2="24.702" gradientUnits="userSpaceOnUse"><stop stop-color="#6C5957"/><stop offset="1" stop-color="#6C5957" stop-opacity="0"/></linearGradient><linearGradient id="iqe4KCd" x1="31.806" x2="23.907" y1="24.619" y2="24.619" gradientUnits="userSpaceOnUse"><stop stop-color="#816965"/><stop offset="1" stop-color="#816965" stop-opacity="0"/></linearGradient><linearGradient id="isS5h0E" x1="10.766" x2="25.572" y1="19" y2="19" gradientUnits="userSpaceOnUse"><stop stop-color="#592630"/><stop offset="1" stop-color="#502727"/></linearGradient><linearGradient id="ieE7sqf" x1="27.304" x2="2.999" y1="11.105" y2="11.105" gradientUnits="userSpaceOnUse"><stop stop-color="#E0A87D"/><stop offset="1" stop-color="#B6845E"/></linearGradient><linearGradient id="iLxmhIb" x1="2.534" x2="10.597" y1="9.735" y2="14.756" gradientUnits="userSpaceOnUse"><stop stop-color="#9D7459"/><stop offset="1" stop-color="#9D7459" stop-opacity="0"/></linearGradient><linearGradient id="ieZy0DC" x1="15.666" x2="20.603" y1="26.721" y2="26.721" gradientUnits="userSpaceOnUse"><stop stop-color="#301E38"/><stop offset="1" stop-color="#190721"/></linearGradient><filter id="i5GAONc" width="23.671" height="3" x="4.829" y="16.5" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_5826" stdDeviation=".25"/></filter><filter id="ihMcBFe" width="28.5" height="16.532" x="2" y="2.968" 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=".25" dy="-.25"/><feGaussianBlur stdDeviation=".5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.779167 0 0 0 0 0.420044 0 0 0 0 0.363611 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_5826"/><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="1"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.635294 0 0 0 0 0.494118 0 0 0 0 0.419608 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_5826" result="effect2_innerShadow_18_5826"/></filter><filter id="inUOKLe" width="7.486" height="7.551" x="12.507" y="22.949" 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.0941176 0 0 0 0 0.0156863 0 0 0 0 0.129412 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_5826"/></filter><radialGradient id="iBBtqWk" cx="0" cy="0" r="1" gradientTransform="matrix(0 12.9249 -11.454 0 16 23.5)" gradientUnits="userSpaceOnUse"><stop stop-color="#79484A"/><stop offset="1" stop-color="#67403D"/></radialGradient><radialGradient id="iQoGgKb" cx="0" cy="0" r="1" gradientTransform="matrix(11.10513 -9.41677 20.46858 24.13845 14.096 19)" gradientUnits="userSpaceOnUse"><stop offset=".523" stop-color="#D79F7F" stop-opacity="0"/><stop offset="1" stop-color="#D99F70"/></radialGradient></defs></g></svg>Hut アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:hut" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:hut" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:hut" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--hut]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:hut"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:hut"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-emoji/hut.svg" alt="Hut アイコン" width="24" height="24">他のアイコンセットの Hut アイコン
Hut アイコン のよくある質問
Hut アイコンは商用利用でも無料ですか?
はい。Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Hut アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-emoji:hut" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Hut アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-emoji/hut.svg" alt="Hut アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。