water icon

water-24-regular from Fluent UI System Icons by Microsoft Corporation · 24 Regular · MIT Free for personal and commercial use.

Name
water-24-regular
Set
Fluent UI System Icons
Style
24 Regular
Viewbox
24×24
License
MIT

9 other variants in Fluent UI System Icons

water-16-filledwater-16-regularwater-20-filledwater-20-regularwater-24-filledwater-32-filledwater-32-regularwater-48-filledwater-48-regular

The same icon in other sets

waterAkar IconswaterBootstrap IconswaterBoxIcons v2waterFont Awesome 6 SolidwaterFont Awesome SolidwaterIconParkwaterIconPark OutlinewaterIconPark SolidwaterIconPark TwoTonewaterIonIconswaterLine AwesomewaterMaterial Line IconswaterMaterial SymbolswaterMaterial Symbols LightwaterMaterial Design Iconswater-boldSolarwaterUnicons

Use the water icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18.38 4c.31 0 .588.192.7.482c.56 1.462 1.609 2.015 2.17 2.015a.75.75 0 0 1 0 1.5c-1.002 0-2.087-.611-2.873-1.687c-.814 1.093-1.971 1.687-3.187 1.687c-1.217 0-2.376-.595-3.19-1.69c-.814 1.095-1.973 1.69-3.19 1.69c-1.215 0-2.373-.593-3.186-1.686C4.838 7.388 3.753 8 2.75 8a.75.75 0 1 1 0-1.5c.56 0 1.61-.553 2.17-2.018a.75.75 0 0 1 1.401 0c.544 1.419 1.57 2.015 2.49 2.015S10.755 5.9 11.3 4.482a.75.75 0 0 1 1.4 0c.544 1.419 1.57 2.015 2.49 2.015s1.945-.597 2.489-2.015a.75.75 0 0 1 .7-.482m0 6a.75.75 0 0 1 .7.482c.56 1.462 1.609 2.015 2.17 2.015a.75.75 0 0 1 0 1.5c-1.002 0-2.087-.611-2.873-1.687c-.814 1.093-1.971 1.687-3.187 1.687c-1.217 0-2.376-.594-3.19-1.69c-.814 1.095-1.973 1.69-3.19 1.69c-1.215 0-2.373-.593-3.186-1.685C4.838 13.388 3.753 14 2.75 14a.75.75 0 0 1 0-1.5c.56 0 1.61-.553 2.17-2.018a.75.75 0 0 1 1.401 0c.544 1.419 1.57 2.015 2.49 2.015s1.945-.596 2.489-2.015a.75.75 0 0 1 1.4 0c.544 1.419 1.57 2.015 2.49 2.015s1.945-.597 2.489-2.015a.75.75 0 0 1 .7-.482m.7 6.482a.75.75 0 0 0-1.401 0c-.544 1.418-1.57 2.015-2.49 2.015s-1.945-.596-2.489-2.015a.75.75 0 0 0-1.4 0c-.544 1.419-1.57 2.015-2.49 2.015s-1.945-.596-2.489-2.015a.75.75 0 0 0-1.4 0C4.358 17.947 3.31 18.5 2.75 18.5a.75.75 0 1 0 0 1.5c1.003 0 2.088-.612 2.874-1.689c.813 1.093 1.97 1.686 3.186 1.686c1.217 0 2.376-.594 3.19-1.69c.814 1.096 1.973 1.69 3.19 1.69s2.373-.594 3.187-1.687c.786 1.076 1.87 1.687 2.873 1.687a.75.75 0 0 0 0-1.5c-.561 0-1.61-.553-2.17-2.015"/></svg>

React

import type { SVGProps } from "react";

export function FluentWater24Regular(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18.38 4c.31 0 .588.192.7.482c.56 1.462 1.609 2.015 2.17 2.015a.75.75 0 0 1 0 1.5c-1.002 0-2.087-.611-2.873-1.687c-.814 1.093-1.971 1.687-3.187 1.687c-1.217 0-2.376-.595-3.19-1.69c-.814 1.095-1.973 1.69-3.19 1.69c-1.215 0-2.373-.593-3.186-1.686C4.838 7.388 3.753 8 2.75 8a.75.75 0 1 1 0-1.5c.56 0 1.61-.553 2.17-2.018a.75.75 0 0 1 1.401 0c.544 1.419 1.57 2.015 2.49 2.015S10.755 5.9 11.3 4.482a.75.75 0 0 1 1.4 0c.544 1.419 1.57 2.015 2.49 2.015s1.945-.597 2.489-2.015a.75.75 0 0 1 .7-.482m0 6a.75.75 0 0 1 .7.482c.56 1.462 1.609 2.015 2.17 2.015a.75.75 0 0 1 0 1.5c-1.002 0-2.087-.611-2.873-1.687c-.814 1.093-1.971 1.687-3.187 1.687c-1.217 0-2.376-.594-3.19-1.69c-.814 1.095-1.973 1.69-3.19 1.69c-1.215 0-2.373-.593-3.186-1.685C4.838 13.388 3.753 14 2.75 14a.75.75 0 0 1 0-1.5c.56 0 1.61-.553 2.17-2.018a.75.75 0 0 1 1.401 0c.544 1.419 1.57 2.015 2.49 2.015s1.945-.596 2.489-2.015a.75.75 0 0 1 1.4 0c.544 1.419 1.57 2.015 2.49 2.015s1.945-.597 2.489-2.015a.75.75 0 0 1 .7-.482m.7 6.482a.75.75 0 0 0-1.401 0c-.544 1.418-1.57 2.015-2.49 2.015s-1.945-.596-2.489-2.015a.75.75 0 0 0-1.4 0c-.544 1.419-1.57 2.015-2.49 2.015s-1.945-.596-2.489-2.015a.75.75 0 0 0-1.4 0C4.358 17.947 3.31 18.5 2.75 18.5a.75.75 0 1 0 0 1.5c1.003 0 2.088-.612 2.874-1.689c.813 1.093 1.97 1.686 3.186 1.686c1.217 0 2.376-.594 3.19-1.69c.814 1.096 1.973 1.69 3.19 1.69s2.373-.594 3.187-1.687c.786 1.076 1.87 1.687 2.873 1.687a.75.75 0 0 0 0-1.5c-.561 0-1.61-.553-2.17-2.015"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M18.38 4c.31 0 .588.192.7.482c.56 1.462 1.609 2.015 2.17 2.015a.75.75 0 0 1 0 1.5c-1.002 0-2.087-.611-2.873-1.687c-.814 1.093-1.971 1.687-3.187 1.687c-1.217 0-2.376-.595-3.19-1.69c-.814 1.095-1.973 1.69-3.19 1.69c-1.215 0-2.373-.593-3.186-1.686C4.838 7.388 3.753 8 2.75 8a.75.75 0 1 1 0-1.5c.56 0 1.61-.553 2.17-2.018a.75.75 0 0 1 1.401 0c.544 1.419 1.57 2.015 2.49 2.015S10.755 5.9 11.3 4.482a.75.75 0 0 1 1.4 0c.544 1.419 1.57 2.015 2.49 2.015s1.945-.597 2.489-2.015a.75.75 0 0 1 .7-.482m0 6a.75.75 0 0 1 .7.482c.56 1.462 1.609 2.015 2.17 2.015a.75.75 0 0 1 0 1.5c-1.002 0-2.087-.611-2.873-1.687c-.814 1.093-1.971 1.687-3.187 1.687c-1.217 0-2.376-.594-3.19-1.69c-.814 1.095-1.973 1.69-3.19 1.69c-1.215 0-2.373-.593-3.186-1.685C4.838 13.388 3.753 14 2.75 14a.75.75 0 0 1 0-1.5c.56 0 1.61-.553 2.17-2.018a.75.75 0 0 1 1.401 0c.544 1.419 1.57 2.015 2.49 2.015s1.945-.596 2.489-2.015a.75.75 0 0 1 1.4 0c.544 1.419 1.57 2.015 2.49 2.015s1.945-.597 2.489-2.015a.75.75 0 0 1 .7-.482m.7 6.482a.75.75 0 0 0-1.401 0c-.544 1.418-1.57 2.015-2.49 2.015s-1.945-.596-2.489-2.015a.75.75 0 0 0-1.4 0c-.544 1.419-1.57 2.015-2.49 2.015s-1.945-.596-2.489-2.015a.75.75 0 0 0-1.4 0C4.358 17.947 3.31 18.5 2.75 18.5a.75.75 0 1 0 0 1.5c1.003 0 2.088-.612 2.874-1.689c.813 1.093 1.97 1.686 3.186 1.686c1.217 0 2.376-.594 3.19-1.69c.814 1.096 1.973 1.69 3.19 1.69s2.373-.594 3.187-1.687c.786 1.076 1.87 1.687 2.873 1.687a.75.75 0 0 0 0-1.5c-.561 0-1.61-.553-2.17-2.015"/></svg>
</template>

CSS

.icon-water-24-regular {
  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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M18.38%204c.31%200%20.588.192.7.482c.56%201.462%201.609%202.015%202.17%202.015a.75.75%200%200%201%200%201.5c-1.002%200-2.087-.611-2.873-1.687c-.814%201.093-1.971%201.687-3.187%201.687c-1.217%200-2.376-.595-3.19-1.69c-.814%201.095-1.973%201.69-3.19%201.69c-1.215%200-2.373-.593-3.186-1.686C4.838%207.388%203.753%208%202.75%208a.75.75%200%201%201%200-1.5c.56%200%201.61-.553%202.17-2.018a.75.75%200%200%201%201.401%200c.544%201.419%201.57%202.015%202.49%202.015S10.755%205.9%2011.3%204.482a.75.75%200%200%201%201.4%200c.544%201.419%201.57%202.015%202.49%202.015s1.945-.597%202.489-2.015a.75.75%200%200%201%20.7-.482m0%206a.75.75%200%200%201%20.7.482c.56%201.462%201.609%202.015%202.17%202.015a.75.75%200%200%201%200%201.5c-1.002%200-2.087-.611-2.873-1.687c-.814%201.093-1.971%201.687-3.187%201.687c-1.217%200-2.376-.594-3.19-1.69c-.814%201.095-1.973%201.69-3.19%201.69c-1.215%200-2.373-.593-3.186-1.685C4.838%2013.388%203.753%2014%202.75%2014a.75.75%200%200%201%200-1.5c.56%200%201.61-.553%202.17-2.018a.75.75%200%200%201%201.401%200c.544%201.419%201.57%202.015%202.49%202.015s1.945-.596%202.489-2.015a.75.75%200%200%201%201.4%200c.544%201.419%201.57%202.015%202.49%202.015s1.945-.597%202.489-2.015a.75.75%200%200%201%20.7-.482m.7%206.482a.75.75%200%200%200-1.401%200c-.544%201.418-1.57%202.015-2.49%202.015s-1.945-.596-2.489-2.015a.75.75%200%200%200-1.4%200c-.544%201.419-1.57%202.015-2.49%202.015s-1.945-.596-2.489-2.015a.75.75%200%200%200-1.4%200C4.358%2017.947%203.31%2018.5%202.75%2018.5a.75.75%200%201%200%200%201.5c1.003%200%202.088-.612%202.874-1.689c.813%201.093%201.97%201.686%203.186%201.686c1.217%200%202.376-.594%203.19-1.69c.814%201.096%201.973%201.69%203.19%201.69s2.373-.594%203.187-1.687c.786%201.076%201.87%201.687%202.873%201.687a.75.75%200%200%200%200-1.5c-.561%200-1.61-.553-2.17-2.015%22%2F%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M18.38%204c.31%200%20.588.192.7.482c.56%201.462%201.609%202.015%202.17%202.015a.75.75%200%200%201%200%201.5c-1.002%200-2.087-.611-2.873-1.687c-.814%201.093-1.971%201.687-3.187%201.687c-1.217%200-2.376-.595-3.19-1.69c-.814%201.095-1.973%201.69-3.19%201.69c-1.215%200-2.373-.593-3.186-1.686C4.838%207.388%203.753%208%202.75%208a.75.75%200%201%201%200-1.5c.56%200%201.61-.553%202.17-2.018a.75.75%200%200%201%201.401%200c.544%201.419%201.57%202.015%202.49%202.015S10.755%205.9%2011.3%204.482a.75.75%200%200%201%201.4%200c.544%201.419%201.57%202.015%202.49%202.015s1.945-.597%202.489-2.015a.75.75%200%200%201%20.7-.482m0%206a.75.75%200%200%201%20.7.482c.56%201.462%201.609%202.015%202.17%202.015a.75.75%200%200%201%200%201.5c-1.002%200-2.087-.611-2.873-1.687c-.814%201.093-1.971%201.687-3.187%201.687c-1.217%200-2.376-.594-3.19-1.69c-.814%201.095-1.973%201.69-3.19%201.69c-1.215%200-2.373-.593-3.186-1.685C4.838%2013.388%203.753%2014%202.75%2014a.75.75%200%200%201%200-1.5c.56%200%201.61-.553%202.17-2.018a.75.75%200%200%201%201.401%200c.544%201.419%201.57%202.015%202.49%202.015s1.945-.596%202.489-2.015a.75.75%200%200%201%201.4%200c.544%201.419%201.57%202.015%202.49%202.015s1.945-.597%202.489-2.015a.75.75%200%200%201%20.7-.482m.7%206.482a.75.75%200%200%200-1.401%200c-.544%201.418-1.57%202.015-2.49%202.015s-1.945-.596-2.489-2.015a.75.75%200%200%200-1.4%200c-.544%201.419-1.57%202.015-2.49%202.015s-1.945-.596-2.489-2.015a.75.75%200%200%200-1.4%200C4.358%2017.947%203.31%2018.5%202.75%2018.5a.75.75%200%201%200%200%201.5c1.003%200%202.088-.612%202.874-1.689c.813%201.093%201.97%201.686%203.186%201.686c1.217%200%202.376-.594%203.19-1.69c.814%201.096%201.973%201.69%203.19%201.69s2.373-.594%203.187-1.687c.786%201.076%201.87%201.687%202.873%201.687a.75.75%200%200%200%200-1.5c-.561%200-1.61-.553-2.17-2.015%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/water-24-regular.svg?color=%231a73e8&size=48