Beach 16 アイコン
fluent-color:beach-16
Beach 16 アイコン(fluent-color:beach-16)は、Fluent UI System Color Icons セットの無料 SVG アイコンです（作者: Microsoft Corporation）。 16 × 16 のグリッドで描かれています。 Fluent UI System Color Icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Fluent UI System Color Icons
- 作者
- Microsoft Corporation
- ライセンス
- MIT
- サイズ
- 16 × 16
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVGdBE1vr9g)" d="m10.119 5.545l-.87-.495l-2.188 3.87l.869.495z"/><path fill="url(#SVGB4xWCbEO)" d="M3.88 12.508L6 13.55l1.71-1.196L9.5 13.55l2-.696h.8a4.52 4.52 0 0 0-2.279-3.866a4.5 4.5 0 0 0-6.718 4.073l.578-.762z"/><path fill="url(#SVG2fqQVd1R)" d="M4.12 11.75a.5.5 0 0 1 .495.343c.464 1.401 2.268 1.377 2.72.06a.5.5 0 0 1 .946 0c.453 1.317 2.257 1.341 2.722-.06a.5.5 0 0 1 .95.005c.235.733.948 1.201 1.664 1.201a.5.5 0 1 1 0 1a2.8 2.8 0 0 1-2.142-1.022c-.95 1.14-2.715 1.154-3.666.041c-.935 1.093-2.654 1.1-3.615.02a2.2 2.2 0 0 1-.636.584c-.492.297-1.054.377-1.558.377a.5.5 0 0 1 0-1c.413 0 .768-.068 1.04-.233c.256-.154.49-.423.614-.935a.5.5 0 0 1 .466-.38"/><path fill="url(#SVGcoUXXb3H)" d="M12.66 7.793a.5.5 0 0 0 .688-.188l.095-.17c1.141-2.068.479-4.668-1.54-5.85c-2.02-1.18-4.59-.459-5.731 1.608l-.105.187a.5.5 0 0 0 .185.676z"/><path fill="url(#SVGvNyKRDQf)" d="M12.013 1.653c.22.99.057 3.266-1.038 5.15L8.25 5.215c1.008-1.933 2.82-3.248 3.76-3.564l.002-.002v.002h.002z"/><defs><linearGradient id="SVGdBE1vr9g" x1="7.685" x2="10.429" y1="8.264" y2="4.899" gradientUnits="userSpaceOnUse"><stop stop-color="#cd3e1d"/><stop offset="1" stop-color="#592a00"/></linearGradient><linearGradient id="SVGB4xWCbEO" x1="7.267" x2="7.267" y1="12.75" y2="8.73" gradientUnits="userSpaceOnUse"><stop stop-color="#ffc7a3"/><stop offset="1" stop-color="#ffa43d"/></linearGradient><linearGradient id="SVG2fqQVd1R" x1="7.817" x2="7.817" y1="13.875" y2="11.755" gradientUnits="userSpaceOnUse"><stop offset=".061" stop-color="#0fafff"/><stop offset="1" stop-color="#0078d4"/></linearGradient><linearGradient id="SVGcoUXXb3H" x1="13.164" x2="6.966" y1="9.198" y2="1.158" gradientUnits="userSpaceOnUse"><stop stop-color="#aa1d2d"/><stop offset="1" stop-color="#fb6f7b"/></linearGradient><linearGradient id="SVGvNyKRDQf" x1="11.933" x2="8.541" y1="4.782" y2="3.684" gradientUnits="userSpaceOnUse"><stop stop-color="#fecbe6"/><stop offset="1" stop-color="#fdafd9"/></linearGradient></defs></g></svg>Beach 16 アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-color:beach-16" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-color:beach-16" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-color:beach-16" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-color--beach-16]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-color -->
<div class="i-fluent-color:beach-16"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-color:beach-16"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-color/beach-16.svg" alt="Beach 16 アイコン" width="24" height="24">Fluent UI System Color Icons の関連アイコン
Beach 16 アイコン のよくある質問
Beach 16 アイコンは商用利用でも無料ですか?
はい。Fluent UI System Color Icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Beach 16 アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-color:beach-16" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Beach 16 アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-color/beach-16.svg" alt="Beach 16 アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。