water icon
water-24-filled from Fluent UI System Icons by Microsoft Corporation · 24 Filled · MIT Free for personal and commercial use.
- Name
- water-24-filled
- Set
- Fluent UI System Icons
- Style
- 24 Filled
- Viewbox
- 24×24
- 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 24 24"><path fill="currentColor" d="M18.456 3.501a1 1 0 0 1 .939.552c.422.845.94 1.353 1.33 1.645c.196.147.362.24.471.295q.082.04.115.052l.015.006a1 1 0 0 1-.64 1.895h-.002l-.002-.001l-.005-.002l-.01-.004l-.029-.01l-.081-.031a4 4 0 0 1-.252-.115a5 5 0 0 1-.779-.484a6 6 0 0 1-.976-.919c-.864 1.045-2.05 1.617-3.3 1.617c-1.226 0-2.39-.55-3.25-1.558c-.859 1.007-2.023 1.558-3.25 1.558c-1.25 0-2.435-.572-3.299-1.616a6 6 0 0 1-.976.92a5 5 0 0 1-.778.484a4 4 0 0 1-.333.147l-.028.01l-.01.004l-.006.001l-.002.001a1 1 0 0 1-.646-1.893l.016-.006q.032-.013.115-.053c.109-.054.276-.148.472-.296c.391-.293.908-.802 1.33-1.647a1 1 0 0 1 1.826.081c.525 1.334 1.486 1.863 2.32 1.863c.832 0 1.794-.529 2.319-1.863a1 1 0 0 1 1.86 0c.526 1.334 1.487 1.863 2.32 1.863s1.794-.529 2.32-1.863a1 1 0 0 1 .886-.633m0 6a1 1 0 0 1 .939.552c.422.845.94 1.353 1.33 1.645c.196.147.362.24.471.295q.082.04.115.052l.015.006a1 1 0 0 1-.64 1.895h-.002l-.002-.001l-.005-.002l-.01-.004l-.029-.01l-.081-.031a4 4 0 0 1-.252-.115a5 5 0 0 1-.779-.484a6 6 0 0 1-.976-.919c-.864 1.045-2.05 1.617-3.3 1.617c-1.226 0-2.39-.55-3.25-1.558c-.859 1.007-2.023 1.558-3.25 1.558c-1.25 0-2.435-.572-3.299-1.616a6 6 0 0 1-.976.92a5 5 0 0 1-.778.484a4 4 0 0 1-.333.147l-.028.01l-.01.004l-.006.001l-.002.001a1 1 0 0 1-.646-1.893l.016-.006q.032-.013.115-.053c.109-.054.276-.148.472-.296c.391-.293.908-.802 1.33-1.647a1 1 0 0 1 1.826.081c.525 1.334 1.486 1.863 2.32 1.863c.832 0 1.794-.529 2.319-1.863a1 1 0 0 1 1.86 0c.526 1.334 1.487 1.863 2.32 1.863s1.794-.529 2.32-1.863a1 1 0 0 1 .886-.633m.939 6.552a1 1 0 0 0-1.825.08c-.526 1.335-1.487 1.864-2.32 1.864s-1.794-.529-2.32-1.863a1 1 0 0 0-1.86 0c-.525 1.334-1.487 1.863-2.32 1.863s-1.794-.529-2.32-1.863a1 1 0 0 0-1.824-.08c-.423.844-.94 1.353-1.33 1.646a3 3 0 0 1-.473.296a2 2 0 0 1-.115.053l-.016.006a1 1 0 0 0 .645 1.893h.003l.005-.002l.01-.004l.029-.01l.081-.032q.098-.039.252-.115c.204-.102.475-.258.778-.485c.306-.23.643-.53.976-.92c.864 1.045 2.05 1.617 3.3 1.617c1.226 0 2.39-.55 3.25-1.558c.859 1.007 2.023 1.558 3.25 1.558c1.25 0 2.435-.572 3.299-1.617c.333.389.67.69.976.919c.303.227.575.382.779.484a4 4 0 0 0 .333.146l.028.01l.011.004l.005.002l.004.001a1 1 0 0 0 .64-1.895l-.015-.006l-.115-.052a3 3 0 0 1-.472-.295c-.39-.292-.907-.8-1.33-1.645"/></svg>
React
import type { SVGProps } from "react";
export function FluentWater24Filled(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.456 3.501a1 1 0 0 1 .939.552c.422.845.94 1.353 1.33 1.645c.196.147.362.24.471.295q.082.04.115.052l.015.006a1 1 0 0 1-.64 1.895h-.002l-.002-.001l-.005-.002l-.01-.004l-.029-.01l-.081-.031a4 4 0 0 1-.252-.115a5 5 0 0 1-.779-.484a6 6 0 0 1-.976-.919c-.864 1.045-2.05 1.617-3.3 1.617c-1.226 0-2.39-.55-3.25-1.558c-.859 1.007-2.023 1.558-3.25 1.558c-1.25 0-2.435-.572-3.299-1.616a6 6 0 0 1-.976.92a5 5 0 0 1-.778.484a4 4 0 0 1-.333.147l-.028.01l-.01.004l-.006.001l-.002.001a1 1 0 0 1-.646-1.893l.016-.006q.032-.013.115-.053c.109-.054.276-.148.472-.296c.391-.293.908-.802 1.33-1.647a1 1 0 0 1 1.826.081c.525 1.334 1.486 1.863 2.32 1.863c.832 0 1.794-.529 2.319-1.863a1 1 0 0 1 1.86 0c.526 1.334 1.487 1.863 2.32 1.863s1.794-.529 2.32-1.863a1 1 0 0 1 .886-.633m0 6a1 1 0 0 1 .939.552c.422.845.94 1.353 1.33 1.645c.196.147.362.24.471.295q.082.04.115.052l.015.006a1 1 0 0 1-.64 1.895h-.002l-.002-.001l-.005-.002l-.01-.004l-.029-.01l-.081-.031a4 4 0 0 1-.252-.115a5 5 0 0 1-.779-.484a6 6 0 0 1-.976-.919c-.864 1.045-2.05 1.617-3.3 1.617c-1.226 0-2.39-.55-3.25-1.558c-.859 1.007-2.023 1.558-3.25 1.558c-1.25 0-2.435-.572-3.299-1.616a6 6 0 0 1-.976.92a5 5 0 0 1-.778.484a4 4 0 0 1-.333.147l-.028.01l-.01.004l-.006.001l-.002.001a1 1 0 0 1-.646-1.893l.016-.006q.032-.013.115-.053c.109-.054.276-.148.472-.296c.391-.293.908-.802 1.33-1.647a1 1 0 0 1 1.826.081c.525 1.334 1.486 1.863 2.32 1.863c.832 0 1.794-.529 2.319-1.863a1 1 0 0 1 1.86 0c.526 1.334 1.487 1.863 2.32 1.863s1.794-.529 2.32-1.863a1 1 0 0 1 .886-.633m.939 6.552a1 1 0 0 0-1.825.08c-.526 1.335-1.487 1.864-2.32 1.864s-1.794-.529-2.32-1.863a1 1 0 0 0-1.86 0c-.525 1.334-1.487 1.863-2.32 1.863s-1.794-.529-2.32-1.863a1 1 0 0 0-1.824-.08c-.423.844-.94 1.353-1.33 1.646a3 3 0 0 1-.473.296a2 2 0 0 1-.115.053l-.016.006a1 1 0 0 0 .645 1.893h.003l.005-.002l.01-.004l.029-.01l.081-.032q.098-.039.252-.115c.204-.102.475-.258.778-.485c.306-.23.643-.53.976-.92c.864 1.045 2.05 1.617 3.3 1.617c1.226 0 2.39-.55 3.25-1.558c.859 1.007 2.023 1.558 3.25 1.558c1.25 0 2.435-.572 3.299-1.617c.333.389.67.69.976.919c.303.227.575.382.779.484a4 4 0 0 0 .333.146l.028.01l.011.004l.005.002l.004.001a1 1 0 0 0 .64-1.895l-.015-.006l-.115-.052a3 3 0 0 1-.472-.295c-.39-.292-.907-.8-1.33-1.645"/></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.456 3.501a1 1 0 0 1 .939.552c.422.845.94 1.353 1.33 1.645c.196.147.362.24.471.295q.082.04.115.052l.015.006a1 1 0 0 1-.64 1.895h-.002l-.002-.001l-.005-.002l-.01-.004l-.029-.01l-.081-.031a4 4 0 0 1-.252-.115a5 5 0 0 1-.779-.484a6 6 0 0 1-.976-.919c-.864 1.045-2.05 1.617-3.3 1.617c-1.226 0-2.39-.55-3.25-1.558c-.859 1.007-2.023 1.558-3.25 1.558c-1.25 0-2.435-.572-3.299-1.616a6 6 0 0 1-.976.92a5 5 0 0 1-.778.484a4 4 0 0 1-.333.147l-.028.01l-.01.004l-.006.001l-.002.001a1 1 0 0 1-.646-1.893l.016-.006q.032-.013.115-.053c.109-.054.276-.148.472-.296c.391-.293.908-.802 1.33-1.647a1 1 0 0 1 1.826.081c.525 1.334 1.486 1.863 2.32 1.863c.832 0 1.794-.529 2.319-1.863a1 1 0 0 1 1.86 0c.526 1.334 1.487 1.863 2.32 1.863s1.794-.529 2.32-1.863a1 1 0 0 1 .886-.633m0 6a1 1 0 0 1 .939.552c.422.845.94 1.353 1.33 1.645c.196.147.362.24.471.295q.082.04.115.052l.015.006a1 1 0 0 1-.64 1.895h-.002l-.002-.001l-.005-.002l-.01-.004l-.029-.01l-.081-.031a4 4 0 0 1-.252-.115a5 5 0 0 1-.779-.484a6 6 0 0 1-.976-.919c-.864 1.045-2.05 1.617-3.3 1.617c-1.226 0-2.39-.55-3.25-1.558c-.859 1.007-2.023 1.558-3.25 1.558c-1.25 0-2.435-.572-3.299-1.616a6 6 0 0 1-.976.92a5 5 0 0 1-.778.484a4 4 0 0 1-.333.147l-.028.01l-.01.004l-.006.001l-.002.001a1 1 0 0 1-.646-1.893l.016-.006q.032-.013.115-.053c.109-.054.276-.148.472-.296c.391-.293.908-.802 1.33-1.647a1 1 0 0 1 1.826.081c.525 1.334 1.486 1.863 2.32 1.863c.832 0 1.794-.529 2.319-1.863a1 1 0 0 1 1.86 0c.526 1.334 1.487 1.863 2.32 1.863s1.794-.529 2.32-1.863a1 1 0 0 1 .886-.633m.939 6.552a1 1 0 0 0-1.825.08c-.526 1.335-1.487 1.864-2.32 1.864s-1.794-.529-2.32-1.863a1 1 0 0 0-1.86 0c-.525 1.334-1.487 1.863-2.32 1.863s-1.794-.529-2.32-1.863a1 1 0 0 0-1.824-.08c-.423.844-.94 1.353-1.33 1.646a3 3 0 0 1-.473.296a2 2 0 0 1-.115.053l-.016.006a1 1 0 0 0 .645 1.893h.003l.005-.002l.01-.004l.029-.01l.081-.032q.098-.039.252-.115c.204-.102.475-.258.778-.485c.306-.23.643-.53.976-.92c.864 1.045 2.05 1.617 3.3 1.617c1.226 0 2.39-.55 3.25-1.558c.859 1.007 2.023 1.558 3.25 1.558c1.25 0 2.435-.572 3.299-1.617c.333.389.67.69.976.919c.303.227.575.382.779.484a4 4 0 0 0 .333.146l.028.01l.011.004l.005.002l.004.001a1 1 0 0 0 .64-1.895l-.015-.006l-.115-.052a3 3 0 0 1-.472-.295c-.39-.292-.907-.8-1.33-1.645"/></svg> </template>
CSS
.icon-water-24-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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M18.456%203.501a1%201%200%200%201%20.939.552c.422.845.94%201.353%201.33%201.645c.196.147.362.24.471.295q.082.04.115.052l.015.006a1%201%200%200%201-.64%201.895h-.002l-.002-.001l-.005-.002l-.01-.004l-.029-.01l-.081-.031a4%204%200%200%201-.252-.115a5%205%200%200%201-.779-.484a6%206%200%200%201-.976-.919c-.864%201.045-2.05%201.617-3.3%201.617c-1.226%200-2.39-.55-3.25-1.558c-.859%201.007-2.023%201.558-3.25%201.558c-1.25%200-2.435-.572-3.299-1.616a6%206%200%200%201-.976.92a5%205%200%200%201-.778.484a4%204%200%200%201-.333.147l-.028.01l-.01.004l-.006.001l-.002.001a1%201%200%200%201-.646-1.893l.016-.006q.032-.013.115-.053c.109-.054.276-.148.472-.296c.391-.293.908-.802%201.33-1.647a1%201%200%200%201%201.826.081c.525%201.334%201.486%201.863%202.32%201.863c.832%200%201.794-.529%202.319-1.863a1%201%200%200%201%201.86%200c.526%201.334%201.487%201.863%202.32%201.863s1.794-.529%202.32-1.863a1%201%200%200%201%20.886-.633m0%206a1%201%200%200%201%20.939.552c.422.845.94%201.353%201.33%201.645c.196.147.362.24.471.295q.082.04.115.052l.015.006a1%201%200%200%201-.64%201.895h-.002l-.002-.001l-.005-.002l-.01-.004l-.029-.01l-.081-.031a4%204%200%200%201-.252-.115a5%205%200%200%201-.779-.484a6%206%200%200%201-.976-.919c-.864%201.045-2.05%201.617-3.3%201.617c-1.226%200-2.39-.55-3.25-1.558c-.859%201.007-2.023%201.558-3.25%201.558c-1.25%200-2.435-.572-3.299-1.616a6%206%200%200%201-.976.92a5%205%200%200%201-.778.484a4%204%200%200%201-.333.147l-.028.01l-.01.004l-.006.001l-.002.001a1%201%200%200%201-.646-1.893l.016-.006q.032-.013.115-.053c.109-.054.276-.148.472-.296c.391-.293.908-.802%201.33-1.647a1%201%200%200%201%201.826.081c.525%201.334%201.486%201.863%202.32%201.863c.832%200%201.794-.529%202.319-1.863a1%201%200%200%201%201.86%200c.526%201.334%201.487%201.863%202.32%201.863s1.794-.529%202.32-1.863a1%201%200%200%201%20.886-.633m.939%206.552a1%201%200%200%200-1.825.08c-.526%201.335-1.487%201.864-2.32%201.864s-1.794-.529-2.32-1.863a1%201%200%200%200-1.86%200c-.525%201.334-1.487%201.863-2.32%201.863s-1.794-.529-2.32-1.863a1%201%200%200%200-1.824-.08c-.423.844-.94%201.353-1.33%201.646a3%203%200%200%201-.473.296a2%202%200%200%201-.115.053l-.016.006a1%201%200%200%200%20.645%201.893h.003l.005-.002l.01-.004l.029-.01l.081-.032q.098-.039.252-.115c.204-.102.475-.258.778-.485c.306-.23.643-.53.976-.92c.864%201.045%202.05%201.617%203.3%201.617c1.226%200%202.39-.55%203.25-1.558c.859%201.007%202.023%201.558%203.25%201.558c1.25%200%202.435-.572%203.299-1.617c.333.389.67.69.976.919c.303.227.575.382.779.484a4%204%200%200%200%20.333.146l.028.01l.011.004l.005.002l.004.001a1%201%200%200%200%20.64-1.895l-.015-.006l-.115-.052a3%203%200%200%201-.472-.295c-.39-.292-.907-.8-1.33-1.645%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.456%203.501a1%201%200%200%201%20.939.552c.422.845.94%201.353%201.33%201.645c.196.147.362.24.471.295q.082.04.115.052l.015.006a1%201%200%200%201-.64%201.895h-.002l-.002-.001l-.005-.002l-.01-.004l-.029-.01l-.081-.031a4%204%200%200%201-.252-.115a5%205%200%200%201-.779-.484a6%206%200%200%201-.976-.919c-.864%201.045-2.05%201.617-3.3%201.617c-1.226%200-2.39-.55-3.25-1.558c-.859%201.007-2.023%201.558-3.25%201.558c-1.25%200-2.435-.572-3.299-1.616a6%206%200%200%201-.976.92a5%205%200%200%201-.778.484a4%204%200%200%201-.333.147l-.028.01l-.01.004l-.006.001l-.002.001a1%201%200%200%201-.646-1.893l.016-.006q.032-.013.115-.053c.109-.054.276-.148.472-.296c.391-.293.908-.802%201.33-1.647a1%201%200%200%201%201.826.081c.525%201.334%201.486%201.863%202.32%201.863c.832%200%201.794-.529%202.319-1.863a1%201%200%200%201%201.86%200c.526%201.334%201.487%201.863%202.32%201.863s1.794-.529%202.32-1.863a1%201%200%200%201%20.886-.633m0%206a1%201%200%200%201%20.939.552c.422.845.94%201.353%201.33%201.645c.196.147.362.24.471.295q.082.04.115.052l.015.006a1%201%200%200%201-.64%201.895h-.002l-.002-.001l-.005-.002l-.01-.004l-.029-.01l-.081-.031a4%204%200%200%201-.252-.115a5%205%200%200%201-.779-.484a6%206%200%200%201-.976-.919c-.864%201.045-2.05%201.617-3.3%201.617c-1.226%200-2.39-.55-3.25-1.558c-.859%201.007-2.023%201.558-3.25%201.558c-1.25%200-2.435-.572-3.299-1.616a6%206%200%200%201-.976.92a5%205%200%200%201-.778.484a4%204%200%200%201-.333.147l-.028.01l-.01.004l-.006.001l-.002.001a1%201%200%200%201-.646-1.893l.016-.006q.032-.013.115-.053c.109-.054.276-.148.472-.296c.391-.293.908-.802%201.33-1.647a1%201%200%200%201%201.826.081c.525%201.334%201.486%201.863%202.32%201.863c.832%200%201.794-.529%202.319-1.863a1%201%200%200%201%201.86%200c.526%201.334%201.487%201.863%202.32%201.863s1.794-.529%202.32-1.863a1%201%200%200%201%20.886-.633m.939%206.552a1%201%200%200%200-1.825.08c-.526%201.335-1.487%201.864-2.32%201.864s-1.794-.529-2.32-1.863a1%201%200%200%200-1.86%200c-.525%201.334-1.487%201.863-2.32%201.863s-1.794-.529-2.32-1.863a1%201%200%200%200-1.824-.08c-.423.844-.94%201.353-1.33%201.646a3%203%200%200%201-.473.296a2%202%200%200%201-.115.053l-.016.006a1%201%200%200%200%20.645%201.893h.003l.005-.002l.01-.004l.029-.01l.081-.032q.098-.039.252-.115c.204-.102.475-.258.778-.485c.306-.23.643-.53.976-.92c.864%201.045%202.05%201.617%203.3%201.617c1.226%200%202.39-.55%203.25-1.558c.859%201.007%202.023%201.558%203.25%201.558c1.25%200%202.435-.572%203.299-1.617c.333.389.67.69.976.919c.303.227.575.382.779.484a4%204%200%200%200%20.333.146l.028.01l.011.004l.005.002l.004.001a1%201%200%200%200%20.64-1.895l-.015-.006l-.115-.052a3%203%200%200%201-.472-.295c-.39-.292-.907-.8-1.33-1.645%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/water-24-filled.svg?color=%231a73e8&size=48
