Weather Rain Showers Night icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.0012 6.01769C16.1697 6.01769 17.9672 8.11498 18.2286 10.6478L18.3086 10.6478C20.3476 10.6478 22.0006 12.2965 22.0006 14.3303C22.0006 16.3641 20.3476 18.0129 18.3086 18.0129L17.6719 18.0128L16.1363 20.6254C15.9292 20.9841 15.4705 21.107 15.1117 20.8999C14.7829 20.7101 14.6522 20.3088 14.7923 19.9669L14.8372 19.8754L15.9399 18.0128H13.8039L12.2681 20.6254C12.061 20.9841 11.6023 21.107 11.2435 20.8999C10.9147 20.7101 10.784 20.3088 10.9241 19.9669L10.969 19.8754L12.0719 18.0128H9.93488L8.39985 20.6254C8.19275 20.9841 7.73405 21.107 7.37533 20.8999C7.04651 20.7101 6.91583 20.3088 7.05586 19.9669L7.10081 19.8754L8.20288 18.0128L7.69384 18.0129C5.65476 18.0129 4.00175 16.3641 4.00175 14.3303C4.00175 12.2965 5.65476 10.6478 7.69386 10.6478L7.7738 10.6478C8.03674 8.09834 9.83267 6.01769 13.0012 6.01769ZM13.0012 7.51528C10.9299 7.51528 9.12449 9.14852 9.12449 11.4045C9.12449 11.762 8.80554 12.0424 8.44033 12.0424L7.74977 12.0424C6.48878 12.0424 5.46655 13.0437 5.46655 14.2788C5.46655 15.514 6.48878 16.5153 7.74977 16.5153H18.2526C19.5136 16.5153 20.5359 15.514 20.5359 14.2788C20.5359 13.0437 19.5136 12.0424 18.2527 12.0424L17.5621 12.0424C17.1969 12.0424 16.8779 11.762 16.8779 11.4045C16.8779 9.11959 15.0725 7.51528 13.0012 7.51528ZM6.58848 2.00991C7.3835 2.05256 8.15547 2.28167 8.85156 2.68357C9.90612 3.29242 10.6596 4.22246 11.0599 5.27879C10.5594 5.41966 10.0968 5.6165 9.67393 5.86279C9.39833 5.0977 8.86049 4.42246 8.10083 3.98387C7.90277 3.86952 7.69629 3.77503 7.48357 3.70101C7.64409 5.05264 7.43604 6.21423 6.86109 7.31175L6.74314 7.52478C6.17223 8.50119 5.31122 9.23253 4.02489 9.82922C4.18042 9.95829 4.34756 10.0746 4.52512 10.1772C4.70992 10.2839 4.9003 10.3722 5.09412 10.4427C4.64384 10.7444 4.24932 11.124 3.92881 11.5618L3.77436 11.4775C3.11685 11.0978 2.55868 10.5823 2.13224 9.96313C1.85275 9.55721 2.03356 8.9966 2.49759 8.83055C4.14001 8.2427 5.02493 7.58116 5.53104 6.61498C6.08379 5.5599 6.18589 4.44092 5.81892 2.93754C5.69961 2.44854 6.08586 1.98294 6.58848 2.00991Z" 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_night_24_regular.svg";

Details

Keywords

dailyskysnowwindcloudsunrainmoonlightninghaze