Weather Humidity icon

Use the Weather Humidity 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 { WeatherHumidity24Regular, WeatherHumidity24Filled } from "@fluentui/react-icons";

export function Example() {
  return <WeatherHumidity24Regular aria-label="Weather Humidity" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_weather_humidity_24_regular.svg" width="24" height="24" alt="Weather Humidity">

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="M14.75 20.5C15.1642 20.5 15.5 20.8358 15.5 21.25C15.5 21.6642 15.1642 22 14.75 22H9.25C8.83581 22 8.50003 21.6642 8.5 21.25C8.5 20.8358 8.83579 20.5 9.25 20.5H14.75ZM17.5 17.5C17.9142 17.5 18.25 17.8358 18.25 18.25C18.25 18.6642 17.9142 19 17.5 19H6.5C6.08581 19 5.75003 18.6642 5.75 18.25C5.75 17.8358 6.08579 17.5 6.5 17.5H17.5ZM18.5 14.5C18.9142 14.5 19.25 14.8358 19.25 15.25C19.25 15.6642 18.9142 16 18.5 16H5.5C5.08581 16 4.75003 15.6642 4.75 15.25C4.75 14.8358 5.08579 14.5 5.5 14.5H18.5ZM11.4697 2.21973C11.7626 1.92684 12.2374 1.92684 12.5303 2.21973C12.9337 2.62322 14.5292 4.34788 16.0293 6.58204C17.2755 8.43821 18.5261 10.7534 18.8906 13H17.3711C17.0155 11.1711 15.9651 9.17823 14.7832 7.41797C13.7425 5.86806 12.6535 4.57483 12 3.84766C11.3465 4.57483 10.2575 5.86805 9.2168 7.41797C8.03492 9.17823 6.98447 11.1711 6.62891 13H5.10938C5.4739 10.7534 6.72447 8.43821 7.9707 6.58204C9.47077 4.34789 11.0663 2.62322 11.4697 2.21973Z" 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/weather_humidity_24_regular.svg";

Details