Weather Rain icon
Used to represent current weather. The Weather Rain icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Weather Rain 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 { WeatherRain24Regular, WeatherRain24Filled } from "@fluentui/react-icons";
export function Example() {
return <WeatherRain24Regular aria-label="Weather Rain" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_weather_rain_24_regular.svg" width="24" height="24" alt="Weather Rain"> 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 4.00098C15.1685 4.00098 16.9659 6.09827 17.2273 8.6311L17.3073 8.6311C19.3464 8.6311 20.9994 10.2798 20.9994 12.3136C20.9994 14.3474 19.3464 15.9962 17.3073 15.9962L16.7245 15.996L15.1428 18.6305C14.9357 18.9892 14.477 19.1121 14.1183 18.905C13.7894 18.7151 13.6588 18.3139 13.7988 17.972L13.8437 17.8805L14.9925 15.996H12.8565L11.2746 18.6305C11.0675 18.9892 10.6088 19.1121 10.2501 18.905C9.92123 18.7151 9.79055 18.3139 9.93058 17.972L9.97554 17.8805L11.1245 15.996H8.98749L7.40637 18.6305C7.19926 18.9892 6.74057 19.1121 6.38185 18.905C6.05303 18.7151 5.92235 18.3139 6.06238 17.972L6.10733 17.8805L7.25549 15.996L6.69257 15.9962C4.65349 15.9962 3.00049 14.3474 3.00049 12.3136C3.00049 10.2798 4.65349 8.6311 6.69259 8.6311L6.77253 8.6311C7.03547 6.08162 8.8314 4.00098 11.9999 4.00098ZM11.9999 5.49857C9.92861 5.49857 8.12322 7.13181 8.12322 9.38778C8.12322 9.74524 7.80427 10.0257 7.43906 10.0257L6.74851 10.0257C5.48751 10.0257 4.46528 11.027 4.46528 12.2621C4.46528 13.4973 5.48751 14.4986 6.74851 14.4986H17.2514C18.5124 14.4986 19.5346 13.4973 19.5346 12.2621C19.5346 11.027 18.5124 10.0257 17.2514 10.0257L16.5608 10.0257C16.1956 10.0257 15.8766 9.74524 15.8766 9.38778C15.8766 7.10287 14.0713 5.49857 11.9999 5.49857Z" 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_24_regular.svg";Details
| Name | Weather Rain |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_weather_rain_24_regular.svg |
| Filled file | ic_fluent_weather_rain_24_filled.svg |
| React components | WeatherRain24Regular, WeatherRain24Filled |
| License | MIT (© Microsoft Corporation) |