Weather Haze icon

Use the Weather Haze 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 { WeatherHaze24Regular, WeatherHaze24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M6.8417 13.984C7.3756 13.9091 7.89866 13.912 8.42093 13.985C8.46571 13.9913 8.51049 13.998 8.55526 14.0053C9.8482 14.2154 11.0768 14.8429 12.3781 15.6019C14.7353 16.9769 17.324 16.7041 18.8143 15.6395C19.1514 15.3987 19.6198 15.4768 19.8605 15.8138C20.1013 16.1509 20.0233 16.6193 19.6862 16.8601C17.6765 18.2957 14.4469 18.5452 11.6224 16.8976C10.3328 16.1454 9.31147 15.6479 8.31462 15.4859C7.35766 15.3303 6.36045 15.4759 5.10943 16.1583C4.7458 16.3567 4.29022 16.2227 4.09185 15.8591C3.89349 15.4955 4.02746 15.0399 4.39109 14.8415C5.25243 14.3716 6.0587 14.094 6.8417 13.984ZM8.11305 10.9497C8.11303 10.9497 8.11307 10.9496 8.11305 10.9497C7.60099 10.9053 7.08635 10.9294 6.55958 11.0297C6.55961 11.0295 6.55955 11.0298 6.55958 11.0297C5.86473 11.1621 5.14878 11.4271 4.39024 11.8409C4.02661 12.0393 3.89264 12.4949 4.091 12.8585C4.28937 13.2221 4.74495 13.3561 5.10858 13.1577C6.3596 12.4753 7.35681 12.3297 8.31377 12.4853C9.31062 12.6473 10.332 13.1448 11.6215 13.897C14.4461 15.5446 17.6756 15.2951 19.6854 13.8595C20.0224 13.6187 20.1005 13.1503 19.8597 12.8132C19.6189 12.4762 19.1505 12.3981 18.8135 12.6389C18.4046 12.931 17.9131 13.1634 17.3663 13.3186C17.3663 13.3188 17.3664 13.3184 17.3663 13.3186C16.8581 13.463 16.3024 13.54 15.7209 13.5366C15.7209 13.5365 15.7208 13.5367 15.7209 13.5366C14.6475 13.5303 13.4867 13.2484 12.3773 12.6013C11.076 11.8423 9.84735 11.2148 8.55441 11.0047C8.40736 10.9808 8.26031 10.9624 8.11305 10.9497ZM17.5247 11.9998C17.5247 12.07 17.5234 12.1399 17.5208 12.2094C17.0745 12.3898 16.5537 12.506 15.9899 12.5315C16.0128 12.3575 16.0247 12.18 16.0247 11.9998C16.0247 9.77682 14.2226 7.97477 11.9997 7.97477C10.5097 7.97477 9.20884 8.78436 8.51295 9.98764C7.96068 9.91413 7.41109 9.9083 6.85839 9.97271C7.66671 7.92421 9.66393 6.47477 11.9997 6.47477C15.0511 6.47477 17.5247 8.94839 17.5247 11.9998ZM12.1218 21.9998C12.0808 22.0067 12.0388 22.0103 11.9959 22.0103C11.953 22.0103 11.9109 22.0067 11.87 21.9998H12.1218ZM5.97369 4.94075L5.88957 4.86814C5.59596 4.65028 5.1793 4.67449 4.91303 4.94075C4.62014 5.23365 4.62014 5.70852 4.91303 6.00141L5.97369 7.06207L6.05781 7.13469C6.35142 7.35255 6.76808 7.32834 7.03435 7.06207C7.32724 6.76918 7.32724 6.29431 7.03435 6.00141L5.97369 4.94075ZM19.1509 5.9173C19.3687 5.62368 19.3445 5.20702 19.0782 4.94075C18.7853 4.64786 18.3105 4.64786 18.0176 4.94075L16.9569 6.00141L16.8843 6.08553C16.6664 6.37914 16.6907 6.79581 16.9569 7.06207C17.2498 7.35497 17.7247 7.35497 18.0176 7.06207L19.0782 6.00141L19.1509 5.9173ZM12.7431 2.63749C12.6934 2.27141 12.3796 1.98926 11.9999 1.98926C11.5857 1.98926 11.2499 2.32504 11.2499 2.73926V4.23926L11.2568 4.34103C11.3064 4.7071 11.6202 4.98926 11.9999 4.98926C12.4142 4.98926 12.7499 4.65347 12.7499 4.23926V2.73926L12.7431 2.63749ZM5.10943 19.1583C6.36045 18.4759 7.35766 18.3303 8.31462 18.4859C9.31147 18.6479 10.3328 19.1454 11.6224 19.8976C14.4469 21.5452 17.6765 21.2957 19.6862 19.8601C20.0233 19.6193 20.1013 19.1509 19.8605 18.8138C19.6198 18.4768 19.1514 18.3987 18.8143 18.6395C17.324 19.7041 14.7353 19.9769 12.3781 18.6019C11.0768 17.8429 9.8482 17.2154 8.55526 17.0053C7.22244 16.7887 5.89007 17.0238 4.39109 17.8415C4.02746 18.0399 3.89349 18.4955 4.09185 18.8591C4.29022 19.2227 4.7458 19.3567 5.10943 19.1583Z" 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_haze_24_regular.svg";

Details

Keywords

dailyskysnowwindcloudsunrainmoonlightninghaze