Beach 48 アイコン
fluent-color:beach-48
Beach 48 アイコン(fluent-color:beach-48)は、Fluent UI System Color Icons セットの無料 SVG アイコンです（作者: Microsoft Corporation）。 48 × 48 のグリッドで描かれています。 Fluent UI System Color Icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Fluent UI System Color Icons
- 作者
- Microsoft Corporation
- ライセンス
- MIT
- サイズ
- 48 × 48
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVGjVYJh7DK)" d="M32.504 16.444L30.4 15.167l-8.55 14.092l2.103 1.277z"/><path fill="url(#SVGE6HLmcIk)" d="M11.808 39.76L18.485 43l5.09-3.24l7.335 2.672l3.813-3.482L37 40.522l1-.554c-.074-4.16-2.61-8.19-7.09-10.387c-6.72-3.306-15.286-1.258-19.102 4.564c-1.33 2.026-1.896 4.223-1.797 6.377z"/><path fill="url(#SVGtawGvbGB)" d="M35.83 35.728c-.667 0-1.23.45-1.433 1.096c-.767 2.468-2.643 3.662-4.497 3.684c-1.856.021-3.728-1.13-4.492-3.45c-.205-.62-.768-1.067-1.433-1.067c-.67 0-1.205.453-1.408 1.066v.002c-.752 2.32-2.618 3.477-4.474 3.465c-1.855-.012-3.736-1.194-4.515-3.648c-.205-.651-.798-1.098-1.49-1.069c-.685.003-1.235.554-1.405 1.185L10.68 37c-.41 1.789-1.175 2.727-2.03 3.265l-.003.001c-.89.57-2.08.803-3.404.83c-.85 0-1.493.734-1.493 1.565c0 .836.672 1.566 1.495 1.566c1.621 0 3.417-.294 4.966-1.276a7 7 0 0 0 2.105-2.092c3.077 3.758 8.706 3.73 11.684-.096c3.037 3.88 8.82 3.8 11.83-.175c1.68 2.235 4.31 3.534 6.925 3.534c.851 0 1.495-.734 1.495-1.566c0-.836-.672-1.566-1.495-1.566c-2.356 0-4.7-1.613-5.49-4.166v-.001c-.204-.647-.767-1.096-1.434-1.096"/><path fill="url(#SVG6pOwlb1r)" d="M39.43 26.105a1.75 1.75 0 0 0 2.315-.449l.505-.678c3.5-6.5 1.858-14.753-4.75-18.8s-15.276-2.314-19.295 4.268l-.285.463a1.75 1.75 0 0 0 .577 2.412z"/><path fill="url(#SVGwhU1AePW)" d="M37.417 6.226c-3.112.905-9.201 4.916-12.711 10.99l8.772 5.346c3.789-5.904 4.562-13.155 3.94-16.336"/><defs><linearGradient id="SVGjVYJh7DK" x1="24.002" x2="35.289" y1="26.754" y2="15.653" gradientUnits="userSpaceOnUse"><stop stop-color="#cd3e1d"/><stop offset="1" stop-color="#592a00"/></linearGradient><linearGradient id="SVGE6HLmcIk" x1="24" x2="24" y1="38.799" y2="28" gradientUnits="userSpaceOnUse"><stop stop-color="#ffc7a3"/><stop offset="1" stop-color="#ffa43d"/></linearGradient><linearGradient id="SVGtawGvbGB" x1="24.025" x2="24.025" y1="42.647" y2="35.992" gradientUnits="userSpaceOnUse"><stop offset=".061" stop-color="#0fafff"/><stop offset="1" stop-color="#0078d4"/></linearGradient><linearGradient id="SVG6pOwlb1r" x1="40.848" x2="21.748" y1="30.793" y2="3.548" gradientUnits="userSpaceOnUse"><stop stop-color="#aa1d2d"/><stop offset="1" stop-color="#fb6f7b"/></linearGradient><linearGradient id="SVGwhU1AePW" x1="36.829" x2="25.891" y1="16.215" y2="12.177" gradientUnits="userSpaceOnUse"><stop stop-color="#fecbe6"/><stop offset="1" stop-color="#fdafd9"/></linearGradient></defs></g></svg>Beach 48 アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-color:beach-48" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-color:beach-48" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-color:beach-48" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-color--beach-48]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-color -->
<div class="i-fluent-color:beach-48"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-color:beach-48"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-color/beach-48.svg" alt="Beach 48 アイコン" width="24" height="24">Fluent UI System Color Icons の関連アイコン
他のアイコンセットの Beach 48 アイコン
Beach 48 アイコン のよくある質問
Beach 48 アイコンは商用利用でも無料ですか?
はい。Fluent UI System Color Icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Beach 48 アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-color:beach-48" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Beach 48 アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-color/beach-48.svg" alt="Beach 48 アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。