beach icon
beach-28 from Fluent UI System Color Icons by Microsoft Corporation · 28 · MIT Free for personal and commercial use.
- Name
- beach-28
- Set
- Fluent UI System Color Icons
- Style
- 28
- Viewbox
- 28×28
- 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 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>
React
import type { SVGProps } from "react";
export function FluentColorBeach28(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" 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 stopColor="#cd3e1d"/><stop offset="1" stopColor="#592a00"/></linearGradient><linearGradient id="SVG7Fr5DQBq" x1="13.75" x2="13.75" y1="22.667" y2="16" gradientUnits="userSpaceOnUse"><stop stopColor="#ffc7a3"/><stop offset="1" stopColor="#ffa43d"/></linearGradient><linearGradient id="SVGYFsNIb7P" x1="14.048" x2="14.048" y1="25.435" y2="21.708" gradientUnits="userSpaceOnUse"><stop offset=".061" stopColor="#0fafff"/><stop offset="1" stopColor="#0078d4"/></linearGradient><linearGradient id="SVG5jQtaciX" x1="24.455" x2="13.393" y1="16.709" y2="1.959" gradientUnits="userSpaceOnUse"><stop stopColor="#aa1d2d"/><stop offset="1" stopColor="#fb6f7b"/></linearGradient><linearGradient id="SVGj4BrKdlV" x1="22.279" x2="16.051" y1="8.847" y2="6.772" 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 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> </template>
CSS
.icon-beach-28 {
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%2028%2028%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGsu5HkcqT)%22%20d%3D%22m19.676%208.89l-1.305-.74l-4.958%208.738l1.305.74z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG7Fr5DQBq)%22%20d%3D%22M7.088%2022.374L10.5%2025.26l3-2l4.322%201.65L21%2022.76l1%20.628c-.044-2.567-1.538-5.056-4.178-6.412c-3.96-2.04-9.008-.777-11.257%202.818a6.8%206.8%200%200%200-1.059%203.936l1.582-1.369z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGYFsNIb7P)%22%20d%3D%22M21.033%2021.45a.99.99%200%200%200-.945.687v.001c-.87%202.649-4.262%202.612-5.126.128a1%201%200%200%200-.944-.668a.98.98%200%200%200-.928.668v.002c-.85%202.482-4.244%202.533-5.127-.102a.985.985%200%200%200-.98-.672c-.452.003-.814.347-.927.742l-.002.01c-.237.974-.672%201.474-1.152%201.76H4.9c-.505.306-1.19.436-1.966.45a.99.99%200%200%200-.984.987c0%20.536.45.987.987.987c.968%200%202.05-.166%202.987-.728a4.1%204.1%200%200%200%201.205-1.1c1.85%202.028%205.11%202.012%206.905-.059c1.83%202.102%205.183%202.058%206.998-.095a5.4%205.4%200%200%200%204.098%201.923a.99.99%200%200%200%20.987-.987a1%201%200%200%200-.987-.986c-1.358%200-2.701-.881-3.152-2.26v-.001a.99.99%200%200%200-.945-.687%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG5jQtaciX)%22%20d%3D%22M23.471%2014.152a1%201%200%200%200%201.361-.372l.14-.242c2.108-3.717.884-8.393-2.847-10.517c-3.732-2.124-8.481-.826-10.59%202.89l-.26.454a.75.75%200%200%200%20.28%201.025z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGj4BrKdlV)%22%20d%3D%22M22.43%203.215c-1.735.565-5.09%202.932-6.955%206.414l5.033%202.85c2.025-3.39%202.33-7.485%201.922-9.264%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGsu5HkcqT%22%20x1%3D%2214.68%22%20x2%3D%2221.358%22%20y1%3D%2215.324%22%20y2%3D%228.359%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%22SVG7Fr5DQBq%22%20x1%3D%2213.75%22%20x2%3D%2213.75%22%20y1%3D%2222.667%22%20y2%3D%2216%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%22SVGYFsNIb7P%22%20x1%3D%2214.048%22%20x2%3D%2214.048%22%20y1%3D%2225.435%22%20y2%3D%2221.708%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%22SVG5jQtaciX%22%20x1%3D%2224.455%22%20x2%3D%2213.393%22%20y1%3D%2216.709%22%20y2%3D%221.959%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%22SVGj4BrKdlV%22%20x1%3D%2222.279%22%20x2%3D%2216.051%22%20y1%3D%228.847%22%20y2%3D%226.772%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%2028%2028%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGsu5HkcqT)%22%20d%3D%22m19.676%208.89l-1.305-.74l-4.958%208.738l1.305.74z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG7Fr5DQBq)%22%20d%3D%22M7.088%2022.374L10.5%2025.26l3-2l4.322%201.65L21%2022.76l1%20.628c-.044-2.567-1.538-5.056-4.178-6.412c-3.96-2.04-9.008-.777-11.257%202.818a6.8%206.8%200%200%200-1.059%203.936l1.582-1.369z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGYFsNIb7P)%22%20d%3D%22M21.033%2021.45a.99.99%200%200%200-.945.687v.001c-.87%202.649-4.262%202.612-5.126.128a1%201%200%200%200-.944-.668a.98.98%200%200%200-.928.668v.002c-.85%202.482-4.244%202.533-5.127-.102a.985.985%200%200%200-.98-.672c-.452.003-.814.347-.927.742l-.002.01c-.237.974-.672%201.474-1.152%201.76H4.9c-.505.306-1.19.436-1.966.45a.99.99%200%200%200-.984.987c0%20.536.45.987.987.987c.968%200%202.05-.166%202.987-.728a4.1%204.1%200%200%200%201.205-1.1c1.85%202.028%205.11%202.012%206.905-.059c1.83%202.102%205.183%202.058%206.998-.095a5.4%205.4%200%200%200%204.098%201.923a.99.99%200%200%200%20.987-.987a1%201%200%200%200-.987-.986c-1.358%200-2.701-.881-3.152-2.26v-.001a.99.99%200%200%200-.945-.687%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG5jQtaciX)%22%20d%3D%22M23.471%2014.152a1%201%200%200%200%201.361-.372l.14-.242c2.108-3.717.884-8.393-2.847-10.517c-3.732-2.124-8.481-.826-10.59%202.89l-.26.454a.75.75%200%200%200%20.28%201.025z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGj4BrKdlV)%22%20d%3D%22M22.43%203.215c-1.735.565-5.09%202.932-6.955%206.414l5.033%202.85c2.025-3.39%202.33-7.485%201.922-9.264%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGsu5HkcqT%22%20x1%3D%2214.68%22%20x2%3D%2221.358%22%20y1%3D%2215.324%22%20y2%3D%228.359%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%22SVG7Fr5DQBq%22%20x1%3D%2213.75%22%20x2%3D%2213.75%22%20y1%3D%2222.667%22%20y2%3D%2216%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%22SVGYFsNIb7P%22%20x1%3D%2214.048%22%20x2%3D%2214.048%22%20y1%3D%2225.435%22%20y2%3D%2221.708%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%22SVG5jQtaciX%22%20x1%3D%2224.455%22%20x2%3D%2213.393%22%20y1%3D%2216.709%22%20y2%3D%221.959%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%22SVGj4BrKdlV%22%20x1%3D%2222.279%22%20x2%3D%2216.051%22%20y1%3D%228.847%22%20y2%3D%226.772%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-28.svg?color=%231a73e8&size=48
