Weather Sunny Low icon

Use the Weather Sunny Low 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 { WeatherSunnyLow24Regular, WeatherSunnyLow24Filled } from "@fluentui/react-icons";

export function Example() {
  return <WeatherSunnyLow24Regular aria-label="Weather Sunny Low" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_weather_sunny_low_24_regular.svg" width="24" height="24" alt="Weather Sunny Low">

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="M12.75 2.75C12.75 2.33579 12.4142 2 12 2C11.5858 2 11.25 2.33579 11.25 2.75V4.25C11.25 4.66421 11.5858 5 12 5C12.4142 5 12.75 4.66421 12.75 4.25V2.75ZM19.0303 4.96966C19.3232 5.26255 19.3232 5.73743 19.0303 6.03032L17.9697 7.09098C17.6768 7.38387 17.2019 7.38387 16.909 7.09098C16.6161 6.79809 16.6161 6.32321 16.909 6.03032L17.9697 4.96966C18.2626 4.67677 18.7374 4.67677 19.0303 4.96966ZM17.4093 13C17.4689 12.6757 17.5 12.3415 17.5 12C17.5 8.96243 15.0376 6.5 12 6.5C8.96243 6.5 6.5 8.96243 6.5 12C6.5 12.3415 6.53112 12.6757 6.59069 13H2.75C2.33579 13 2 13.3358 2 13.75C2 14.1642 2.33579 14.5 2.75 14.5H21.25C21.6642 14.5 22 14.1642 22 13.75C22 13.3358 21.6642 13 21.25 13H17.4093ZM12 8C14.2091 8 16 9.79086 16 12C16 12.3453 15.9562 12.6804 15.874 13H8.12602C8.04375 12.6804 8 12.3453 8 12C8 9.79086 9.79086 8 12 8ZM6 16.75C6 16.3358 6.33579 16 6.75 16H17.25C17.6642 16 18 16.3358 18 16.75C18 17.1642 17.6642 17.5 17.25 17.5H6.75C6.33579 17.5 6 17.1642 6 16.75ZM10 19.75C10 19.3358 10.3358 19 10.75 19H13.25C13.6642 19 14 19.3358 14 19.75C14 20.1642 13.6642 20.5 13.25 20.5H10.75C10.3358 20.5 10 20.1642 10 19.75ZM4.96978 4.96967C5.26268 4.67678 5.73755 4.67678 6.03044 4.96967L7.0911 6.03033C7.384 6.32322 7.384 6.7981 7.0911 7.09099C6.79821 7.38388 6.32334 7.38388 6.03044 7.09099L4.96978 6.03033C4.67689 5.73744 4.67689 5.26256 4.96978 4.96967Z" 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_sunny_low_24_regular.svg";

Details

Keywords

dailyskysnowwindcloudsunrainmoonlightninghaze