Door アイコン
fluent-emoji:door
Door アイコン(fluent-emoji:door)は、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(#iPJun4r)"><rect width="15.922" height="27.938" x="8.014" y="2.172" fill="url(#i7YRYIb)" rx="1.6"/><rect width="15.922" height="27.938" x="8.014" y="2.172" fill="url(#iCC6hIb)" rx="1.6"/></g><g filter="url(#iHMibfd)"><rect width="12.324" height="8.801" x="9.838" y="4.145" fill="url(#iUK8Gid)" rx="1.4"/></g><g filter="url(#iNQMWfe)"><rect width="12.324" height="4.859" x="9.838" y="16.188" fill="url(#iVOR5Lb)" rx="1.4"/></g><g filter="url(#ijHkR8c)"><rect width="12.324" height="4.859" x="9.838" y="23.137" fill="url(#iqIgDRc)" rx="1.4"/></g><g filter="url(#iRJBbzc)"><circle cx="21.811" cy="14.977" r="1.023" fill="#C76B48"/></g><circle cx="22.162" cy="14.59" r="1.023" fill="url(#iQYm4Eb)"/><circle cx="22.162" cy="14.59" r="1.023" fill="url(#iNrt6Uc)"/><circle cx="22.162" cy="14.59" r="1.023" fill="url(#iT4dfVt)"/><defs><filter id="iPJun4r" width="16.622" height="28.637" x="7.814" y="1.672" 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=".625"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.694118 0 0 0 0 0.368627 0 0 0 0 0.329412 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_25393"/><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" dy=".2"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.811765 0 0 0 0 0.556863 0 0 0 0 0.321569 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_25393" result="effect2_innerShadow_18_25393"/></filter><filter id="iHMibfd" width="13.324" height="9.801" x="9.338" y="3.645" 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=".325"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.811765 0 0 0 0 0.592157 0 0 0 0 0.435294 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_25393"/><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" dy="-.4"/><feGaussianBlur stdDeviation=".325"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.760784 0 0 0 0 0.486275 0 0 0 0 0.270588 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_25393" result="effect2_innerShadow_18_25393"/><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=".325"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.717647 0 0 0 0 0.403922 0 0 0 0 0.278431 0 0 0 1 0"/><feBlend in2="effect2_innerShadow_18_25393" result="effect3_innerShadow_18_25393"/></filter><filter id="iNQMWfe" width="13.324" height="5.859" x="9.338" y="15.688" 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=".325"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.811765 0 0 0 0 0.592157 0 0 0 0 0.435294 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_25393"/><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" dy="-.4"/><feGaussianBlur stdDeviation=".325"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.760784 0 0 0 0 0.486275 0 0 0 0 0.270588 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_25393" result="effect2_innerShadow_18_25393"/><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=".325"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.717647 0 0 0 0 0.403922 0 0 0 0 0.278431 0 0 0 1 0"/><feBlend in2="effect2_innerShadow_18_25393" result="effect3_innerShadow_18_25393"/></filter><filter id="ijHkR8c" width="13.324" height="5.859" x="9.338" y="22.637" 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=".325"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.811765 0 0 0 0 0.592157 0 0 0 0 0.435294 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_25393"/><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" dy="-.4"/><feGaussianBlur stdDeviation=".325"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.760784 0 0 0 0 0.486275 0 0 0 0 0.270588 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_25393" result="effect2_innerShadow_18_25393"/><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=".325"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.717647 0 0 0 0 0.403922 0 0 0 0 0.278431 0 0 0 1 0"/><feBlend in2="effect2_innerShadow_18_25393" result="effect3_innerShadow_18_25393"/></filter><filter id="iRJBbzc" width="3.347" height="3.347" x="20.137" y="13.303" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_25393" stdDeviation=".325"/></filter><radialGradient id="iCC6hIb" cx="0" cy="0" r="1" gradientTransform="matrix(-1.91844 1.75627 -1.6064 -1.75474 23.936 2.65)" gradientUnits="userSpaceOnUse"><stop offset=".039" stop-color="#E8A66F"/><stop offset="1" stop-color="#E8A66F" stop-opacity="0"/></radialGradient><radialGradient id="iQYm4Eb" cx="0" cy="0" r="1" gradientTransform="rotate(118.044 7.148 13.814)scale(1.8279)" gradientUnits="userSpaceOnUse"><stop offset=".242" stop-color="#FFB62F"/><stop offset=".905" stop-color="#E07124"/></radialGradient><radialGradient id="iNrt6Uc" cx="0" cy="0" r="1" gradientTransform="rotate(131.634 8.113 12.224)scale(.94075)" gradientUnits="userSpaceOnUse"><stop offset=".167" stop-color="#FFCB6E"/><stop offset="1" stop-color="#FEA32F" stop-opacity="0"/></radialGradient><radialGradient id="iT4dfVt" cx="0" cy="0" r="1" gradientTransform="rotate(180 11.429 7.295)scale(1.92187)" gradientUnits="userSpaceOnUse"><stop offset=".682" stop-color="#F0972A" stop-opacity="0"/><stop offset="1" stop-color="#D37D22"/></radialGradient><linearGradient id="i7YRYIb" x1="15.975" x2="15.975" y1="2.172" y2="30.109" gradientUnits="userSpaceOnUse"><stop stop-color="#DA9662"/><stop offset="1" stop-color="#D58763"/></linearGradient><linearGradient id="iUK8Gid" x1="9.838" x2="22.162" y1="8.859" y2="8.859" gradientUnits="userSpaceOnUse"><stop stop-color="#CC8D6A"/><stop offset="1" stop-color="#C48462"/></linearGradient><linearGradient id="iVOR5Lb" x1="9.838" x2="22.162" y1="18.791" y2="18.791" gradientUnits="userSpaceOnUse"><stop stop-color="#CC8D6A"/><stop offset="1" stop-color="#C48462"/></linearGradient><linearGradient id="iqIgDRc" x1="9.838" x2="22.162" y1="25.74" y2="25.74" gradientUnits="userSpaceOnUse"><stop stop-color="#CC8D6A"/><stop offset="1" stop-color="#C48462"/></linearGradient></defs></g></svg>Door アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:door" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:door" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:door" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--door]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:door"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:door"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-emoji/door.svg" alt="Door アイコン" width="24" height="24">他のアイコンセットの Door アイコン
Door アイコン のよくある質問
Door アイコンは商用利用でも無料ですか?
はい。Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Door アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-emoji:door" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Door アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-emoji/door.svg" alt="Door アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。