Weather Drizzle icon

Use the Weather Drizzle 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 { WeatherDrizzle24Regular, WeatherDrizzle24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M11.9999 3.00098C15.1685 3.00098 16.9659 5.09827 17.2273 7.6311L17.3073 7.6311C19.3464 7.6311 20.9994 9.27982 20.9994 11.3136C20.9994 13.3474 19.3464 14.9962 17.3073 14.9962L16.7245 14.996L16.7219 15.0002H16.4581C16.4378 15.0577 16.4101 15.1136 16.3748 15.1666L15.3752 16.6666C15.1455 17.0113 14.6798 17.1045 14.3351 16.8748C13.9905 16.6451 13.8972 16.1794 14.1269 15.8348L14.6859 14.996H12.8565L12.8539 15.0002H12.4574C12.4371 15.0577 12.4095 15.1135 12.3741 15.1665L11.3745 16.6665C11.1448 17.0112 10.6792 17.1044 10.3345 16.8747C9.98981 16.645 9.8966 16.1793 10.1263 15.8346L10.6852 14.996H8.98749L8.98493 15.0002H8.45764C8.43733 15.0577 8.40963 15.1136 8.3743 15.1666L7.37468 16.6666C7.14497 17.0113 6.67934 17.1045 6.33465 16.8748C5.98996 16.6451 5.89675 16.1794 6.12646 15.8348L6.68532 14.9962C4.64957 14.9922 3.00049 13.345 3.00049 11.3136C3.00049 9.27982 4.65349 7.6311 6.69259 7.6311L6.77253 7.6311C7.03547 5.08162 8.8314 3.00098 11.9999 3.00098ZM11.9999 4.49857C9.92861 4.49857 8.12322 6.13181 8.12322 8.38778C8.12322 8.74524 7.80427 9.02573 7.43906 9.02572L6.74851 9.0257C5.48751 9.0257 4.46528 10.027 4.46528 11.2621C4.46528 12.4973 5.48751 13.4986 6.74851 13.4986H17.2514C18.5124 13.4986 19.5346 12.4973 19.5346 11.2621C19.5346 10.027 18.5124 9.0257 17.2514 9.0257L16.5608 9.02572C16.1956 9.02573 15.8766 8.74524 15.8766 8.38778C15.8766 6.10287 14.0713 4.49857 11.9999 4.49857ZM7.12609 18.8345C6.89638 19.1791 6.98959 19.6448 7.33428 19.8745C7.67896 20.1042 8.1446 20.011 8.3743 19.6663L9.37392 18.1663C9.60363 17.8216 9.51042 17.356 9.16573 17.1263C8.82104 16.8966 8.35541 16.9898 8.1257 17.3345L7.12609 18.8345ZM11.3343 19.8742C10.9896 19.6445 10.8964 19.1789 11.1261 18.8342L12.1257 17.3342C12.3554 16.9895 12.821 16.8963 13.1657 17.126C13.5104 17.3557 13.6036 17.8214 13.3739 18.1661L12.3743 19.666C12.1446 20.0107 11.679 20.1039 11.3343 19.8742Z" 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_drizzle_24_regular.svg";

Details

Keywords

dailyskysnowwindcloudsunrainmoonlightninghaze