Weather Partly Cloudy Night icon

Use the Weather Partly Cloudy 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 { WeatherPartlyCloudyNight24Regular, WeatherPartlyCloudyNight24Filled } from "@fluentui/react-icons";

export function Example() {
  return <WeatherPartlyCloudyNight24Regular aria-label="Weather Partly Cloudy Night" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_weather_partly_cloudy_night_24_regular.svg" width="24" height="24" alt="Weather Partly Cloudy 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.0017 8.00891C16.1702 8.00891 17.9677 10.1062 18.2291 12.639L18.3091 12.639C20.3481 12.639 22.0011 14.2878 22.0011 16.3216C22.0011 18.3554 20.3481 20.0041 18.3091 20.0041H7.69432C5.65524 20.0041 4.00224 18.3554 4.00224 16.3216C4.00224 14.2878 5.65524 12.639 7.69435 12.639L7.77429 12.639C8.03723 10.0895 9.83316 8.00891 13.0017 8.00891ZM13.0017 9.50649C10.9304 9.50649 9.12498 11.1397 9.12498 13.3957C9.12498 13.7532 8.80603 14.0337 8.44082 14.0336L7.75026 14.0336C6.48927 14.0336 5.46703 15.0349 5.46703 16.2701C5.46703 17.5052 6.48927 18.5065 7.75026 18.5065H18.2531C19.5141 18.5065 20.5363 17.5052 20.5363 16.2701C20.5363 15.0349 19.5141 14.0336 18.2531 14.0336L17.5626 14.0336C17.1973 14.0337 16.8784 13.7532 16.8784 13.3957C16.8784 11.1108 15.073 9.50649 13.0017 9.50649ZM6.58896 4.00112C7.38399 4.04377 8.15596 4.27289 8.85205 4.67478C9.90661 5.28363 10.6601 6.21368 11.0604 7.27C10.5598 7.41087 10.0973 7.60772 9.67442 7.854C9.39882 7.08892 8.86097 6.41367 8.10132 5.97508C7.90326 5.86073 7.69677 5.76624 7.48406 5.69222C7.64458 7.04385 7.43653 8.20544 6.86158 9.30296L6.74363 9.51599C6.17272 10.4924 5.3117 11.2237 4.02538 11.8204C4.18091 11.9495 4.34805 12.0659 4.5256 12.1684C4.71041 12.2751 4.90078 12.3634 5.09461 12.4339C4.64433 12.7356 4.24981 13.1152 3.9293 13.553C3.87766 13.5269 3.82611 13.4983 3.77485 13.4687C3.11733 13.089 2.55916 12.5736 2.13272 11.9543C1.85323 11.5484 2.03405 10.9878 2.49808 10.8218C4.1405 10.2339 5.02542 9.57237 5.53153 8.60619C6.08427 7.55111 6.18638 6.43213 5.81941 4.92875C5.7001 4.43975 6.08635 3.97415 6.58896 4.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_partly_cloudy_night_24_regular.svg";

Details

Keywords

dailyskysnowwindcloudsunrainmoonlightninghaze