Weather Sunny High icon

Use the Weather Sunny High 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 { WeatherSunnyHigh24Regular, WeatherSunnyHigh24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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 2C12.4142 2 12.75 2.33579 12.75 2.75V3.25C12.75 3.66421 12.4142 4 12 4C11.5858 4 11.25 3.66421 11.25 3.25V2.75C11.25 2.33579 11.5858 2 12 2ZM12 5C9.79086 5 8 6.79086 8 9C8 11.2091 9.79086 13 12 13C14.2091 13 16 11.2091 16 9C16 6.79086 14.2091 5 12 5ZM9.5 9C9.5 7.61929 10.6193 6.5 12 6.5C13.3807 6.5 14.5 7.61929 14.5 9C14.5 10.3807 13.3807 11.5 12 11.5C10.6193 11.5 9.5 10.3807 9.5 9ZM12.75 14.75C12.75 14.3358 12.4142 14 12 14C11.5858 14 11.25 14.3358 11.25 14.75V15.25C11.25 15.6642 11.5858 16 12 16C12.4142 16 12.75 15.6642 12.75 15.25V14.75ZM5.75 8C5.33579 8 5 8.33579 5 8.75C5 9.16421 5.33579 9.5 5.75 9.5H6.25C6.66421 9.5 7 9.16421 7 8.75C7 8.33579 6.66421 8 6.25 8H5.75ZM17 8.75C17 8.33579 17.3358 8 17.75 8H18.25C18.6642 8 19 8.33579 19 8.75C19 9.16421 18.6642 9.5 18.25 9.5H17.75C17.3358 9.5 17 9.16421 17 8.75ZM6.71967 5.78034C7.01256 6.07323 7.48744 6.07323 7.78033 5.78034C8.07322 5.48745 8.07322 5.01257 7.78033 4.71968L7.28033 4.21968C6.98744 3.92679 6.51256 3.92679 6.21967 4.21968C5.92678 4.51257 5.92678 4.98745 6.21967 5.28034L6.71967 5.78034ZM7.78033 12.2197C7.48744 11.9268 7.01256 11.9268 6.71967 12.2197L6.21967 12.7197C5.92678 13.0126 5.92678 13.4874 6.21967 13.7803C6.51256 14.0732 6.98744 14.0732 7.28033 13.7803L7.78033 13.2803C8.07322 12.9874 8.07322 12.5126 7.78033 12.2197ZM17.2803 5.78034C16.9874 6.07323 16.5126 6.07323 16.2197 5.78034C15.9268 5.48745 15.9268 5.01257 16.2197 4.71968L16.7197 4.21968C17.0126 3.92679 17.4874 3.92679 17.7803 4.21968C18.0732 4.51257 18.0732 4.98745 17.7803 5.28034L17.2803 5.78034ZM16.2197 12.2197C16.5126 11.9268 16.9874 11.9268 17.2803 12.2197L17.7803 12.7197C18.0732 13.0126 18.0732 13.4874 17.7803 13.7803C17.4874 14.0732 17.0126 14.0732 16.7197 13.7803L16.2197 13.2803C15.9268 12.9874 15.9268 12.5126 16.2197 12.2197ZM3.21824 21.8359C2.89481 22.0944 2.4231 22.0418 2.16444 21.7185C1.75623 21.2084 2.28256 20.6636 2.28256 20.6636L2.2839 20.6625L2.29919 20.6505C2.30873 20.643 2.32192 20.6328 2.33871 20.62C2.37228 20.5944 2.42023 20.5584 2.48208 20.5136C2.60575 20.4241 2.78516 20.299 3.0164 20.1504C3.47855 19.8533 4.14967 19.4607 4.9983 19.069C6.69334 18.2867 9.11404 17.5 12.0001 17.5C14.8861 17.5 17.3068 18.2867 19.0019 19.069C19.8505 19.4607 20.5216 19.8533 20.9838 20.1504C21.215 20.299 21.3944 20.4241 21.5181 20.5136C21.5799 20.5584 21.6279 20.5944 21.6615 20.62C21.6783 20.6328 21.6915 20.643 21.701 20.6505L21.7126 20.6595L21.7163 20.6625L21.7186 20.6643C22.0421 20.9231 22.0945 21.3951 21.8357 21.7185C21.5771 22.0418 21.105 22.0941 20.7816 21.8357L20.7773 21.8323L20.7518 21.8127C20.7277 21.7943 20.6898 21.7658 20.6383 21.7285C20.5354 21.654 20.3789 21.5447 20.1726 21.4121C19.7598 21.1467 19.1497 20.7893 18.3733 20.431C16.8183 19.7133 14.614 19 12.0001 19C9.38614 19 7.18184 19.7133 5.62688 20.431C4.85051 20.7893 4.24038 21.1467 3.82753 21.4121C3.62127 21.5447 3.46474 21.654 3.36185 21.7285C3.31041 21.7658 3.27243 21.7943 3.24838 21.8127L3.22284 21.8323L3.21824 21.8359Z" 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_high_24_regular.svg";

Details

Keywords

dailyskysnowwindcloudsunrainmoonlightninghaze