Weather Rain Showers Day icon

Use the Weather Rain Showers Day 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 { WeatherRainShowersDay24Regular, WeatherRainShowersDay24Filled } from "@fluentui/react-icons";

export function Example() {
  return <WeatherRainShowersDay24Regular aria-label="Weather Rain Showers Day" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_weather_rain_showers_day_24_regular.svg" width="24" height="24" alt="Weather Rain Showers Day">

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="M13.0023 6.00988C16.1708 6.00988 17.9683 8.10717 18.2297 10.64L18.3096 10.64C20.3487 10.64 22.0017 12.2887 22.0017 14.3225C22.0017 16.3563 20.3487 18.0051 18.3096 18.0051L17.691 18.0033L16.1402 20.628C15.9331 20.9867 15.4744 21.1096 15.1157 20.9025C14.7869 20.7127 14.6562 20.3114 14.7962 19.9696L14.8412 19.878L15.959 18.0033H13.823L12.272 20.628C12.0649 20.9867 11.6062 21.1096 11.2475 20.9025C10.9187 20.7127 10.788 20.3114 10.928 19.9696L10.973 19.878L12.091 18.0033H9.95504L8.40382 20.628C8.19672 20.9867 7.73803 21.1096 7.37931 20.9025C7.05048 20.7127 6.9198 20.3114 7.05983 19.9696L7.10479 19.878L8.22204 18.0033L7.69492 18.0051C5.65584 18.0051 4.00284 16.3563 4.00284 14.3225C4.00284 12.2887 5.65584 10.64 7.69494 10.64L7.77488 10.64C8.03782 8.09052 9.83375 6.00988 13.0023 6.00988ZM13.0023 7.50747C10.931 7.50747 9.12557 9.14071 9.12557 11.3967C9.12557 11.7541 8.80662 12.0346 8.44141 12.0346L7.75086 12.0346C6.48986 12.0346 5.46763 13.0359 5.46763 14.271C5.46763 15.5062 6.48986 16.5075 7.75086 16.5075H18.2537C19.5147 16.5075 20.5369 15.5062 20.5369 14.271C20.5369 13.0359 19.5147 12.0346 18.2537 12.0346L17.5632 12.0346C17.1979 12.0346 16.879 11.7541 16.879 11.3967C16.879 9.11177 15.0736 7.50747 13.0023 7.50747ZM4.36791 10.1653C4.51321 10.5161 4.37262 10.914 4.05341 11.1L3.96201 11.1452L3.03574 11.5289C2.65306 11.6874 2.21433 11.5057 2.05582 11.123C1.91052 10.7722 2.05111 10.3743 2.37032 10.1884L2.46172 10.1431L3.38798 9.75942C3.77067 9.60091 4.20939 9.78264 4.36791 10.1653ZM10.8549 5.33211L10.6833 5.38969C10.1492 5.57837 9.66051 5.83376 9.22303 6.14777C8.6896 5.97389 8.09332 5.98224 7.53383 6.21399C6.28804 6.73001 5.69644 8.15825 6.21247 9.40404C6.27307 9.55036 6.34626 9.68765 6.43027 9.81519C5.93805 9.95259 5.47709 10.171 5.06373 10.4545C4.97491 10.3043 4.89572 10.1448 4.82665 9.97806C3.9936 7.9669 4.94864 5.66122 6.9598 4.82817C8.3021 4.27217 9.77559 4.51269 10.8549 5.33211ZM2.94116 5.36319L3.04666 5.39809L3.97293 5.78176C4.35561 5.94028 4.53734 6.379 4.37883 6.76169C4.23472 7.10958 3.85904 7.29139 3.50441 7.20248L3.3989 7.16758L2.47264 6.78391C2.08996 6.6254 1.90823 6.18667 2.06674 5.80399C2.21084 5.4561 2.58653 5.27428 2.94116 5.36319ZM6.75638 2.37677L6.80165 2.46817L7.18533 3.39444C7.34384 3.77712 7.16211 4.21585 6.77943 4.37436C6.42864 4.51966 6.03075 4.37907 5.84478 4.05987L5.79951 3.96846L5.41584 3.0422C5.25732 2.65951 5.43905 2.22079 5.82173 2.06228C6.17253 1.91697 6.57041 2.05756 6.75638 2.37677ZM11.1097 2.05826C11.4576 2.20237 11.6394 2.57805 11.5505 2.93268L11.5156 3.03819L11.1319 3.96445C10.9734 4.34713 10.5347 4.52886 10.152 4.37035C9.80413 4.22625 9.62232 3.85056 9.71123 3.49593L9.74613 3.39043L10.1298 2.46416C10.2883 2.08148 10.727 1.89975 11.1097 2.05826Z" 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_rain_showers_day_24_regular.svg";

Details

Keywords

dailyskysnowwindcloudsunrainmoonlightninghaze