Weather Duststorm icon

Use the Weather Duststorm 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 { WeatherDuststorm24Regular, WeatherDuststorm24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M5 5.5C5 5.22386 4.77614 5 4.5 5C4.22386 5 4 5.22386 4 5.5C4 5.77614 4.22386 6 4.5 6C4.77614 6 5 5.77614 5 5.5ZM6.5 5.5C6.5 6.60457 5.60457 7.5 4.5 7.5C3.39543 7.5 2.5 6.60457 2.5 5.5C2.5 4.39543 3.39543 3.5 4.5 3.5C5.60457 3.5 6.5 4.39543 6.5 5.5ZM11.9732 4C10.1915 4 8.59184 5.16712 8.07675 6.88407L8.03163 7.03449C7.91261 7.43123 8.13774 7.84935 8.53449 7.96837C8.93123 8.08739 9.34935 7.86226 9.46837 7.46551L9.51349 7.3151C9.83514 6.24293 10.8431 5.5 11.9732 5.5C13.362 5.5 14.5 6.62727 14.5 8.00001C14.5 9.38072 13.3807 10.5 12 10.5H2.75C2.33579 10.5 2 10.8358 2 11.25C2 11.6642 2.33579 12 2.75 12H12C14.2091 12 16 10.2092 16 8.00001C16 5.78289 14.1744 4 11.9732 4ZM19.0706 10C17.8056 10 16.6858 10.8208 16.2885 12.0128C16.1575 12.4058 16.3699 12.8305 16.7628 12.9615C17.1558 13.0925 17.5805 12.8801 17.7115 12.4872C17.9074 11.8996 18.4597 11.5 19.0706 11.5C19.8599 11.5 20.4997 12.1398 20.4997 12.9291V13C20.4997 13.8284 19.8281 14.5 18.9997 14.5H2.75C2.33579 14.5 2 14.8358 2 15.25C2 15.6642 2.33579 16 2.75 16H12.2462L12.25 16H15.25C15.9404 16 16.5 16.5596 16.5 17.25C16.5 17.9404 15.9404 18.5 15.25 18.5H15.1152C14.7153 18.5 14.3497 18.2744 14.1704 17.9169C13.9847 17.5467 13.534 17.3971 13.1637 17.5828C12.7935 17.7686 12.6439 18.2193 12.8296 18.5895C13.2633 19.4541 14.1478 20 15.1152 20H15.25C16.7688 20 18 18.7688 18 17.25C18 16.7999 17.8919 16.375 17.7001 16H18.9997C20.6565 16 21.9997 14.6568 21.9997 13V12.9291C21.9997 11.3114 20.6883 10 19.0706 10ZM9.5 20C9.22386 20 9 19.7761 9 19.5C9 19.2239 9.22386 19 9.5 19C9.77614 19 10 19.2239 10 19.5C10 19.7761 9.77614 20 9.5 20ZM9.5 21.5C10.6046 21.5 11.5 20.6046 11.5 19.5C11.5 18.3954 10.6046 17.5 9.5 17.5C8.39543 17.5 7.5 18.3954 7.5 19.5C7.5 20.6046 8.39543 21.5 9.5 21.5ZM20 6.5C20 6.22386 19.7761 6 19.5 6C19.2239 6 19 6.22386 19 6.5C19 6.77614 19.2239 7 19.5 7C19.7761 7 20 6.77614 20 6.5ZM21.5 6.5C21.5 7.60457 20.6046 8.5 19.5 8.5C18.3954 8.5 17.5 7.60457 17.5 6.5C17.5 5.39543 18.3954 4.5 19.5 4.5C20.6046 4.5 21.5 5.39543 21.5 6.5Z" 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_duststorm_24_regular.svg";

Details

Keywords

dailyskysnowwindcloudsunrainmoonlightninghaze