beach icon
beach-32 from Fluent UI System Color Icons by Microsoft Corporation · 32 · MIT Free for personal and commercial use.
- Name
- beach-32
- Set
- Fluent UI System Color Icons
- Style
- 32
- Viewbox
- 32×32
- 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 32 32"><g fill="none"><path fill="url(#SVGUSywGbjV)" d="m22.268 10.178l-1.522-.864l-5.785 10.195l1.522.863z"/><path fill="url(#SVGDpcMicmY)" d="m7.876 25.215l3.243 3.51l4.875-1.975l4.569 1.335l3.755-2.434l1.182.712c-.051-2.907-1.817-5.723-4.937-7.258c-4.68-2.31-10.647-.88-13.304 3.189c-.926 1.416-1.32 2.95-1.251 4.456l1.868-1.55z"/><path fill="url(#SVGeDl0rdOK)" d="M24.031 24.55a1.13 1.13 0 0 0-1.074.781v.002c-1.042 3.174-5.115 3.132-6.151.152a1.14 1.14 0 0 0-1.073-.76c-.498 0-.901.318-1.056.76v.001c-1.02 2.98-5.093 3.039-6.152-.12a1.12 1.12 0 0 0-1.114-.763c-.512.002-.925.392-1.055.843l-.002.01c-.283 1.164-.804 1.766-1.384 2.11l-.002.002c-.607.367-1.427.522-2.349.539A1.124 1.124 0 0 0 1.5 29.229c0 .608.513 1.121 1.122 1.121c1.14 0 2.411-.195 3.51-.855a4.85 4.85 0 0 0 1.445-1.334c2.177 2.434 6.064 2.415 8.173-.067c2.151 2.52 6.148 2.467 8.28-.114a6.35 6.35 0 0 0 4.848 2.3c.63 0 1.122-.515 1.122-1.121c0-.609-.513-1.122-1.122-1.122c-1.625 0-3.233-1.053-3.772-2.704v-.002a1.13 1.13 0 0 0-1.075-.78"/><path fill="url(#SVGPDGSFecW)" d="M27.125 16.509a1 1 0 0 0 1.361-.373l.258-.448c2.502-4.41 1.05-9.957-3.378-12.477c-4.427-2.52-10.061-.98-12.564 3.43l-.377.659a.75.75 0 0 0 .28 1.025z"/><path fill="url(#SVGchT7J0OX)" d="M25.251 3.15c-2.058.67-6.038 3.479-8.251 7.609l5.971 3.382c2.403-4.023 2.764-8.88 2.28-10.991"/><defs><linearGradient id="SVGUSywGbjV" x1="16.439" x2="24.23" y1="17.683" y2="9.558" gradientUnits="userSpaceOnUse"><stop stop-color="#cd3e1d"/><stop offset="1" stop-color="#592a00"/></linearGradient><linearGradient id="SVGDpcMicmY" x1="15.75" x2="15.75" y1="25.546" y2="18" gradientUnits="userSpaceOnUse"><stop stop-color="#ffc7a3"/><stop offset="1" stop-color="#ffa43d"/></linearGradient><linearGradient id="SVGeDl0rdOK" x1="15.768" x2="15.768" y1="29.219" y2="24.81" gradientUnits="userSpaceOnUse"><stop offset=".061" stop-color="#0fafff"/><stop offset="1" stop-color="#0078d4"/></linearGradient><linearGradient id="SVGPDGSFecW" x1="28.131" x2="15.007" y1="19.45" y2="1.951" gradientUnits="userSpaceOnUse"><stop stop-color="#aa1d2d"/><stop offset="1" stop-color="#fb6f7b"/></linearGradient><linearGradient id="SVGchT7J0OX" x1="25.073" x2="17.683" y1="9.832" y2="7.37" gradientUnits="userSpaceOnUse"><stop stop-color="#fecbe6"/><stop offset="1" stop-color="#fdafd9"/></linearGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorBeach32(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><g fill="none"><path fill="url(#SVGUSywGbjV)" d="m22.268 10.178l-1.522-.864l-5.785 10.195l1.522.863z"/><path fill="url(#SVGDpcMicmY)" d="m7.876 25.215l3.243 3.51l4.875-1.975l4.569 1.335l3.755-2.434l1.182.712c-.051-2.907-1.817-5.723-4.937-7.258c-4.68-2.31-10.647-.88-13.304 3.189c-.926 1.416-1.32 2.95-1.251 4.456l1.868-1.55z"/><path fill="url(#SVGeDl0rdOK)" d="M24.031 24.55a1.13 1.13 0 0 0-1.074.781v.002c-1.042 3.174-5.115 3.132-6.151.152a1.14 1.14 0 0 0-1.073-.76c-.498 0-.901.318-1.056.76v.001c-1.02 2.98-5.093 3.039-6.152-.12a1.12 1.12 0 0 0-1.114-.763c-.512.002-.925.392-1.055.843l-.002.01c-.283 1.164-.804 1.766-1.384 2.11l-.002.002c-.607.367-1.427.522-2.349.539A1.124 1.124 0 0 0 1.5 29.229c0 .608.513 1.121 1.122 1.121c1.14 0 2.411-.195 3.51-.855a4.85 4.85 0 0 0 1.445-1.334c2.177 2.434 6.064 2.415 8.173-.067c2.151 2.52 6.148 2.467 8.28-.114a6.35 6.35 0 0 0 4.848 2.3c.63 0 1.122-.515 1.122-1.121c0-.609-.513-1.122-1.122-1.122c-1.625 0-3.233-1.053-3.772-2.704v-.002a1.13 1.13 0 0 0-1.075-.78"/><path fill="url(#SVGPDGSFecW)" d="M27.125 16.509a1 1 0 0 0 1.361-.373l.258-.448c2.502-4.41 1.05-9.957-3.378-12.477c-4.427-2.52-10.061-.98-12.564 3.43l-.377.659a.75.75 0 0 0 .28 1.025z"/><path fill="url(#SVGchT7J0OX)" d="M25.251 3.15c-2.058.67-6.038 3.479-8.251 7.609l5.971 3.382c2.403-4.023 2.764-8.88 2.28-10.991"/><defs><linearGradient id="SVGUSywGbjV" x1="16.439" x2="24.23" y1="17.683" y2="9.558" gradientUnits="userSpaceOnUse"><stop stopColor="#cd3e1d"/><stop offset="1" stopColor="#592a00"/></linearGradient><linearGradient id="SVGDpcMicmY" x1="15.75" x2="15.75" y1="25.546" y2="18" gradientUnits="userSpaceOnUse"><stop stopColor="#ffc7a3"/><stop offset="1" stopColor="#ffa43d"/></linearGradient><linearGradient id="SVGeDl0rdOK" x1="15.768" x2="15.768" y1="29.219" y2="24.81" gradientUnits="userSpaceOnUse"><stop offset=".061" stopColor="#0fafff"/><stop offset="1" stopColor="#0078d4"/></linearGradient><linearGradient id="SVGPDGSFecW" x1="28.131" x2="15.007" y1="19.45" y2="1.951" gradientUnits="userSpaceOnUse"><stop stopColor="#aa1d2d"/><stop offset="1" stopColor="#fb6f7b"/></linearGradient><linearGradient id="SVGchT7J0OX" x1="25.073" x2="17.683" y1="9.832" y2="7.37" 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 32 32"><g fill="none"><path fill="url(#SVGUSywGbjV)" d="m22.268 10.178l-1.522-.864l-5.785 10.195l1.522.863z"/><path fill="url(#SVGDpcMicmY)" d="m7.876 25.215l3.243 3.51l4.875-1.975l4.569 1.335l3.755-2.434l1.182.712c-.051-2.907-1.817-5.723-4.937-7.258c-4.68-2.31-10.647-.88-13.304 3.189c-.926 1.416-1.32 2.95-1.251 4.456l1.868-1.55z"/><path fill="url(#SVGeDl0rdOK)" d="M24.031 24.55a1.13 1.13 0 0 0-1.074.781v.002c-1.042 3.174-5.115 3.132-6.151.152a1.14 1.14 0 0 0-1.073-.76c-.498 0-.901.318-1.056.76v.001c-1.02 2.98-5.093 3.039-6.152-.12a1.12 1.12 0 0 0-1.114-.763c-.512.002-.925.392-1.055.843l-.002.01c-.283 1.164-.804 1.766-1.384 2.11l-.002.002c-.607.367-1.427.522-2.349.539A1.124 1.124 0 0 0 1.5 29.229c0 .608.513 1.121 1.122 1.121c1.14 0 2.411-.195 3.51-.855a4.85 4.85 0 0 0 1.445-1.334c2.177 2.434 6.064 2.415 8.173-.067c2.151 2.52 6.148 2.467 8.28-.114a6.35 6.35 0 0 0 4.848 2.3c.63 0 1.122-.515 1.122-1.121c0-.609-.513-1.122-1.122-1.122c-1.625 0-3.233-1.053-3.772-2.704v-.002a1.13 1.13 0 0 0-1.075-.78"/><path fill="url(#SVGPDGSFecW)" d="M27.125 16.509a1 1 0 0 0 1.361-.373l.258-.448c2.502-4.41 1.05-9.957-3.378-12.477c-4.427-2.52-10.061-.98-12.564 3.43l-.377.659a.75.75 0 0 0 .28 1.025z"/><path fill="url(#SVGchT7J0OX)" d="M25.251 3.15c-2.058.67-6.038 3.479-8.251 7.609l5.971 3.382c2.403-4.023 2.764-8.88 2.28-10.991"/><defs><linearGradient id="SVGUSywGbjV" x1="16.439" x2="24.23" y1="17.683" y2="9.558" gradientUnits="userSpaceOnUse"><stop stop-color="#cd3e1d"/><stop offset="1" stop-color="#592a00"/></linearGradient><linearGradient id="SVGDpcMicmY" x1="15.75" x2="15.75" y1="25.546" y2="18" gradientUnits="userSpaceOnUse"><stop stop-color="#ffc7a3"/><stop offset="1" stop-color="#ffa43d"/></linearGradient><linearGradient id="SVGeDl0rdOK" x1="15.768" x2="15.768" y1="29.219" y2="24.81" gradientUnits="userSpaceOnUse"><stop offset=".061" stop-color="#0fafff"/><stop offset="1" stop-color="#0078d4"/></linearGradient><linearGradient id="SVGPDGSFecW" x1="28.131" x2="15.007" y1="19.45" y2="1.951" gradientUnits="userSpaceOnUse"><stop stop-color="#aa1d2d"/><stop offset="1" stop-color="#fb6f7b"/></linearGradient><linearGradient id="SVGchT7J0OX" x1="25.073" x2="17.683" y1="9.832" y2="7.37" gradientUnits="userSpaceOnUse"><stop stop-color="#fecbe6"/><stop offset="1" stop-color="#fdafd9"/></linearGradient></defs></g></svg> </template>
CSS
.icon-beach-32 {
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%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGUSywGbjV)%22%20d%3D%22m22.268%2010.178l-1.522-.864l-5.785%2010.195l1.522.863z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGDpcMicmY)%22%20d%3D%22m7.876%2025.215l3.243%203.51l4.875-1.975l4.569%201.335l3.755-2.434l1.182.712c-.051-2.907-1.817-5.723-4.937-7.258c-4.68-2.31-10.647-.88-13.304%203.189c-.926%201.416-1.32%202.95-1.251%204.456l1.868-1.55z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGeDl0rdOK)%22%20d%3D%22M24.031%2024.55a1.13%201.13%200%200%200-1.074.781v.002c-1.042%203.174-5.115%203.132-6.151.152a1.14%201.14%200%200%200-1.073-.76c-.498%200-.901.318-1.056.76v.001c-1.02%202.98-5.093%203.039-6.152-.12a1.12%201.12%200%200%200-1.114-.763c-.512.002-.925.392-1.055.843l-.002.01c-.283%201.164-.804%201.766-1.384%202.11l-.002.002c-.607.367-1.427.522-2.349.539A1.124%201.124%200%200%200%201.5%2029.229c0%20.608.513%201.121%201.122%201.121c1.14%200%202.411-.195%203.51-.855a4.85%204.85%200%200%200%201.445-1.334c2.177%202.434%206.064%202.415%208.173-.067c2.151%202.52%206.148%202.467%208.28-.114a6.35%206.35%200%200%200%204.848%202.3c.63%200%201.122-.515%201.122-1.121c0-.609-.513-1.122-1.122-1.122c-1.625%200-3.233-1.053-3.772-2.704v-.002a1.13%201.13%200%200%200-1.075-.78%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGPDGSFecW)%22%20d%3D%22M27.125%2016.509a1%201%200%200%200%201.361-.373l.258-.448c2.502-4.41%201.05-9.957-3.378-12.477c-4.427-2.52-10.061-.98-12.564%203.43l-.377.659a.75.75%200%200%200%20.28%201.025z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGchT7J0OX)%22%20d%3D%22M25.251%203.15c-2.058.67-6.038%203.479-8.251%207.609l5.971%203.382c2.403-4.023%202.764-8.88%202.28-10.991%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGUSywGbjV%22%20x1%3D%2216.439%22%20x2%3D%2224.23%22%20y1%3D%2217.683%22%20y2%3D%229.558%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%22SVGDpcMicmY%22%20x1%3D%2215.75%22%20x2%3D%2215.75%22%20y1%3D%2225.546%22%20y2%3D%2218%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%22SVGeDl0rdOK%22%20x1%3D%2215.768%22%20x2%3D%2215.768%22%20y1%3D%2229.219%22%20y2%3D%2224.81%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%22SVGPDGSFecW%22%20x1%3D%2228.131%22%20x2%3D%2215.007%22%20y1%3D%2219.45%22%20y2%3D%221.951%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%22SVGchT7J0OX%22%20x1%3D%2225.073%22%20x2%3D%2217.683%22%20y1%3D%229.832%22%20y2%3D%227.37%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%2032%2032%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGUSywGbjV)%22%20d%3D%22m22.268%2010.178l-1.522-.864l-5.785%2010.195l1.522.863z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGDpcMicmY)%22%20d%3D%22m7.876%2025.215l3.243%203.51l4.875-1.975l4.569%201.335l3.755-2.434l1.182.712c-.051-2.907-1.817-5.723-4.937-7.258c-4.68-2.31-10.647-.88-13.304%203.189c-.926%201.416-1.32%202.95-1.251%204.456l1.868-1.55z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGeDl0rdOK)%22%20d%3D%22M24.031%2024.55a1.13%201.13%200%200%200-1.074.781v.002c-1.042%203.174-5.115%203.132-6.151.152a1.14%201.14%200%200%200-1.073-.76c-.498%200-.901.318-1.056.76v.001c-1.02%202.98-5.093%203.039-6.152-.12a1.12%201.12%200%200%200-1.114-.763c-.512.002-.925.392-1.055.843l-.002.01c-.283%201.164-.804%201.766-1.384%202.11l-.002.002c-.607.367-1.427.522-2.349.539A1.124%201.124%200%200%200%201.5%2029.229c0%20.608.513%201.121%201.122%201.121c1.14%200%202.411-.195%203.51-.855a4.85%204.85%200%200%200%201.445-1.334c2.177%202.434%206.064%202.415%208.173-.067c2.151%202.52%206.148%202.467%208.28-.114a6.35%206.35%200%200%200%204.848%202.3c.63%200%201.122-.515%201.122-1.121c0-.609-.513-1.122-1.122-1.122c-1.625%200-3.233-1.053-3.772-2.704v-.002a1.13%201.13%200%200%200-1.075-.78%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGPDGSFecW)%22%20d%3D%22M27.125%2016.509a1%201%200%200%200%201.361-.373l.258-.448c2.502-4.41%201.05-9.957-3.378-12.477c-4.427-2.52-10.061-.98-12.564%203.43l-.377.659a.75.75%200%200%200%20.28%201.025z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGchT7J0OX)%22%20d%3D%22M25.251%203.15c-2.058.67-6.038%203.479-8.251%207.609l5.971%203.382c2.403-4.023%202.764-8.88%202.28-10.991%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGUSywGbjV%22%20x1%3D%2216.439%22%20x2%3D%2224.23%22%20y1%3D%2217.683%22%20y2%3D%229.558%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%22SVGDpcMicmY%22%20x1%3D%2215.75%22%20x2%3D%2215.75%22%20y1%3D%2225.546%22%20y2%3D%2218%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%22SVGeDl0rdOK%22%20x1%3D%2215.768%22%20x2%3D%2215.768%22%20y1%3D%2229.219%22%20y2%3D%2224.81%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%22SVGPDGSFecW%22%20x1%3D%2228.131%22%20x2%3D%2215.007%22%20y1%3D%2219.45%22%20y2%3D%221.951%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%22SVGchT7J0OX%22%20x1%3D%2225.073%22%20x2%3D%2217.683%22%20y1%3D%229.832%22%20y2%3D%227.37%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-32.svg?color=%231a73e8&size=48
