water icon
water-20-regular from Fluent UI System Icons by Microsoft Corporation · 20 Regular · MIT Free for personal and commercial use.
- Name
- water-20-regular
- Set
- Fluent UI System Icons
- Style
- 20 Regular
- Viewbox
- 20×20
- License
- MIT
9 other variants in Fluent UI System Icons
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 20 20"><path fill="currentColor" d="M15 4a.5.5 0 0 1 .468.324C15.908 5.498 16.744 6 17.5 6a.5.5 0 0 1 0 1c-.962 0-1.876-.497-2.5-1.413C14.376 6.503 13.462 7 12.5 7s-1.876-.497-2.5-1.412C9.376 6.503 8.462 7 7.5 7C6.539 7 5.624 6.503 5 5.588c-.624.917-1.538 1.415-2.5 1.415a.5.5 0 1 1 0-1c.756 0 1.592-.503 2.032-1.678a.5.5 0 0 1 .936 0C5.908 5.498 6.744 6 7.5 6s1.592-.502 2.032-1.675a.5.5 0 0 1 .936 0C10.908 5.498 11.744 6 12.5 6s1.592-.502 2.032-1.676A.5.5 0 0 1 15 4m0 5a.5.5 0 0 1 .468.324C15.908 10.498 16.744 11 17.5 11a.5.5 0 0 1 0 1c-.962 0-1.876-.497-2.5-1.413c-.624.916-1.538 1.413-2.5 1.413s-1.876-.497-2.5-1.412C9.376 11.503 8.462 12 7.5 12c-.961 0-1.876-.497-2.5-1.412c-.624.917-1.538 1.415-2.5 1.415a.5.5 0 0 1 0-1c.756 0 1.592-.503 2.032-1.678a.5.5 0 0 1 .936 0C5.908 10.498 6.744 11 7.5 11s1.592-.502 2.032-1.675a.5.5 0 0 1 .936 0C10.908 10.498 11.744 11 12.5 11s1.592-.502 2.032-1.676A.5.5 0 0 1 15 9m.468 5.324a.5.5 0 0 0-.936 0C14.092 15.498 13.256 16 12.5 16s-1.592-.502-2.032-1.675a.5.5 0 0 0-.936 0C9.092 15.498 8.256 16 7.5 16s-1.592-.502-2.032-1.675a.5.5 0 0 0-.936 0c-.44 1.175-1.276 1.678-2.032 1.678a.5.5 0 1 0 0 1c.962 0 1.876-.498 2.5-1.415C5.624 16.503 6.54 17 7.5 17s1.876-.497 2.5-1.412c.624.915 1.538 1.412 2.5 1.412s1.876-.497 2.5-1.413c.624.916 1.538 1.413 2.5 1.413a.5.5 0 0 0 0-1c-.756 0-1.592-.502-2.032-1.676"/></svg>
React
import type { SVGProps } from "react";
export function FluentWater20Regular(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M15 4a.5.5 0 0 1 .468.324C15.908 5.498 16.744 6 17.5 6a.5.5 0 0 1 0 1c-.962 0-1.876-.497-2.5-1.413C14.376 6.503 13.462 7 12.5 7s-1.876-.497-2.5-1.412C9.376 6.503 8.462 7 7.5 7C6.539 7 5.624 6.503 5 5.588c-.624.917-1.538 1.415-2.5 1.415a.5.5 0 1 1 0-1c.756 0 1.592-.503 2.032-1.678a.5.5 0 0 1 .936 0C5.908 5.498 6.744 6 7.5 6s1.592-.502 2.032-1.675a.5.5 0 0 1 .936 0C10.908 5.498 11.744 6 12.5 6s1.592-.502 2.032-1.676A.5.5 0 0 1 15 4m0 5a.5.5 0 0 1 .468.324C15.908 10.498 16.744 11 17.5 11a.5.5 0 0 1 0 1c-.962 0-1.876-.497-2.5-1.413c-.624.916-1.538 1.413-2.5 1.413s-1.876-.497-2.5-1.412C9.376 11.503 8.462 12 7.5 12c-.961 0-1.876-.497-2.5-1.412c-.624.917-1.538 1.415-2.5 1.415a.5.5 0 0 1 0-1c.756 0 1.592-.503 2.032-1.678a.5.5 0 0 1 .936 0C5.908 10.498 6.744 11 7.5 11s1.592-.502 2.032-1.675a.5.5 0 0 1 .936 0C10.908 10.498 11.744 11 12.5 11s1.592-.502 2.032-1.676A.5.5 0 0 1 15 9m.468 5.324a.5.5 0 0 0-.936 0C14.092 15.498 13.256 16 12.5 16s-1.592-.502-2.032-1.675a.5.5 0 0 0-.936 0C9.092 15.498 8.256 16 7.5 16s-1.592-.502-2.032-1.675a.5.5 0 0 0-.936 0c-.44 1.175-1.276 1.678-2.032 1.678a.5.5 0 1 0 0 1c.962 0 1.876-.498 2.5-1.415C5.624 16.503 6.54 17 7.5 17s1.876-.497 2.5-1.412c.624.915 1.538 1.412 2.5 1.412s1.876-.497 2.5-1.413c.624.916 1.538 1.413 2.5 1.413a.5.5 0 0 0 0-1c-.756 0-1.592-.502-2.032-1.676"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M15 4a.5.5 0 0 1 .468.324C15.908 5.498 16.744 6 17.5 6a.5.5 0 0 1 0 1c-.962 0-1.876-.497-2.5-1.413C14.376 6.503 13.462 7 12.5 7s-1.876-.497-2.5-1.412C9.376 6.503 8.462 7 7.5 7C6.539 7 5.624 6.503 5 5.588c-.624.917-1.538 1.415-2.5 1.415a.5.5 0 1 1 0-1c.756 0 1.592-.503 2.032-1.678a.5.5 0 0 1 .936 0C5.908 5.498 6.744 6 7.5 6s1.592-.502 2.032-1.675a.5.5 0 0 1 .936 0C10.908 5.498 11.744 6 12.5 6s1.592-.502 2.032-1.676A.5.5 0 0 1 15 4m0 5a.5.5 0 0 1 .468.324C15.908 10.498 16.744 11 17.5 11a.5.5 0 0 1 0 1c-.962 0-1.876-.497-2.5-1.413c-.624.916-1.538 1.413-2.5 1.413s-1.876-.497-2.5-1.412C9.376 11.503 8.462 12 7.5 12c-.961 0-1.876-.497-2.5-1.412c-.624.917-1.538 1.415-2.5 1.415a.5.5 0 0 1 0-1c.756 0 1.592-.503 2.032-1.678a.5.5 0 0 1 .936 0C5.908 10.498 6.744 11 7.5 11s1.592-.502 2.032-1.675a.5.5 0 0 1 .936 0C10.908 10.498 11.744 11 12.5 11s1.592-.502 2.032-1.676A.5.5 0 0 1 15 9m.468 5.324a.5.5 0 0 0-.936 0C14.092 15.498 13.256 16 12.5 16s-1.592-.502-2.032-1.675a.5.5 0 0 0-.936 0C9.092 15.498 8.256 16 7.5 16s-1.592-.502-2.032-1.675a.5.5 0 0 0-.936 0c-.44 1.175-1.276 1.678-2.032 1.678a.5.5 0 1 0 0 1c.962 0 1.876-.498 2.5-1.415C5.624 16.503 6.54 17 7.5 17s1.876-.497 2.5-1.412c.624.915 1.538 1.412 2.5 1.412s1.876-.497 2.5-1.413c.624.916 1.538 1.413 2.5 1.413a.5.5 0 0 0 0-1c-.756 0-1.592-.502-2.032-1.676"/></svg> </template>
CSS
.icon-water-20-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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M15%204a.5.5%200%200%201%20.468.324C15.908%205.498%2016.744%206%2017.5%206a.5.5%200%200%201%200%201c-.962%200-1.876-.497-2.5-1.413C14.376%206.503%2013.462%207%2012.5%207s-1.876-.497-2.5-1.412C9.376%206.503%208.462%207%207.5%207C6.539%207%205.624%206.503%205%205.588c-.624.917-1.538%201.415-2.5%201.415a.5.5%200%201%201%200-1c.756%200%201.592-.503%202.032-1.678a.5.5%200%200%201%20.936%200C5.908%205.498%206.744%206%207.5%206s1.592-.502%202.032-1.675a.5.5%200%200%201%20.936%200C10.908%205.498%2011.744%206%2012.5%206s1.592-.502%202.032-1.676A.5.5%200%200%201%2015%204m0%205a.5.5%200%200%201%20.468.324C15.908%2010.498%2016.744%2011%2017.5%2011a.5.5%200%200%201%200%201c-.962%200-1.876-.497-2.5-1.413c-.624.916-1.538%201.413-2.5%201.413s-1.876-.497-2.5-1.412C9.376%2011.503%208.462%2012%207.5%2012c-.961%200-1.876-.497-2.5-1.412c-.624.917-1.538%201.415-2.5%201.415a.5.5%200%200%201%200-1c.756%200%201.592-.503%202.032-1.678a.5.5%200%200%201%20.936%200C5.908%2010.498%206.744%2011%207.5%2011s1.592-.502%202.032-1.675a.5.5%200%200%201%20.936%200C10.908%2010.498%2011.744%2011%2012.5%2011s1.592-.502%202.032-1.676A.5.5%200%200%201%2015%209m.468%205.324a.5.5%200%200%200-.936%200C14.092%2015.498%2013.256%2016%2012.5%2016s-1.592-.502-2.032-1.675a.5.5%200%200%200-.936%200C9.092%2015.498%208.256%2016%207.5%2016s-1.592-.502-2.032-1.675a.5.5%200%200%200-.936%200c-.44%201.175-1.276%201.678-2.032%201.678a.5.5%200%201%200%200%201c.962%200%201.876-.498%202.5-1.415C5.624%2016.503%206.54%2017%207.5%2017s1.876-.497%202.5-1.412c.624.915%201.538%201.412%202.5%201.412s1.876-.497%202.5-1.413c.624.916%201.538%201.413%202.5%201.413a.5.5%200%200%200%200-1c-.756%200-1.592-.502-2.032-1.676%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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M15%204a.5.5%200%200%201%20.468.324C15.908%205.498%2016.744%206%2017.5%206a.5.5%200%200%201%200%201c-.962%200-1.876-.497-2.5-1.413C14.376%206.503%2013.462%207%2012.5%207s-1.876-.497-2.5-1.412C9.376%206.503%208.462%207%207.5%207C6.539%207%205.624%206.503%205%205.588c-.624.917-1.538%201.415-2.5%201.415a.5.5%200%201%201%200-1c.756%200%201.592-.503%202.032-1.678a.5.5%200%200%201%20.936%200C5.908%205.498%206.744%206%207.5%206s1.592-.502%202.032-1.675a.5.5%200%200%201%20.936%200C10.908%205.498%2011.744%206%2012.5%206s1.592-.502%202.032-1.676A.5.5%200%200%201%2015%204m0%205a.5.5%200%200%201%20.468.324C15.908%2010.498%2016.744%2011%2017.5%2011a.5.5%200%200%201%200%201c-.962%200-1.876-.497-2.5-1.413c-.624.916-1.538%201.413-2.5%201.413s-1.876-.497-2.5-1.412C9.376%2011.503%208.462%2012%207.5%2012c-.961%200-1.876-.497-2.5-1.412c-.624.917-1.538%201.415-2.5%201.415a.5.5%200%200%201%200-1c.756%200%201.592-.503%202.032-1.678a.5.5%200%200%201%20.936%200C5.908%2010.498%206.744%2011%207.5%2011s1.592-.502%202.032-1.675a.5.5%200%200%201%20.936%200C10.908%2010.498%2011.744%2011%2012.5%2011s1.592-.502%202.032-1.676A.5.5%200%200%201%2015%209m.468%205.324a.5.5%200%200%200-.936%200C14.092%2015.498%2013.256%2016%2012.5%2016s-1.592-.502-2.032-1.675a.5.5%200%200%200-.936%200C9.092%2015.498%208.256%2016%207.5%2016s-1.592-.502-2.032-1.675a.5.5%200%200%200-.936%200c-.44%201.175-1.276%201.678-2.032%201.678a.5.5%200%201%200%200%201c.962%200%201.876-.498%202.5-1.415C5.624%2016.503%206.54%2017%207.5%2017s1.876-.497%202.5-1.412c.624.915%201.538%201.412%202.5%201.412s1.876-.497%202.5-1.413c.624.916%201.538%201.413%202.5%201.413a.5.5%200%200%200%200-1c-.756%200-1.592-.502-2.032-1.676%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/water-20-regular.svg?color=%231a73e8&size=48
