Weather Thunderstorm icon

Use the Weather Thunderstorm 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 { WeatherThunderstorm24Regular, WeatherThunderstorm24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M10.4644 15.748L12.7003 13.2603C12.9772 12.9522 13.4514 12.927 13.7595 13.2039C14.0395 13.4556 14.0859 13.8704 13.884 14.1751L13.8159 14.263L12.7047 15.4994H14.9812C15.5745 15.4994 15.9195 16.1469 15.6263 16.6328L15.5678 16.7167L12.3563 20.7482C12.0982 21.0721 11.6263 21.1256 11.3024 20.8675C11.0078 20.6328 10.9369 20.2215 11.1204 19.9053L11.1831 19.8135L13.4249 16.9994H11.0222C10.4091 16.9994 10.0695 16.3138 10.3992 15.8309L10.4644 15.748L12.7003 13.2603L10.4644 15.748ZM13.0017 5.0089C16.1702 5.0089 17.9677 7.1062 18.2291 9.63903L18.3091 9.63903C20.3481 9.63903 22.0011 11.2878 22.0011 13.3216C22.0011 15.3554 20.3481 17.0041 18.3091 17.0041L16.521 17.0051C16.6652 16.7915 16.7494 16.534 16.7494 16.2569C16.7494 15.9784 16.6644 15.7198 16.5189 15.5056L18.2531 15.5065C19.5141 15.5065 20.5363 14.5052 20.5363 13.2701C20.5363 12.0349 19.5141 11.0336 18.2531 11.0336L17.5626 11.0336C17.1973 11.0337 16.8784 10.7532 16.8784 10.3957C16.8784 8.1108 15.073 6.50649 13.0017 6.50649C10.9304 6.50649 9.12498 8.13974 9.12498 10.3957C9.12498 10.7532 8.80603 11.0337 8.44082 11.0336L7.75026 11.0336C6.48927 11.0336 5.46703 12.0349 5.46703 13.2701C5.46703 14.5052 6.48927 15.5065 7.75026 15.5065L9.51196 15.5056C9.36645 15.7198 9.28141 15.9784 9.28141 16.2569C9.28141 16.534 9.36564 16.7915 9.5099 17.0051L7.69432 17.0041C5.65524 17.0041 4.00224 15.3554 4.00224 13.3216C4.00224 11.2878 5.65524 9.63903 7.69435 9.63903L7.77429 9.63903C8.03723 7.08955 9.83316 5.0089 13.0017 5.0089ZM10 2C11.6167 2 13.0491 2.81514 13.9001 4.06187C13.6099 4.02684 13.3101 4.0089 13.0017 4.0089C12.6075 4.0089 12.2275 4.03798 11.863 4.09426C11.3348 3.71902 10.6898 3.5 10 3.5C8.43321 3.5 7.09808 4.62984 6.83063 6.1563L6.75814 6.57003C6.67432 7.04846 6.25883 7.39747 5.77312 7.39745L5.28207 7.39744C4.29785 7.39744 3.5 8.19529 3.5 9.17949C3.5 9.67011 3.69827 10.1144 4.01905 10.4367C3.70415 10.8375 3.45435 11.2919 3.284 11.7838C2.50363 11.1842 2 10.2407 2 9.17949C2 7.42936 3.36983 5.99918 5.09583 5.90263L5.35314 5.89744C5.74233 3.67611 7.6817 2 10 2Z" 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_thunderstorm_24_regular.svg";

Details

Keywords

dailyskysnowwindcloudsunrainmoonlightninghaze