Water icon

Use the Water icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { Water24Regular, Water24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Water24Regular aria-label="Water" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_water_24_regular.svg" width="24" height="24" alt="Water">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.3793 4C18.69 4 18.9685 4.19151 19.0796 4.48159C19.6403 5.94433 20.6887 6.49668 21.25 6.49668C21.6642 6.49668 22 6.83247 22 7.24668C22 7.66089 21.6642 7.99668 21.25 7.99668C20.2478 7.99668 19.1628 7.38604 18.377 6.31043C17.5631 7.40336 16.4056 7.99668 15.1897 7.99675C13.9726 7.99681 12.814 7.40246 12 6.30765C11.186 7.40246 10.0274 7.99681 8.81035 7.99681C7.59467 7.99681 6.43737 7.40384 5.62354 6.31148C4.83783 7.38835 3.7527 7.99998 2.75002 8C2.3358 8.00001 2.00001 7.66423 2 7.25002C1.99999 6.8358 2.33577 6.50001 2.74998 6.5C3.31079 6.49999 4.35947 5.94726 4.92026 4.48238C5.03134 4.19222 5.30983 4.00059 5.62053 4.00053C5.93122 4.00046 6.20979 4.19197 6.321 4.48208C6.86477 5.90063 7.89012 6.49681 8.81035 6.49681C9.73057 6.49681 10.7559 5.90063 11.2997 4.48208C11.4109 4.19202 11.6894 4.00053 12 4.00053C12.3106 4.00053 12.5891 4.19202 12.7003 4.48208C13.2441 5.90064 14.2694 6.49679 15.1896 6.49675C16.1098 6.4967 17.1352 5.90044 17.679 4.48159C17.7902 4.19151 18.0687 4 18.3793 4ZM18.3793 10C18.69 10 18.9685 10.1915 19.0796 10.4816C19.6403 11.9443 20.6887 12.4967 21.25 12.4967C21.6642 12.4967 22 12.8325 22 13.2467C22 13.6609 21.6642 13.9967 21.25 13.9967C20.2478 13.9967 19.1628 13.386 18.377 12.3104C17.5631 13.4034 16.4056 13.9967 15.1897 13.9967C13.9726 13.9968 12.814 13.4025 12 12.3076C11.186 13.4025 10.0274 13.9968 8.81035 13.9968C7.59467 13.9968 6.43737 13.4038 5.62354 12.3115C4.83783 13.3884 3.7527 14 2.75002 14C2.3358 14 2.00001 13.6642 2 13.25C1.99999 12.8358 2.33577 12.5 2.74998 12.5C3.31079 12.5 4.35947 11.9473 4.92026 10.4824C5.03134 10.1922 5.30983 10.0006 5.62053 10.0005C5.93122 10.0005 6.20979 10.192 6.321 10.4821C6.86477 11.9006 7.89012 12.4968 8.81035 12.4968C9.73057 12.4968 10.7559 11.9006 11.2997 10.4821C11.4109 10.192 11.6894 10.0005 12 10.0005C12.3106 10.0005 12.5891 10.192 12.7003 10.4821C13.2441 11.9006 14.2694 12.4968 15.1896 12.4967C16.1098 12.4967 17.1352 11.9004 17.679 10.4816C17.7902 10.1915 18.0687 10 18.3793 10ZM19.0796 16.4816C18.9685 16.1915 18.69 16 18.3793 16C18.0687 16 17.7902 16.1915 17.679 16.4816C17.1352 17.9004 16.1098 18.4967 15.1896 18.4967C14.2694 18.4968 13.2441 17.9006 12.7003 16.4821C12.5891 16.192 12.3106 16.0005 12 16.0005C11.6894 16.0005 11.4109 16.192 11.2997 16.4821C10.7559 17.9006 9.73057 18.4968 8.81035 18.4968C7.89012 18.4968 6.86477 17.9006 6.321 16.4821C6.20979 16.192 5.93122 16.0005 5.62053 16.0005C5.30983 16.0006 5.03134 16.1922 4.92026 16.4824C4.35947 17.9473 3.31079 18.5 2.74998 18.5C2.33577 18.5 1.99999 18.8358 2 19.25C2.00001 19.6642 2.3358 20 2.75002 20C3.7527 20 4.83783 19.3884 5.62354 18.3115C6.43737 19.4038 7.59467 19.9968 8.81035 19.9968C10.0274 19.9968 11.186 19.4025 12 18.3076C12.814 19.4025 13.9726 19.9968 15.1897 19.9967C16.4056 19.9967 17.5631 19.4034 18.377 18.3104C19.1628 19.386 20.2478 19.9967 21.25 19.9967C21.6642 19.9967 22 19.6609 22 19.2467C22 18.8325 21.6642 18.4967 21.25 18.4967C20.6887 18.4967 19.6403 17.9443 19.0796 16.4816Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/water_24_regular.svg";

Details

Keywords

oceanwaterfrontswim