Beach With Umbrella アイコン

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

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

fluent-emoji:beach-with-umbrella

Beach With Umbrella アイコン(fluent-emoji:beach-with-umbrella)は、Fluent Emoji セットの無料 SVG アイコンです（作者: Microsoft Corporation）。 32 × 32 のグリッドで描かれています。 Fluent Emoji icons は MIT ライセンスで公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット: Fluent Emoji
作者: Microsoft Corporation
ライセンス: MIT
サイズ: 32 × 32
タグ: beachwith、withumbrella、beachwithumbrella

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><g filter="url(#iAbpKYc)"><path fill="url(#i3FUVEd)" d="M5 29.034h21.98c1.66 0 3.01-1.35 3.01-3.01v-6a2 2 0 0 0-2-2h-24a2 2 0 0 0-2 2v6c0 1.67 1.35 3.01 3.01 3.01"/></g><g filter="url(#i5jo0Cc)"><path fill="url(#istIHAe)" d="M7.78 27.407c13.705 0 17.717-1.868 17.717-2.783S20.8 21.84 7.78 21.84z"/></g><path fill="url(#itoTcEd)" d="M27.99 17.034h-24a2 2 0 0 0-2 2v2h27.99v-2c0-1.1-.89-2-1.99-2"/><path fill="url(#ieQppUU)" d="M27.99 17.034h-24a2 2 0 0 0-2 2v2h27.99v-2c0-1.1-.89-2-1.99-2"/><g filter="url(#iv1lFfb)"><path fill="url(#i0u49vV)" d="M24.24 6.974L7.11 24.104c-.2.2-.2.52 0 .72s.52.2.72 0l17.13-17.13c.2-.2.2-.52 0-.72s-.52-.2-.72 0"/><path fill="url(#iQjOwQt)" d="M24.24 6.974L7.11 24.104c-.2.2-.2.52 0 .72s.52.2.72 0l17.13-17.13c.2-.2.2-.52 0-.72s-.52-.2-.72 0"/></g><path fill="url(#iSdbuZd)" d="M22.81 24.944c.76.76 1.95.82 2.52.08c3.9-5.1 3.49-12.46-1.21-17.16s-12.08-5.12-17.18-1.22c-.74.56-.68 1.75.08 2.51l.76.76l7.579 7.643l6.681 6.617z"/><path fill="url(#iaod2Ws)" d="M22.81 24.944c.76.76 1.95.82 2.52.08c3.9-5.1 3.49-12.46-1.21-17.16s-12.08-5.12-17.18-1.22c-.74.56-.68 1.75.08 2.51l.76.76l7.579 7.643l6.681 6.617z"/><path fill="url(#ivGKWkb)" d="M22.81 24.944c.76.76 1.95.82 2.52.08c3.9-5.1 3.49-12.46-1.21-17.16s-12.08-5.12-17.18-1.22c-.74.56-.68 1.75.08 2.51l.76.76l7.579 7.643l6.681 6.617z"/><path fill="url(#iYIfeae)" d="M22.81 24.944c.76.76 1.95.82 2.52.08c3.9-5.1 3.49-12.46-1.21-17.16s-12.08-5.12-17.18-1.22c-.74.56-.68 1.75.08 2.51l.76.76l7.579 7.643l6.681 6.617z"/><path fill="url(#i0W8UNd)" d="M22.81 24.944c.76.76 1.95.82 2.52.08c3.9-5.1 3.49-12.46-1.21-17.16s-12.08-5.12-17.18-1.22c-.74.56-.68 1.75.08 2.51l.76.76l7.579 7.643l6.681 6.617z"/><path fill="url(#igpgZGc)" d="M24.223 7.99c3.786 3.97 2.829 11.162-2.193 16.184l-3.576-3.578l.006-.002c4.96-4.959 7.479-10.518 5.763-12.603"/><path fill="url(#iwP1wzb)" d="M24.223 7.99c3.786 3.97 2.829 11.162-2.193 16.184l-3.576-3.578l.006-.002c4.96-4.959 7.479-10.518 5.763-12.603"/><path fill="url(#igpgZGc)" d="M23.95 7.717C19.979 3.937 12.8 4.894 7.78 9.914l3.55 3.578C16.295 8.53 21.862 6 23.95 7.717"/><path fill="url(#iwP1wzb)" d="M23.95 7.717C19.979 3.937 12.8 4.894 7.78 9.914l3.55 3.578C16.295 8.53 21.862 6 23.95 7.717"/><g filter="url(#iIOHfVb)"><path stroke="url(#iAuPDDc)" stroke-linecap="round" stroke-width=".25" d="m7.389 24.368l5.575-5.583"/></g><defs><linearGradient id="i3FUVEd" x1="27.009" x2="12.019" y1="28.221" y2="19.827" gradientUnits="userSpaceOnUse"><stop stop-color="#FFC250"/><stop offset="1" stop-color="#FFB000"/></linearGradient><linearGradient id="itoTcEd" x1="1.99" x2="29.982" y1="19.038" y2="19.038" gradientUnits="userSpaceOnUse"><stop stop-color="#49ADE8"/><stop offset="1" stop-color="#6CEDFD"/></linearGradient><linearGradient id="ieQppUU" x1="30.199" x2="29.153" y1="19.648" y2="19.648" gradientUnits="userSpaceOnUse"><stop stop-color="#7DF8FF"/><stop offset="1" stop-color="#7DF8FF" stop-opacity="0"/></linearGradient><linearGradient id="i0u49vV" x1="24.987" x2="7.136" y1="6.984" y2="24.835" gradientUnits="userSpaceOnUse"><stop stop-color="#A66459"/><stop offset=".589" stop-color="#8A3F42"/><stop offset="1" stop-color="#7B4230"/></linearGradient><linearGradient id="iSdbuZd" x1="22.12" x2="13.182" y1="13.472" y2="15.535" gradientUnits="userSpaceOnUse"><stop stop-color="#FF6072"/><stop offset="1" stop-color="#EC3A51"/></linearGradient><linearGradient id="ivGKWkb" x1="13.079" x2="15.974" y1="16.767" y2="13.872" gradientUnits="userSpaceOnUse"><stop stop-color="#CB3A43"/><stop offset=".481" stop-color="#D92E49"/><stop offset=".671" stop-color="#D92E49" stop-opacity="0"/></linearGradient><linearGradient id="iYIfeae" x1="29.681" x2="22.643" y1="22.386" y2="17.334" gradientUnits="userSpaceOnUse"><stop stop-color="#EE442B"/><stop offset="1" stop-color="#EE442B" stop-opacity="0"/></linearGradient><linearGradient id="igpgZGc" x1="15.057" x2="23.995" y1="17.285" y2="8.347" gradientUnits="userSpaceOnUse"><stop stop-color="#E5DFEA"/><stop offset="1" stop-color="#FEFCFF"/></linearGradient><linearGradient id="iwP1wzb" x1="13.682" x2="16.464" y1="18.097" y2="15.316" gradientUnits="userSpaceOnUse"><stop stop-color="#C9B9C9"/><stop offset=".612" stop-color="#D4C9DC"/><stop offset=".815" stop-color="#D4C9DC" stop-opacity="0"/></linearGradient><linearGradient id="iAuPDDc" x1="7.776" x2="13.579" y1="23.764" y2="22.516" gradientUnits="userSpaceOnUse"><stop stop-color="#7F5951"/><stop offset="1" stop-color="#7F5951" stop-opacity="0"/></linearGradient><radialGradient id="istIHAe" cx="0" cy="0" r="1" gradientTransform="matrix(-19.2226 0 0 -5.27651 24.26 24.274)" gradientUnits="userSpaceOnUse"><stop stop-color="#D7731C"/><stop offset="1" stop-color="#D7731C" stop-opacity="0"/></radialGradient><radialGradient id="iQjOwQt" cx="0" cy="0" r="1" gradientTransform="matrix(-.70434 .59401 -.38087 -.4516 25.052 6.91)" gradientUnits="userSpaceOnUse"><stop stop-color="#C18E80"/><stop offset=".993" stop-color="#C18E80" stop-opacity="0"/></radialGradient><radialGradient id="iaod2Ws" cx="0" cy="0" r="1" gradientTransform="rotate(-23.165 52.867 -30.276)scale(12.8413 20.2531)" gradientUnits="userSpaceOnUse"><stop offset=".768" stop-color="#EA596B" stop-opacity="0"/><stop offset="1" stop-color="#EA596B"/></radialGradient><radialGradient id="i0W8UNd" cx="0" cy="0" r="1" gradientTransform="rotate(-119.416 15.046 2.3)scale(13.489 22.5036)" gradientUnits="userSpaceOnUse"><stop stop-color="#CA3E4B" stop-opacity="0"/><stop offset=".611" stop-color="#CA3E4B" stop-opacity="0"/><stop offset="1" stop-color="#CA3E4B"/></radialGradient><filter id="iAbpKYc" width="28.15" height="11.01" x="1.84" y="18.024" 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="-.15"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.886275 0 0 0 0 0.45098 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_5055"/></filter><filter id="i5jo0Cc" width="19.717" height="7.568" x="6.78" y="20.84" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_5055" stdDeviation=".5"/></filter><filter id="iv1lFfb" width="18.15" height="18.35" x="6.96" y="6.624" 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 dy="-.2"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.498039 0 0 0 0 0.262745 0 0 0 0 0.109804 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_5055"/></filter><filter id="iIOHfVb" width="6.325" height="6.333" x="7.014" y="18.41" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_5055" stdDeviation=".125"/></filter></defs></g></svg>

Beach With Umbrella アイコンの使い方

React

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

<Icon icon="fluent-emoji:beach-with-umbrella" width="24" />

Vue

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

<template>
  <Icon icon="fluent-emoji:beach-with-umbrella" width="24" />
</template>

Svelte

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

<Icon icon="fluent-emoji:beach-with-umbrella" width="24" />

Tailwind CSS

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

UnoCSS

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

Web コンポーネント

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

<iconify-icon icon="fluent-emoji:beach-with-umbrella"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/fluent-emoji/beach-with-umbrella.svg" alt="Beach With Umbrella アイコン" width="24" height="24">

他のアイコンセットの Beach With Umbrella アイコン

Beach With Umbrella アイコンのよくある質問

Beach With Umbrella アイコンは商用利用でも無料ですか?

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

React で Beach With Umbrella アイコンを使うには?

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

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

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

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