Fluent Icons

Beach icon

The Beach icon is part of Microsoft's Fluent UI System Icons, available here in regular, filled and color styles in 6 sizes from 16 to 48 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG
Beach Color

Color

SVG
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_beach_24_regular.svg

Beach icon in React

npm install @fluentui/react-icons

import { Beach24Regular } from "@fluentui/react-icons";

export function Example() {
  return <Beach24Regular aria-label="Beach" />;
}

Beach icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/beach_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/beach_24_regular.svg" width="24" height="24" alt="Beach">

Beach icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.Beach())" />

Beach icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.beach_24_regular)

Beach icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xE14A;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xE14A;" FontSize="24" />

Beach icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_beach_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\e14a";
  font-size: 24px;
}

Beach icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_beach_24_regular" />

// Kotlin
R.drawable.ic_fluent_beach_24_regular

Beach icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .beach24Regular)

Beach icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

Use the Beach icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS. 

npm install @fluentui/react-icons

import { Beach24Regular, Beach24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Beach24Regular aria-label="Beach" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_beach_24_regular.svg" width="24" height="24" alt="Beach">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent: 

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.35048 5.32144C11.2144 2.09296 15.3427 0.986807 18.5712 2.85077C21.7996 4.71473 22.9058 8.84296 21.0418 12.0714L20.7918 12.5045C20.5847 12.8632 20.126 12.9861 19.7673 12.779L15.2086 10.147L12.8357 14.2995C14.7406 14.525 16.4252 15.5093 17.6787 16.9141C17.1534 16.9994 16.6869 17.2909 16.3793 17.7161C15.2141 16.5078 13.6661 15.7503 12 15.7503C10.3339 15.7503 8.78594 16.5078 7.62074 17.7161C7.31271 17.2903 6.84569 16.9992 6.32132 16.914C7.56154 15.5241 9.22374 14.5459 11.1038 14.3069L13.9095 9.39697L9.375 6.77897C9.01628 6.57186 8.89337 6.11317 9.10048 5.75445L9.35048 5.32144ZM10.7796 5.85786L12.7456 6.99293C13.2797 6.17401 13.8198 5.49998 14.4891 4.89141C15.0146 4.41354 15.6067 3.98805 16.3152 3.56564C14.22 3.10815 11.9869 3.97619 10.7796 5.85786ZM16.5896 9.21228C17.1442 8.21522 17.4101 7.42287 17.5058 6.65729C17.5834 6.03611 17.5534 5.40152 17.4418 4.64661C16.6236 5.10695 16.0124 5.53366 15.4982 6.00122C14.9653 6.48581 14.5165 7.03232 14.0468 7.74416L16.5896 9.21228ZM17.8888 9.96236L19.8627 11.102C20.9059 9.08223 20.5111 6.66785 19.0063 5.08258C19.063 5.68104 19.0673 6.25857 18.9942 6.84334C18.868 7.85306 18.518 8.83567 17.8888 9.96236ZM6.71405 18.6587C6.61104 18.3382 6.30703 18.1256 5.97059 18.1388C5.63415 18.152 5.34774 18.3878 5.27018 18.7154C5.05935 19.606 4.66338 20.0789 4.22869 20.3495C3.76977 20.6351 3.1784 20.7502 2.5 20.7502C2.08579 20.7502 1.75 21.086 1.75 21.5002C1.75 21.9145 2.08579 22.2502 2.5 22.2502C3.3216 22.2502 4.23023 22.1154 5.02131 21.623C5.4339 21.3662 5.79237 21.026 6.08332 20.5943C7.63479 22.4601 10.4928 22.4507 12 20.5653C13.5336 22.4838 16.4661 22.4599 17.9973 20.4942C18.8448 21.6033 20.1675 22.2502 21.5 22.2502C21.9142 22.2502 22.25 21.9145 22.25 21.5002C22.25 21.086 21.9142 20.7502 21.5 20.7502C20.3169 20.7502 19.1155 19.9531 18.7163 18.666C18.6194 18.3535 18.331 18.1399 18.0038 18.1382C17.6766 18.1365 17.3861 18.3472 17.286 18.6587C16.502 21.0984 13.4764 21.0578 12.7115 18.7631C12.6094 18.4568 12.3228 18.2502 12 18.2502C11.6772 18.2502 11.3906 18.4568 11.2885 18.7631C10.5236 21.0578 7.49798 21.0984 6.71405 18.6587Z" fill="currentColor"/></svg>

Details

NameBeach
StylesRegular (outlined), Filled, Color
Sizes16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_beach_24_regular.svg
Filled fileic_fluent_beach_24_filled.svg
Color fileic_fluent_beach_24_color.svg
React (Regular)Beach16Regular, Beach20Regular, Beach24Regular, Beach28Regular, Beach32Regular, Beach48Regular
React (Filled)Beach16Filled, Beach20Filled, Beach24Filled, Beach28Filled, Beach32Filled, Beach48Filled
React (Color)Beach16Color, Beach20Color, Beach24Color, Beach28Color, Beach32Color, Beach48Color
LicenseMIT (© Microsoft Corporation)

Keywords

Related icons

BedBenchDrink BeerDrink CoffeeDrink MargaritaDrink To GoDrink WineMountain Location BottomMountain Location TopMountain TrailPlant CattailVehicle Cable Car