water icon
water from BoxIcons v2 by Boxicons · Regular · MIT Free for personal and commercial use.
- Name
- water
- Set
- BoxIcons v2
- Style
- Regular
- Viewbox
- 24×24
- License
- MIT
- Aliases
- bx-water
The same icon in other sets
waterAkar IconswaterBootstrap IconswaterFont Awesome 6 SolidwaterFont Awesome Solidwater-16-filledFluent UI System IconswaterIconParkwaterIconPark 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="M5.996 9c1.413 0 2.16-.747 2.705-1.293c.49-.49.731-.707 1.292-.707s.802.217 1.292.707C11.83 8.253 12.577 9 13.991 9c1.415 0 2.163-.747 2.71-1.293c.491-.49.732-.707 1.295-.707s.804.217 1.295.707C19.837 8.253 20.585 9 22 9V7c-.563 0-.804-.217-1.295-.707C20.159 5.747 19.411 5 17.996 5s-2.162.747-2.709 1.292c-.491.491-.731.708-1.296.708c-.562 0-.802-.217-1.292-.707C12.154 5.747 11.407 5 9.993 5s-2.161.747-2.706 1.293c-.49.49-.73.707-1.291.707s-.801-.217-1.291-.707C4.16 5.747 3.413 5 2 5v2c.561 0 .801.217 1.291.707C3.836 8.253 4.583 9 5.996 9m0 5c1.413 0 2.16-.747 2.705-1.293c.49-.49.731-.707 1.292-.707s.802.217 1.292.707c.545.546 1.292 1.293 2.706 1.293c1.415 0 2.163-.747 2.71-1.293c.491-.49.732-.707 1.295-.707s.804.217 1.295.707C19.837 13.253 20.585 14 22 14v-2c-.563 0-.804-.217-1.295-.707c-.546-.546-1.294-1.293-2.709-1.293s-2.162.747-2.709 1.292c-.491.491-.731.708-1.296.708c-.562 0-.802-.217-1.292-.707C12.154 10.747 11.407 10 9.993 10s-2.161.747-2.706 1.293c-.49.49-.73.707-1.291.707s-.801-.217-1.291-.707C4.16 10.747 3.413 10 2 10v2c.561 0 .801.217 1.291.707C3.836 13.253 4.583 14 5.996 14m0 5c1.413 0 2.16-.747 2.705-1.293c.49-.49.731-.707 1.292-.707s.802.217 1.292.707c.545.546 1.292 1.293 2.706 1.293c1.415 0 2.163-.747 2.71-1.293c.491-.49.732-.707 1.295-.707s.804.217 1.295.707C19.837 18.253 20.585 19 22 19v-2c-.563 0-.804-.217-1.295-.707c-.546-.546-1.294-1.293-2.709-1.293s-2.162.747-2.709 1.292c-.491.491-.731.708-1.296.708c-.562 0-.802-.217-1.292-.707C12.154 15.747 11.407 15 9.993 15s-2.161.747-2.706 1.293c-.49.49-.73.707-1.291.707s-.801-.217-1.291-.707C4.16 15.747 3.413 15 2 15v2c.561 0 .801.217 1.291.707C3.836 18.253 4.583 19 5.996 19"/></svg>
React
import type { SVGProps } from "react";
export function BxWater(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="M5.996 9c1.413 0 2.16-.747 2.705-1.293c.49-.49.731-.707 1.292-.707s.802.217 1.292.707C11.83 8.253 12.577 9 13.991 9c1.415 0 2.163-.747 2.71-1.293c.491-.49.732-.707 1.295-.707s.804.217 1.295.707C19.837 8.253 20.585 9 22 9V7c-.563 0-.804-.217-1.295-.707C20.159 5.747 19.411 5 17.996 5s-2.162.747-2.709 1.292c-.491.491-.731.708-1.296.708c-.562 0-.802-.217-1.292-.707C12.154 5.747 11.407 5 9.993 5s-2.161.747-2.706 1.293c-.49.49-.73.707-1.291.707s-.801-.217-1.291-.707C4.16 5.747 3.413 5 2 5v2c.561 0 .801.217 1.291.707C3.836 8.253 4.583 9 5.996 9m0 5c1.413 0 2.16-.747 2.705-1.293c.49-.49.731-.707 1.292-.707s.802.217 1.292.707c.545.546 1.292 1.293 2.706 1.293c1.415 0 2.163-.747 2.71-1.293c.491-.49.732-.707 1.295-.707s.804.217 1.295.707C19.837 13.253 20.585 14 22 14v-2c-.563 0-.804-.217-1.295-.707c-.546-.546-1.294-1.293-2.709-1.293s-2.162.747-2.709 1.292c-.491.491-.731.708-1.296.708c-.562 0-.802-.217-1.292-.707C12.154 10.747 11.407 10 9.993 10s-2.161.747-2.706 1.293c-.49.49-.73.707-1.291.707s-.801-.217-1.291-.707C4.16 10.747 3.413 10 2 10v2c.561 0 .801.217 1.291.707C3.836 13.253 4.583 14 5.996 14m0 5c1.413 0 2.16-.747 2.705-1.293c.49-.49.731-.707 1.292-.707s.802.217 1.292.707c.545.546 1.292 1.293 2.706 1.293c1.415 0 2.163-.747 2.71-1.293c.491-.49.732-.707 1.295-.707s.804.217 1.295.707C19.837 18.253 20.585 19 22 19v-2c-.563 0-.804-.217-1.295-.707c-.546-.546-1.294-1.293-2.709-1.293s-2.162.747-2.709 1.292c-.491.491-.731.708-1.296.708c-.562 0-.802-.217-1.292-.707C12.154 15.747 11.407 15 9.993 15s-2.161.747-2.706 1.293c-.49.49-.73.707-1.291.707s-.801-.217-1.291-.707C4.16 15.747 3.413 15 2 15v2c.561 0 .801.217 1.291.707C3.836 18.253 4.583 19 5.996 19"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5.996 9c1.413 0 2.16-.747 2.705-1.293c.49-.49.731-.707 1.292-.707s.802.217 1.292.707C11.83 8.253 12.577 9 13.991 9c1.415 0 2.163-.747 2.71-1.293c.491-.49.732-.707 1.295-.707s.804.217 1.295.707C19.837 8.253 20.585 9 22 9V7c-.563 0-.804-.217-1.295-.707C20.159 5.747 19.411 5 17.996 5s-2.162.747-2.709 1.292c-.491.491-.731.708-1.296.708c-.562 0-.802-.217-1.292-.707C12.154 5.747 11.407 5 9.993 5s-2.161.747-2.706 1.293c-.49.49-.73.707-1.291.707s-.801-.217-1.291-.707C4.16 5.747 3.413 5 2 5v2c.561 0 .801.217 1.291.707C3.836 8.253 4.583 9 5.996 9m0 5c1.413 0 2.16-.747 2.705-1.293c.49-.49.731-.707 1.292-.707s.802.217 1.292.707c.545.546 1.292 1.293 2.706 1.293c1.415 0 2.163-.747 2.71-1.293c.491-.49.732-.707 1.295-.707s.804.217 1.295.707C19.837 13.253 20.585 14 22 14v-2c-.563 0-.804-.217-1.295-.707c-.546-.546-1.294-1.293-2.709-1.293s-2.162.747-2.709 1.292c-.491.491-.731.708-1.296.708c-.562 0-.802-.217-1.292-.707C12.154 10.747 11.407 10 9.993 10s-2.161.747-2.706 1.293c-.49.49-.73.707-1.291.707s-.801-.217-1.291-.707C4.16 10.747 3.413 10 2 10v2c.561 0 .801.217 1.291.707C3.836 13.253 4.583 14 5.996 14m0 5c1.413 0 2.16-.747 2.705-1.293c.49-.49.731-.707 1.292-.707s.802.217 1.292.707c.545.546 1.292 1.293 2.706 1.293c1.415 0 2.163-.747 2.71-1.293c.491-.49.732-.707 1.295-.707s.804.217 1.295.707C19.837 18.253 20.585 19 22 19v-2c-.563 0-.804-.217-1.295-.707c-.546-.546-1.294-1.293-2.709-1.293s-2.162.747-2.709 1.292c-.491.491-.731.708-1.296.708c-.562 0-.802-.217-1.292-.707C12.154 15.747 11.407 15 9.993 15s-2.161.747-2.706 1.293c-.49.49-.73.707-1.291.707s-.801-.217-1.291-.707C4.16 15.747 3.413 15 2 15v2c.561 0 .801.217 1.291.707C3.836 18.253 4.583 19 5.996 19"/></svg> </template>
CSS
.icon-water {
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%22M5.996%209c1.413%200%202.16-.747%202.705-1.293c.49-.49.731-.707%201.292-.707s.802.217%201.292.707C11.83%208.253%2012.577%209%2013.991%209c1.415%200%202.163-.747%202.71-1.293c.491-.49.732-.707%201.295-.707s.804.217%201.295.707C19.837%208.253%2020.585%209%2022%209V7c-.563%200-.804-.217-1.295-.707C20.159%205.747%2019.411%205%2017.996%205s-2.162.747-2.709%201.292c-.491.491-.731.708-1.296.708c-.562%200-.802-.217-1.292-.707C12.154%205.747%2011.407%205%209.993%205s-2.161.747-2.706%201.293c-.49.49-.73.707-1.291.707s-.801-.217-1.291-.707C4.16%205.747%203.413%205%202%205v2c.561%200%20.801.217%201.291.707C3.836%208.253%204.583%209%205.996%209m0%205c1.413%200%202.16-.747%202.705-1.293c.49-.49.731-.707%201.292-.707s.802.217%201.292.707c.545.546%201.292%201.293%202.706%201.293c1.415%200%202.163-.747%202.71-1.293c.491-.49.732-.707%201.295-.707s.804.217%201.295.707C19.837%2013.253%2020.585%2014%2022%2014v-2c-.563%200-.804-.217-1.295-.707c-.546-.546-1.294-1.293-2.709-1.293s-2.162.747-2.709%201.292c-.491.491-.731.708-1.296.708c-.562%200-.802-.217-1.292-.707C12.154%2010.747%2011.407%2010%209.993%2010s-2.161.747-2.706%201.293c-.49.49-.73.707-1.291.707s-.801-.217-1.291-.707C4.16%2010.747%203.413%2010%202%2010v2c.561%200%20.801.217%201.291.707C3.836%2013.253%204.583%2014%205.996%2014m0%205c1.413%200%202.16-.747%202.705-1.293c.49-.49.731-.707%201.292-.707s.802.217%201.292.707c.545.546%201.292%201.293%202.706%201.293c1.415%200%202.163-.747%202.71-1.293c.491-.49.732-.707%201.295-.707s.804.217%201.295.707C19.837%2018.253%2020.585%2019%2022%2019v-2c-.563%200-.804-.217-1.295-.707c-.546-.546-1.294-1.293-2.709-1.293s-2.162.747-2.709%201.292c-.491.491-.731.708-1.296.708c-.562%200-.802-.217-1.292-.707C12.154%2015.747%2011.407%2015%209.993%2015s-2.161.747-2.706%201.293c-.49.49-.73.707-1.291.707s-.801-.217-1.291-.707C4.16%2015.747%203.413%2015%202%2015v2c.561%200%20.801.217%201.291.707C3.836%2018.253%204.583%2019%205.996%2019%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%22M5.996%209c1.413%200%202.16-.747%202.705-1.293c.49-.49.731-.707%201.292-.707s.802.217%201.292.707C11.83%208.253%2012.577%209%2013.991%209c1.415%200%202.163-.747%202.71-1.293c.491-.49.732-.707%201.295-.707s.804.217%201.295.707C19.837%208.253%2020.585%209%2022%209V7c-.563%200-.804-.217-1.295-.707C20.159%205.747%2019.411%205%2017.996%205s-2.162.747-2.709%201.292c-.491.491-.731.708-1.296.708c-.562%200-.802-.217-1.292-.707C12.154%205.747%2011.407%205%209.993%205s-2.161.747-2.706%201.293c-.49.49-.73.707-1.291.707s-.801-.217-1.291-.707C4.16%205.747%203.413%205%202%205v2c.561%200%20.801.217%201.291.707C3.836%208.253%204.583%209%205.996%209m0%205c1.413%200%202.16-.747%202.705-1.293c.49-.49.731-.707%201.292-.707s.802.217%201.292.707c.545.546%201.292%201.293%202.706%201.293c1.415%200%202.163-.747%202.71-1.293c.491-.49.732-.707%201.295-.707s.804.217%201.295.707C19.837%2013.253%2020.585%2014%2022%2014v-2c-.563%200-.804-.217-1.295-.707c-.546-.546-1.294-1.293-2.709-1.293s-2.162.747-2.709%201.292c-.491.491-.731.708-1.296.708c-.562%200-.802-.217-1.292-.707C12.154%2010.747%2011.407%2010%209.993%2010s-2.161.747-2.706%201.293c-.49.49-.73.707-1.291.707s-.801-.217-1.291-.707C4.16%2010.747%203.413%2010%202%2010v2c.561%200%20.801.217%201.291.707C3.836%2013.253%204.583%2014%205.996%2014m0%205c1.413%200%202.16-.747%202.705-1.293c.49-.49.731-.707%201.292-.707s.802.217%201.292.707c.545.546%201.292%201.293%202.706%201.293c1.415%200%202.163-.747%202.71-1.293c.491-.49.732-.707%201.295-.707s.804.217%201.295.707C19.837%2018.253%2020.585%2019%2022%2019v-2c-.563%200-.804-.217-1.295-.707c-.546-.546-1.294-1.293-2.709-1.293s-2.162.747-2.709%201.292c-.491.491-.731.708-1.296.708c-.562%200-.802-.217-1.292-.707C12.154%2015.747%2011.407%2015%209.993%2015s-2.161.747-2.706%201.293c-.49.49-.73.707-1.291.707s-.801-.217-1.291-.707C4.16%2015.747%203.413%2015%202%2015v2c.561%200%20.801.217%201.291.707C3.836%2018.253%204.583%2019%205.996%2019%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/bx/water.svg?color=%231a73e8&size=48
