Tumbler Glass アイコン
fluent-emoji:tumbler-glass
Tumbler Glass アイコン(fluent-emoji:tumbler-glass)は、Fluent Emoji セットの無料 SVG アイコンです（作者: Microsoft Corporation）。 32 × 32 のグリッドで描かれています。 Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Fluent Emoji
- 作者
- Microsoft Corporation
- ライセンス
- MIT
- サイズ
- 32 × 32
- タグ
- tumblerglass
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><path fill="#C2DBF2" d="M27.45 29.95H4.5a2.5 2.5 0 0 1-2.5-2.5V4.62c0-.34.28-.62.62-.62h26.7c.34 0 .62.28.62.62v22.83c0 1.38-1.11 2.5-2.49 2.5"/><path fill="url(#i13lvMc)" d="M27.45 29.95H4.5a2.5 2.5 0 0 1-2.5-2.5V4.62c0-.34.28-.62.62-.62h26.7c.34 0 .62.28.62.62v22.83c0 1.38-1.11 2.5-2.49 2.5"/><g filter="url(#imIh8xH)"><path fill="url(#iNehLNe)" d="M26.565 28.531H5.384c-1.274 0-2.307-1.015-2.307-2.267V5.562A.57.57 0 0 1 3.649 5H28.29a.57.57 0 0 1 .572.562v20.702c0 1.252-1.024 2.267-2.298 2.267"/></g><path fill="url(#i4YLfld)" d="M27.45 9.281H4.5c-1.38 0-2.5-.228-2.5-.509V4.126C2 4.057 2.28 4 2.62 4h26.7c.34 0 .62.057.62.126v4.646c0 .281-1.11.51-2.49.51"/><path fill="url(#iwb741d)" d="M4.56 26.95C3.7 26.95 3 26.26 3 25.4v-6.47c0-.55.44-.99.99-.99h23.96c.55 0 .99.44.99.99v6.47c0 .86-.7 1.56-1.56 1.56H4.56z"/><path fill="url(#ioISqzc)" d="M4.56 26.95C3.7 26.95 3 26.26 3 25.4v-6.43c0-.57.46-1.03 1.03-1.03h23.88c.57 0 1.03.46 1.03 1.03v6.43c0 .86-.7 1.56-1.56 1.56H4.56z"/><path fill="url(#iDkyP6d)" d="M22.632 13H9.446c-.498 0-.9.438-.9.982v3.958h14.985v-3.958c0-.544-.4-.982-.899-.982"/><path fill="url(#iJRPaae)" d="M22.632 13H9.446c-.498 0-.9.438-.9.982v3.958h14.985v-3.958c0-.544-.4-.982-.899-.982"/><path fill="url(#iFZE2gw)" d="M23.531 17.94v-3.954c0-.547-.407-.986-.913-.986H16.84c-.506 0-.914.44-.914.986v3.954z"/><path fill="url(#is1RDed)" d="M23.531 17.94v-3.954c0-.547-.407-.986-.913-.986H16.84c-.506 0-.914.44-.914.986v3.954z"/><path fill="url(#iBVH29b)" d="M23.531 17.94H8.547v6.14H23.53z"/><rect width="2.063" height="19.813" x="25.453" y="6.031" fill="url(#iNjAqWb)" rx="1.031"/><defs><linearGradient id="iNehLNe" x1="3.077" x2="28.863" y1="11.577" y2="11.577" gradientUnits="userSpaceOnUse"><stop stop-color="#D0EDFF"/><stop offset=".431" stop-color="#CCF1FF"/><stop offset=".656" stop-color="#D5FAFF"/><stop offset=".833" stop-color="#DBFAFD"/><stop offset="1" stop-color="#C7EBFF"/></linearGradient><linearGradient id="iwb741d" x1="15.972" x2="15.972" y1="15.584" y2="30.54" gradientUnits="userSpaceOnUse"><stop stop-color="#FF8C00"/><stop offset="1" stop-color="#6A4531"/></linearGradient><linearGradient id="ioISqzc" x1="15.972" x2="15.972" y1="17.94" y2="26.96" gradientUnits="userSpaceOnUse"><stop stop-color="#F4953F"/><stop offset=".069" stop-color="#F6A562"/><stop offset=".398" stop-color="#D28C49"/><stop offset=".599" stop-color="#B77B43"/><stop offset=".921" stop-color="#926D3D"/><stop offset="1" stop-color="#8C8978"/></linearGradient><linearGradient id="iDkyP6d" x1="16.039" x2="16.039" y1="13" y2="17.94" gradientUnits="userSpaceOnUse"><stop stop-color="#3AB8F2"/><stop offset=".074" stop-color="#51C1FA"/><stop offset=".158" stop-color="#4AB5EB"/><stop offset="1" stop-color="#449FC2"/></linearGradient><linearGradient id="iJRPaae" x1="16.039" x2="14.875" y1="13" y2="13" gradientUnits="userSpaceOnUse"><stop stop-color="#3DC2FF"/><stop offset=".329" stop-color="#3EB4F0"/><stop offset=".718" stop-color="#3FABDF" stop-opacity="0"/></linearGradient><linearGradient id="iFZE2gw" x1="19.729" x2="19.729" y1="13" y2="17.94" gradientUnits="userSpaceOnUse"><stop stop-color="#88D8FF"/><stop offset=".074" stop-color="#84F9FF"/><stop offset=".158" stop-color="#6BE6FF"/><stop offset=".873" stop-color="#69DBFF"/><stop offset="1" stop-color="#65C7EE"/></linearGradient><linearGradient id="is1RDed" x1="15.926" x2="16.844" y1="15.156" y2="15.156" gradientUnits="userSpaceOnUse"><stop stop-color="#3EBEFA"/><stop offset=".199" stop-color="#5DD5FF"/><stop offset=".489" stop-color="#59D0FF" stop-opacity="0"/></linearGradient><linearGradient id="iBVH29b" x1="16.037" x2="16.037" y1="17.94" y2="22.938" gradientUnits="userSpaceOnUse"><stop stop-color="#978B52"/><stop offset="1" stop-color="#CD822C" stop-opacity="0"/></linearGradient><linearGradient id="iNjAqWb" x1="26.484" x2="26.484" y1="6.031" y2="25.844" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient><radialGradient id="i13lvMc" cx="0" cy="0" r="1" gradientTransform="matrix(0 5.375 -14.47 0 15.97 28.688)" gradientUnits="userSpaceOnUse"><stop stop-color="#BDF2FF"/><stop offset="1" stop-color="#BCF1FF" stop-opacity="0"/></radialGradient><radialGradient id="i4YLfld" cx="0" cy="0" r="1" gradientTransform="matrix(0 1.03125 -10.375 0 22.781 5.281)" gradientUnits="userSpaceOnUse"><stop stop-color="#DFFFFF"/><stop offset="1" stop-color="#DFFFFF" stop-opacity="0"/></radialGradient><filter id="imIh8xH" width="29.787" height="27.531" x="1.077" y="3" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_27445" stdDeviation="1"/></filter></defs></g></svg>Tumbler Glass アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:tumbler-glass" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:tumbler-glass" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:tumbler-glass" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--tumbler-glass]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:tumbler-glass"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:tumbler-glass"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-emoji/tumbler-glass.svg" alt="Tumbler Glass アイコン" width="24" height="24">他のアイコンセットの Tumbler Glass アイコン
Tumbler Glass アイコン のよくある質問
Tumbler Glass アイコンは商用利用でも無料ですか?
はい。Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Tumbler Glass アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-emoji:tumbler-glass" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Tumbler Glass アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-emoji/tumbler-glass.svg" alt="Tumbler Glass アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。