Weather Cloudy icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_weather_cloudy_24_regular.svg" width="24" height="24" alt="Weather Cloudy">

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 7.0089C16.1702 7.0089 17.9677 9.1062 18.2291 11.639L18.3091 11.639C20.3481 11.639 22.0011 13.2878 22.0011 15.3216C22.0011 17.3554 20.3481 19.0041 18.3091 19.0041H7.69432C5.65524 19.0041 4.00224 17.3554 4.00224 15.3216C4.00224 13.2878 5.65524 11.639 7.69435 11.639L7.77429 11.639C8.03723 9.08955 9.83316 7.0089 13.0017 7.0089ZM13.0017 8.50649C10.9304 8.50649 9.12498 10.1397 9.12498 12.3957C9.12498 12.7532 8.80603 13.0337 8.44082 13.0336L7.75026 13.0336C6.48927 13.0336 5.46703 14.0349 5.46703 15.2701C5.46703 16.5052 6.48927 17.5065 7.75026 17.5065H18.2531C19.5141 17.5065 20.5363 16.5052 20.5363 15.2701C20.5363 14.0349 19.5141 13.0336 18.2531 13.0336L17.5626 13.0336C17.1973 13.0337 16.8784 12.7532 16.8784 12.3957C16.8784 10.1108 15.073 8.50649 13.0017 8.50649ZM10 4C11.6167 4 13.0491 4.81514 13.9001 6.06187C13.6099 6.02684 13.3101 6.0089 13.0017 6.0089C12.6075 6.0089 12.2275 6.03798 11.863 6.09426C11.3348 5.71902 10.6898 5.5 10 5.5C8.43321 5.5 7.09808 6.62984 6.83063 8.1563L6.75814 8.57003C6.67432 9.04846 6.25883 9.39747 5.77312 9.39745L5.28207 9.39744C4.29785 9.39744 3.5 10.1953 3.5 11.1795C3.5 11.6701 3.69827 12.1144 4.01905 12.4367C3.70415 12.8375 3.45435 13.2919 3.284 13.7838C2.50363 13.1842 2 12.2407 2 11.1795C2 9.42936 3.36983 7.99918 5.09583 7.90263L5.35314 7.89744C5.74233 5.67611 7.6817 4 10 4Z" 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_cloudy_24_regular.svg";

Details

Keywords

dailyskysnowwindcloudsunrainmoonlightninghaze