Beach 28 アイコン
fluent-color:beach-28
Beach 28 アイコン(fluent-color:beach-28)は、Fluent UI System Color Icons セットの無料 SVG アイコンです（作者: Microsoft Corporation）。 28 × 28 のグリッドで描かれています。 Fluent UI System Color Icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Fluent UI System Color Icons
- 作者
- Microsoft Corporation
- ライセンス
- MIT
- サイズ
- 28 × 28
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><g fill="none"><path fill="url(#SVGsu5HkcqT)" d="m19.676 8.89l-1.305-.74l-4.958 8.738l1.305.74z"/><path fill="url(#SVG7Fr5DQBq)" d="M7.088 22.374L10.5 25.26l3-2l4.322 1.65L21 22.76l1 .628c-.044-2.567-1.538-5.056-4.178-6.412c-3.96-2.04-9.008-.777-11.257 2.818a6.8 6.8 0 0 0-1.059 3.936l1.582-1.369z"/><path fill="url(#SVGYFsNIb7P)" d="M21.033 21.45a.99.99 0 0 0-.945.687v.001c-.87 2.649-4.262 2.612-5.126.128a1 1 0 0 0-.944-.668a.98.98 0 0 0-.928.668v.002c-.85 2.482-4.244 2.533-5.127-.102a.985.985 0 0 0-.98-.672c-.452.003-.814.347-.927.742l-.002.01c-.237.974-.672 1.474-1.152 1.76H4.9c-.505.306-1.19.436-1.966.45a.99.99 0 0 0-.984.987c0 .536.45.987.987.987c.968 0 2.05-.166 2.987-.728a4.1 4.1 0 0 0 1.205-1.1c1.85 2.028 5.11 2.012 6.905-.059c1.83 2.102 5.183 2.058 6.998-.095a5.4 5.4 0 0 0 4.098 1.923a.99.99 0 0 0 .987-.987a1 1 0 0 0-.987-.986c-1.358 0-2.701-.881-3.152-2.26v-.001a.99.99 0 0 0-.945-.687"/><path fill="url(#SVG5jQtaciX)" d="M23.471 14.152a1 1 0 0 0 1.361-.372l.14-.242c2.108-3.717.884-8.393-2.847-10.517c-3.732-2.124-8.481-.826-10.59 2.89l-.26.454a.75.75 0 0 0 .28 1.025z"/><path fill="url(#SVGj4BrKdlV)" d="M22.43 3.215c-1.735.565-5.09 2.932-6.955 6.414l5.033 2.85c2.025-3.39 2.33-7.485 1.922-9.264"/><defs><linearGradient id="SVGsu5HkcqT" x1="14.68" x2="21.358" y1="15.324" y2="8.359" gradientUnits="userSpaceOnUse"><stop stop-color="#cd3e1d"/><stop offset="1" stop-color="#592a00"/></linearGradient><linearGradient id="SVG7Fr5DQBq" x1="13.75" x2="13.75" y1="22.667" y2="16" gradientUnits="userSpaceOnUse"><stop stop-color="#ffc7a3"/><stop offset="1" stop-color="#ffa43d"/></linearGradient><linearGradient id="SVGYFsNIb7P" x1="14.048" x2="14.048" y1="25.435" y2="21.708" gradientUnits="userSpaceOnUse"><stop offset=".061" stop-color="#0fafff"/><stop offset="1" stop-color="#0078d4"/></linearGradient><linearGradient id="SVG5jQtaciX" x1="24.455" x2="13.393" y1="16.709" y2="1.959" gradientUnits="userSpaceOnUse"><stop stop-color="#aa1d2d"/><stop offset="1" stop-color="#fb6f7b"/></linearGradient><linearGradient id="SVGj4BrKdlV" x1="22.279" x2="16.051" y1="8.847" y2="6.772" gradientUnits="userSpaceOnUse"><stop stop-color="#fecbe6"/><stop offset="1" stop-color="#fdafd9"/></linearGradient></defs></g></svg>Beach 28 アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-color:beach-28" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-color:beach-28" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-color:beach-28" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-color--beach-28]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-color -->
<div class="i-fluent-color:beach-28"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-color:beach-28"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-color/beach-28.svg" alt="Beach 28 アイコン" width="24" height="24">Fluent UI System Color Icons の関連アイコン
Beach 28 アイコン のよくある質問
Beach 28 アイコンは商用利用でも無料ですか?
はい。Fluent UI System Color Icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Beach 28 アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-color:beach-28" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Beach 28 アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-color/beach-28.svg" alt="Beach 28 アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。