water icon

water-16-filled from Fluent UI System Icons by Microsoft Corporation · 16 Filled · MIT Free for personal and commercial use.

Name
water-16-filled
Set
Fluent UI System Icons
Style
16 Filled
Viewbox
16×16
License
MIT

9 other variants in Fluent UI System Icons

water-16-regularwater-20-filledwater-20-regularwater-24-filledwater-24-regularwater-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 16 16"><path fill="currentColor" d="M12 2a.75.75 0 0 1 .696.471c.148.369.375.636.598.808c.242.185.422.219.456.219a.75.75 0 0 1 0 1.5c-.466 0-.96-.216-1.37-.53q-.196-.15-.38-.344a2.76 2.76 0 0 1-2 .874a2.76 2.76 0 0 1-2-.873a2.76 2.76 0 0 1-2 .873a2.76 2.76 0 0 1-2-.873q-.184.194-.38.345c-.409.314-.903.53-1.37.53a.75.75 0 0 1 0-1.5c.033 0 .214-.034.455-.22c.224-.171.451-.44.599-.808a.75.75 0 0 1 1.392 0c.298.742.84 1.026 1.304 1.026s1.007-.284 1.304-1.027a.75.75 0 0 1 1.392 0c.297.743.84 1.027 1.304 1.027s1.007-.285 1.304-1.027A.75.75 0 0 1 12 2m0 4a.75.75 0 0 1 .696.471c.148.369.375.636.598.808c.242.185.422.219.456.219a.75.75 0 0 1 0 1.5c-.466 0-.96-.216-1.37-.53q-.196-.15-.38-.344a2.76 2.76 0 0 1-2 .874a2.76 2.76 0 0 1-2-.873a2.76 2.76 0 0 1-2 .873a2.76 2.76 0 0 1-2-.873q-.184.194-.38.345c-.409.314-.903.53-1.37.53a.75.75 0 0 1 0-1.5c.033 0 .214-.034.455-.22c.224-.171.451-.44.599-.808a.75.75 0 0 1 1.392 0c.298.742.84 1.026 1.304 1.026s1.007-.284 1.304-1.027a.75.75 0 0 1 1.392 0c.297.743.84 1.027 1.304 1.027s1.007-.285 1.304-1.027A.75.75 0 0 1 12 6m.696 4.471a.75.75 0 0 0-1.392 0c-.297.742-.84 1.027-1.304 1.027s-1.007-.284-1.304-1.027a.75.75 0 0 0-1.392 0c-.298.742-.84 1.027-1.304 1.027s-1.006-.284-1.304-1.027a.75.75 0 0 0-1.392 0c-.148.37-.375.637-.599.81c-.241.185-.422.219-.455.219a.75.75 0 1 0 0 1.5c.467 0 .961-.216 1.37-.53q.196-.15.38-.345a2.76 2.76 0 0 0 2 .873a2.76 2.76 0 0 0 2-.873a2.76 2.76 0 0 0 2 .873a2.76 2.76 0 0 0 2-.874q.184.194.38.344c.41.314.904.53 1.37.53a.75.75 0 0 0 0-1.5c-.034 0-.214-.034-.456-.22a1.9 1.9 0 0 1-.598-.807"/></svg>

React

import type { SVGProps } from "react";

export function FluentWater16Filled(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M12 2a.75.75 0 0 1 .696.471c.148.369.375.636.598.808c.242.185.422.219.456.219a.75.75 0 0 1 0 1.5c-.466 0-.96-.216-1.37-.53q-.196-.15-.38-.344a2.76 2.76 0 0 1-2 .874a2.76 2.76 0 0 1-2-.873a2.76 2.76 0 0 1-2 .873a2.76 2.76 0 0 1-2-.873q-.184.194-.38.345c-.409.314-.903.53-1.37.53a.75.75 0 0 1 0-1.5c.033 0 .214-.034.455-.22c.224-.171.451-.44.599-.808a.75.75 0 0 1 1.392 0c.298.742.84 1.026 1.304 1.026s1.007-.284 1.304-1.027a.75.75 0 0 1 1.392 0c.297.743.84 1.027 1.304 1.027s1.007-.285 1.304-1.027A.75.75 0 0 1 12 2m0 4a.75.75 0 0 1 .696.471c.148.369.375.636.598.808c.242.185.422.219.456.219a.75.75 0 0 1 0 1.5c-.466 0-.96-.216-1.37-.53q-.196-.15-.38-.344a2.76 2.76 0 0 1-2 .874a2.76 2.76 0 0 1-2-.873a2.76 2.76 0 0 1-2 .873a2.76 2.76 0 0 1-2-.873q-.184.194-.38.345c-.409.314-.903.53-1.37.53a.75.75 0 0 1 0-1.5c.033 0 .214-.034.455-.22c.224-.171.451-.44.599-.808a.75.75 0 0 1 1.392 0c.298.742.84 1.026 1.304 1.026s1.007-.284 1.304-1.027a.75.75 0 0 1 1.392 0c.297.743.84 1.027 1.304 1.027s1.007-.285 1.304-1.027A.75.75 0 0 1 12 6m.696 4.471a.75.75 0 0 0-1.392 0c-.297.742-.84 1.027-1.304 1.027s-1.007-.284-1.304-1.027a.75.75 0 0 0-1.392 0c-.298.742-.84 1.027-1.304 1.027s-1.006-.284-1.304-1.027a.75.75 0 0 0-1.392 0c-.148.37-.375.637-.599.81c-.241.185-.422.219-.455.219a.75.75 0 1 0 0 1.5c.467 0 .961-.216 1.37-.53q.196-.15.38-.345a2.76 2.76 0 0 0 2 .873a2.76 2.76 0 0 0 2-.873a2.76 2.76 0 0 0 2 .873a2.76 2.76 0 0 0 2-.874q.184.194.38.344c.41.314.904.53 1.37.53a.75.75 0 0 0 0-1.5c-.034 0-.214-.034-.456-.22a1.9 1.9 0 0 1-.598-.807"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M12 2a.75.75 0 0 1 .696.471c.148.369.375.636.598.808c.242.185.422.219.456.219a.75.75 0 0 1 0 1.5c-.466 0-.96-.216-1.37-.53q-.196-.15-.38-.344a2.76 2.76 0 0 1-2 .874a2.76 2.76 0 0 1-2-.873a2.76 2.76 0 0 1-2 .873a2.76 2.76 0 0 1-2-.873q-.184.194-.38.345c-.409.314-.903.53-1.37.53a.75.75 0 0 1 0-1.5c.033 0 .214-.034.455-.22c.224-.171.451-.44.599-.808a.75.75 0 0 1 1.392 0c.298.742.84 1.026 1.304 1.026s1.007-.284 1.304-1.027a.75.75 0 0 1 1.392 0c.297.743.84 1.027 1.304 1.027s1.007-.285 1.304-1.027A.75.75 0 0 1 12 2m0 4a.75.75 0 0 1 .696.471c.148.369.375.636.598.808c.242.185.422.219.456.219a.75.75 0 0 1 0 1.5c-.466 0-.96-.216-1.37-.53q-.196-.15-.38-.344a2.76 2.76 0 0 1-2 .874a2.76 2.76 0 0 1-2-.873a2.76 2.76 0 0 1-2 .873a2.76 2.76 0 0 1-2-.873q-.184.194-.38.345c-.409.314-.903.53-1.37.53a.75.75 0 0 1 0-1.5c.033 0 .214-.034.455-.22c.224-.171.451-.44.599-.808a.75.75 0 0 1 1.392 0c.298.742.84 1.026 1.304 1.026s1.007-.284 1.304-1.027a.75.75 0 0 1 1.392 0c.297.743.84 1.027 1.304 1.027s1.007-.285 1.304-1.027A.75.75 0 0 1 12 6m.696 4.471a.75.75 0 0 0-1.392 0c-.297.742-.84 1.027-1.304 1.027s-1.007-.284-1.304-1.027a.75.75 0 0 0-1.392 0c-.298.742-.84 1.027-1.304 1.027s-1.006-.284-1.304-1.027a.75.75 0 0 0-1.392 0c-.148.37-.375.637-.599.81c-.241.185-.422.219-.455.219a.75.75 0 1 0 0 1.5c.467 0 .961-.216 1.37-.53q.196-.15.38-.345a2.76 2.76 0 0 0 2 .873a2.76 2.76 0 0 0 2-.873a2.76 2.76 0 0 0 2 .873a2.76 2.76 0 0 0 2-.874q.184.194.38.344c.41.314.904.53 1.37.53a.75.75 0 0 0 0-1.5c-.034 0-.214-.034-.456-.22a1.9 1.9 0 0 1-.598-.807"/></svg>
</template>

CSS

.icon-water-16-filled {
  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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%202a.75.75%200%200%201%20.696.471c.148.369.375.636.598.808c.242.185.422.219.456.219a.75.75%200%200%201%200%201.5c-.466%200-.96-.216-1.37-.53q-.196-.15-.38-.344a2.76%202.76%200%200%201-2%20.874a2.76%202.76%200%200%201-2-.873a2.76%202.76%200%200%201-2%20.873a2.76%202.76%200%200%201-2-.873q-.184.194-.38.345c-.409.314-.903.53-1.37.53a.75.75%200%200%201%200-1.5c.033%200%20.214-.034.455-.22c.224-.171.451-.44.599-.808a.75.75%200%200%201%201.392%200c.298.742.84%201.026%201.304%201.026s1.007-.284%201.304-1.027a.75.75%200%200%201%201.392%200c.297.743.84%201.027%201.304%201.027s1.007-.285%201.304-1.027A.75.75%200%200%201%2012%202m0%204a.75.75%200%200%201%20.696.471c.148.369.375.636.598.808c.242.185.422.219.456.219a.75.75%200%200%201%200%201.5c-.466%200-.96-.216-1.37-.53q-.196-.15-.38-.344a2.76%202.76%200%200%201-2%20.874a2.76%202.76%200%200%201-2-.873a2.76%202.76%200%200%201-2%20.873a2.76%202.76%200%200%201-2-.873q-.184.194-.38.345c-.409.314-.903.53-1.37.53a.75.75%200%200%201%200-1.5c.033%200%20.214-.034.455-.22c.224-.171.451-.44.599-.808a.75.75%200%200%201%201.392%200c.298.742.84%201.026%201.304%201.026s1.007-.284%201.304-1.027a.75.75%200%200%201%201.392%200c.297.743.84%201.027%201.304%201.027s1.007-.285%201.304-1.027A.75.75%200%200%201%2012%206m.696%204.471a.75.75%200%200%200-1.392%200c-.297.742-.84%201.027-1.304%201.027s-1.007-.284-1.304-1.027a.75.75%200%200%200-1.392%200c-.298.742-.84%201.027-1.304%201.027s-1.006-.284-1.304-1.027a.75.75%200%200%200-1.392%200c-.148.37-.375.637-.599.81c-.241.185-.422.219-.455.219a.75.75%200%201%200%200%201.5c.467%200%20.961-.216%201.37-.53q.196-.15.38-.345a2.76%202.76%200%200%200%202%20.873a2.76%202.76%200%200%200%202-.873a2.76%202.76%200%200%200%202%20.873a2.76%202.76%200%200%200%202-.874q.184.194.38.344c.41.314.904.53%201.37.53a.75.75%200%200%200%200-1.5c-.034%200-.214-.034-.456-.22a1.9%201.9%200%200%201-.598-.807%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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%202a.75.75%200%200%201%20.696.471c.148.369.375.636.598.808c.242.185.422.219.456.219a.75.75%200%200%201%200%201.5c-.466%200-.96-.216-1.37-.53q-.196-.15-.38-.344a2.76%202.76%200%200%201-2%20.874a2.76%202.76%200%200%201-2-.873a2.76%202.76%200%200%201-2%20.873a2.76%202.76%200%200%201-2-.873q-.184.194-.38.345c-.409.314-.903.53-1.37.53a.75.75%200%200%201%200-1.5c.033%200%20.214-.034.455-.22c.224-.171.451-.44.599-.808a.75.75%200%200%201%201.392%200c.298.742.84%201.026%201.304%201.026s1.007-.284%201.304-1.027a.75.75%200%200%201%201.392%200c.297.743.84%201.027%201.304%201.027s1.007-.285%201.304-1.027A.75.75%200%200%201%2012%202m0%204a.75.75%200%200%201%20.696.471c.148.369.375.636.598.808c.242.185.422.219.456.219a.75.75%200%200%201%200%201.5c-.466%200-.96-.216-1.37-.53q-.196-.15-.38-.344a2.76%202.76%200%200%201-2%20.874a2.76%202.76%200%200%201-2-.873a2.76%202.76%200%200%201-2%20.873a2.76%202.76%200%200%201-2-.873q-.184.194-.38.345c-.409.314-.903.53-1.37.53a.75.75%200%200%201%200-1.5c.033%200%20.214-.034.455-.22c.224-.171.451-.44.599-.808a.75.75%200%200%201%201.392%200c.298.742.84%201.026%201.304%201.026s1.007-.284%201.304-1.027a.75.75%200%200%201%201.392%200c.297.743.84%201.027%201.304%201.027s1.007-.285%201.304-1.027A.75.75%200%200%201%2012%206m.696%204.471a.75.75%200%200%200-1.392%200c-.297.742-.84%201.027-1.304%201.027s-1.007-.284-1.304-1.027a.75.75%200%200%200-1.392%200c-.298.742-.84%201.027-1.304%201.027s-1.006-.284-1.304-1.027a.75.75%200%200%200-1.392%200c-.148.37-.375.637-.599.81c-.241.185-.422.219-.455.219a.75.75%200%201%200%200%201.5c.467%200%20.961-.216%201.37-.53q.196-.15.38-.345a2.76%202.76%200%200%200%202%20.873a2.76%202.76%200%200%200%202-.873a2.76%202.76%200%200%200%202%20.873a2.76%202.76%200%200%200%202-.874q.184.194.38.344c.41.314.904.53%201.37.53a.75.75%200%200%200%200-1.5c-.034%200-.214-.034-.456-.22a1.9%201.9%200%200%201-.598-.807%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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