beach icon
beach-48 from Fluent UI System Color Icons by Microsoft Corporation · 48 · MIT Free for personal and commercial use.
- Name
- beach-48
- Set
- Fluent UI System Color Icons
- Style
- 48
- Viewbox
- 48×48
- License
- MIT
5 other variants in Fluent UI System Color Icons
The same icon in other sets
Use the beach icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVGjVYJh7DK1)" d="M32.504 16.444L30.4 15.167l-8.55 14.092l2.103 1.277z"/><path fill="url(#SVGE6HLmcIk1)" 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(#SVGtawGvbGB1)" 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(#SVG6pOwlb1r1)" 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(#SVGwhU1AePW1)" 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="SVGjVYJh7DK1" 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="SVGE6HLmcIk1" x1="24" x2="24" y1="38.799" y2="28" gradientUnits="userSpaceOnUse"><stop stop-color="#ffc7a3"/><stop offset="1" stop-color="#ffa43d"/></linearGradient><linearGradient id="SVGtawGvbGB1" 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="SVG6pOwlb1r1" 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="SVGwhU1AePW1" 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>
React
import type { SVGProps } from "react";
export function FluentColorBeach48(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVGjVYJh7DK1)" d="M32.504 16.444L30.4 15.167l-8.55 14.092l2.103 1.277z"/><path fill="url(#SVGE6HLmcIk1)" 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(#SVGtawGvbGB1)" 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(#SVG6pOwlb1r1)" 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(#SVGwhU1AePW1)" 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="SVGjVYJh7DK1" x1="24.002" x2="35.289" y1="26.754" y2="15.653" gradientUnits="userSpaceOnUse"><stop stopColor="#cd3e1d"/><stop offset="1" stopColor="#592a00"/></linearGradient><linearGradient id="SVGE6HLmcIk1" x1="24" x2="24" y1="38.799" y2="28" gradientUnits="userSpaceOnUse"><stop stopColor="#ffc7a3"/><stop offset="1" stopColor="#ffa43d"/></linearGradient><linearGradient id="SVGtawGvbGB1" x1="24.025" x2="24.025" y1="42.647" y2="35.992" gradientUnits="userSpaceOnUse"><stop offset=".061" stopColor="#0fafff"/><stop offset="1" stopColor="#0078d4"/></linearGradient><linearGradient id="SVG6pOwlb1r1" x1="40.848" x2="21.748" y1="30.793" y2="3.548" gradientUnits="userSpaceOnUse"><stop stopColor="#aa1d2d"/><stop offset="1" stopColor="#fb6f7b"/></linearGradient><linearGradient id="SVGwhU1AePW1" x1="36.829" x2="25.891" y1="16.215" y2="12.177" gradientUnits="userSpaceOnUse"><stop stopColor="#fecbe6"/><stop offset="1" stopColor="#fdafd9"/></linearGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none"><path fill="url(#SVGjVYJh7DK1)" d="M32.504 16.444L30.4 15.167l-8.55 14.092l2.103 1.277z"/><path fill="url(#SVGE6HLmcIk1)" 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(#SVGtawGvbGB1)" 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(#SVG6pOwlb1r1)" 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(#SVGwhU1AePW1)" 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="SVGjVYJh7DK1" 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="SVGE6HLmcIk1" x1="24" x2="24" y1="38.799" y2="28" gradientUnits="userSpaceOnUse"><stop stop-color="#ffc7a3"/><stop offset="1" stop-color="#ffa43d"/></linearGradient><linearGradient id="SVGtawGvbGB1" 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="SVG6pOwlb1r1" 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="SVGwhU1AePW1" 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> </template>
CSS
.icon-beach-48 {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGjVYJh7DK1)%22%20d%3D%22M32.504%2016.444L30.4%2015.167l-8.55%2014.092l2.103%201.277z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGE6HLmcIk1)%22%20d%3D%22M11.808%2039.76L18.485%2043l5.09-3.24l7.335%202.672l3.813-3.482L37%2040.522l1-.554c-.074-4.16-2.61-8.19-7.09-10.387c-6.72-3.306-15.286-1.258-19.102%204.564c-1.33%202.026-1.896%204.223-1.797%206.377z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGtawGvbGB1)%22%20d%3D%22M35.83%2035.728c-.667%200-1.23.45-1.433%201.096c-.767%202.468-2.643%203.662-4.497%203.684c-1.856.021-3.728-1.13-4.492-3.45c-.205-.62-.768-1.067-1.433-1.067c-.67%200-1.205.453-1.408%201.066v.002c-.752%202.32-2.618%203.477-4.474%203.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%201.185L10.68%2037c-.41%201.789-1.175%202.727-2.03%203.265l-.003.001c-.89.57-2.08.803-3.404.83c-.85%200-1.493.734-1.493%201.565c0%20.836.672%201.566%201.495%201.566c1.621%200%203.417-.294%204.966-1.276a7%207%200%200%200%202.105-2.092c3.077%203.758%208.706%203.73%2011.684-.096c3.037%203.88%208.82%203.8%2011.83-.175c1.68%202.235%204.31%203.534%206.925%203.534c.851%200%201.495-.734%201.495-1.566c0-.836-.672-1.566-1.495-1.566c-2.356%200-4.7-1.613-5.49-4.166v-.001c-.204-.647-.767-1.096-1.434-1.096%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG6pOwlb1r1)%22%20d%3D%22M39.43%2026.105a1.75%201.75%200%200%200%202.315-.449l.505-.678c3.5-6.5%201.858-14.753-4.75-18.8s-15.276-2.314-19.295%204.268l-.285.463a1.75%201.75%200%200%200%20.577%202.412z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGwhU1AePW1)%22%20d%3D%22M37.417%206.226c-3.112.905-9.201%204.916-12.711%2010.99l8.772%205.346c3.789-5.904%204.562-13.155%203.94-16.336%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGjVYJh7DK1%22%20x1%3D%2224.002%22%20x2%3D%2235.289%22%20y1%3D%2226.754%22%20y2%3D%2215.653%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23cd3e1d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23592a00%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGE6HLmcIk1%22%20x1%3D%2224%22%20x2%3D%2224%22%20y1%3D%2238.799%22%20y2%3D%2228%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ffc7a3%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffa43d%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGtawGvbGB1%22%20x1%3D%2224.025%22%20x2%3D%2224.025%22%20y1%3D%2242.647%22%20y2%3D%2235.992%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.061%22%20stop-color%3D%22%230fafff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230078d4%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG6pOwlb1r1%22%20x1%3D%2240.848%22%20x2%3D%2221.748%22%20y1%3D%2230.793%22%20y2%3D%223.548%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23aa1d2d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fb6f7b%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGwhU1AePW1%22%20x1%3D%2236.829%22%20x2%3D%2225.891%22%20y1%3D%2216.215%22%20y2%3D%2212.177%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fecbe6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fdafd9%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGjVYJh7DK1)%22%20d%3D%22M32.504%2016.444L30.4%2015.167l-8.55%2014.092l2.103%201.277z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGE6HLmcIk1)%22%20d%3D%22M11.808%2039.76L18.485%2043l5.09-3.24l7.335%202.672l3.813-3.482L37%2040.522l1-.554c-.074-4.16-2.61-8.19-7.09-10.387c-6.72-3.306-15.286-1.258-19.102%204.564c-1.33%202.026-1.896%204.223-1.797%206.377z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGtawGvbGB1)%22%20d%3D%22M35.83%2035.728c-.667%200-1.23.45-1.433%201.096c-.767%202.468-2.643%203.662-4.497%203.684c-1.856.021-3.728-1.13-4.492-3.45c-.205-.62-.768-1.067-1.433-1.067c-.67%200-1.205.453-1.408%201.066v.002c-.752%202.32-2.618%203.477-4.474%203.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%201.185L10.68%2037c-.41%201.789-1.175%202.727-2.03%203.265l-.003.001c-.89.57-2.08.803-3.404.83c-.85%200-1.493.734-1.493%201.565c0%20.836.672%201.566%201.495%201.566c1.621%200%203.417-.294%204.966-1.276a7%207%200%200%200%202.105-2.092c3.077%203.758%208.706%203.73%2011.684-.096c3.037%203.88%208.82%203.8%2011.83-.175c1.68%202.235%204.31%203.534%206.925%203.534c.851%200%201.495-.734%201.495-1.566c0-.836-.672-1.566-1.495-1.566c-2.356%200-4.7-1.613-5.49-4.166v-.001c-.204-.647-.767-1.096-1.434-1.096%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG6pOwlb1r1)%22%20d%3D%22M39.43%2026.105a1.75%201.75%200%200%200%202.315-.449l.505-.678c3.5-6.5%201.858-14.753-4.75-18.8s-15.276-2.314-19.295%204.268l-.285.463a1.75%201.75%200%200%200%20.577%202.412z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGwhU1AePW1)%22%20d%3D%22M37.417%206.226c-3.112.905-9.201%204.916-12.711%2010.99l8.772%205.346c3.789-5.904%204.562-13.155%203.94-16.336%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGjVYJh7DK1%22%20x1%3D%2224.002%22%20x2%3D%2235.289%22%20y1%3D%2226.754%22%20y2%3D%2215.653%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23cd3e1d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23592a00%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGE6HLmcIk1%22%20x1%3D%2224%22%20x2%3D%2224%22%20y1%3D%2238.799%22%20y2%3D%2228%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ffc7a3%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffa43d%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGtawGvbGB1%22%20x1%3D%2224.025%22%20x2%3D%2224.025%22%20y1%3D%2242.647%22%20y2%3D%2235.992%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.061%22%20stop-color%3D%22%230fafff%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230078d4%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG6pOwlb1r1%22%20x1%3D%2240.848%22%20x2%3D%2221.748%22%20y1%3D%2230.793%22%20y2%3D%223.548%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23aa1d2d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fb6f7b%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGwhU1AePW1%22%20x1%3D%2236.829%22%20x2%3D%2225.891%22%20y1%3D%2216.215%22%20y2%3D%2212.177%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23fecbe6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fdafd9%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/beach-48.svg?color=%231a73e8&size=48
