Weather Hail Night icon

Use the Weather Hail 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 { WeatherHailNight24Regular, WeatherHailNight24Filled } from "@fluentui/react-icons";

export function Example() {
  return <WeatherHailNight24Regular aria-label="Weather Hail Night" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_weather_hail_night_24_regular.svg" width="24" height="24" alt="Weather Hail 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 20C13.5523 20 14 20.4477 14 21C14 21.5523 13.5523 22 13 22C12.4477 22 12 21.5523 12 21C12 20.4477 12.4477 20 13 20ZM9.5 19C10.0523 19 10.5 19.4477 10.5 20C10.5 20.5523 10.0523 21 9.5 21C8.94772 21 8.5 20.5523 8.5 20C8.5 19.4477 8.94772 19 9.5 19ZM16.5 19C17.0523 19 17.5 19.4477 17.5 20C17.5 20.5523 17.0523 21 16.5 21C15.9477 21 15.5 20.5523 15.5 20C15.5 19.4477 15.9477 19 16.5 19ZM13.0017 6.0089C16.1702 6.0089 17.9677 8.1062 18.2291 10.639L18.3091 10.639C20.3481 10.639 22.0011 12.2878 22.0011 14.3216C22.0011 16.3554 20.3481 18.0041 18.3091 18.0041H7.69432C5.65524 18.0041 4.00224 16.3554 4.00224 14.3216C4.00224 12.2878 5.65524 10.639 7.69435 10.639L7.77429 10.639C8.03723 8.08955 9.83316 6.0089 13.0017 6.0089ZM13.0017 7.50649C10.9304 7.50649 9.12498 9.13974 9.12498 11.3957C9.12498 11.7532 8.80603 12.0337 8.44082 12.0336L7.75026 12.0336C6.48927 12.0336 5.46703 13.0349 5.46703 14.2701C5.46703 15.5052 6.48927 16.5065 7.75026 16.5065H18.2531C19.5141 16.5065 20.5363 15.5052 20.5363 14.2701C20.5363 13.0349 19.5141 12.0336 18.2531 12.0336L17.5626 12.0336C17.1973 12.0337 16.8784 11.7532 16.8784 11.3957C16.8784 9.1108 15.073 7.50649 13.0017 7.50649ZM6.58896 2.00112C7.38399 2.04377 8.15596 2.27289 8.85205 2.67478C9.90661 3.28363 10.6601 4.21368 11.0604 5.27C10.5598 5.41087 10.0973 5.60772 9.67442 5.854C9.39882 5.08892 8.86097 4.41367 8.10132 3.97508C7.90326 3.86073 7.69677 3.76624 7.48406 3.69222C7.64458 5.04385 7.43653 6.20544 6.86158 7.30296L6.74363 7.51599C6.17272 8.4924 5.3117 9.22374 4.02538 9.82043C4.18091 9.9495 4.34805 10.0659 4.5256 10.1684C4.71041 10.2751 4.90078 10.3634 5.09461 10.4339C4.64433 10.7356 4.24981 11.1152 3.9293 11.553C3.87766 11.5269 3.82611 11.4983 3.77485 11.4687C3.11733 11.089 2.55916 10.5736 2.13272 9.95434C1.85323 9.54842 2.03405 8.98781 2.49808 8.82176C4.1405 8.23392 5.02542 7.57237 5.53153 6.60619C6.08427 5.55111 6.18638 4.43213 5.81941 2.92875C5.7001 2.43975 6.08635 1.97415 6.58896 2.00112Z" 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_hail_night_24_regular.svg";

Details

Keywords

dailyskysnowwindcloudsunrainmoonlightninghaze