thunderstorm icon
thunderstorm-fill from MingCute Icon by MingCute Design · Fill · Apache-2.0 Free for personal and commercial use.
- Name
- thunderstorm-fill
- Set
- MingCute Icon
- Style
- Fill
- Viewbox
- 24×24
- License
- Apache 2.0
1 other variant in MingCute Icon
The same icon in other sets
Use the thunderstorm icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5 8.416a6.5 6.5 0 0 1 12.586-2.204a6.002 6.002 0 0 1 2.001 10.598a3 3 0 0 0 .052-.172l.259-.966a3 3 0 0 0-4.994-2.924a3 3 0 0 0-5.51-.737l-.305.537a3 3 0 0 0-4.767 1.571l-.259.966a3 3 0 0 0 0 1.553a3 3 0 0 0-.217.242A5 5 0 0 1 5 8.417"/><path fill="currentColor" d="M12.496 12.632a1 1 0 0 1 .372 1.364L11.723 16h1.105a1.1 1.1 0 0 1 .955 1.646l-1.915 3.35a1 1 0 0 1-1.736-.992L11.277 18h-1.105a1.1 1.1 0 0 1-.955-1.646l1.915-3.35a1 1 0 0 1 1.364-.372m5.47 2.523a1 1 0 1 0-1.932-.518l-.259.966a1 1 0 0 0 1.932.518zm-1.036 3.863a1 1 0 1 0-1.93-.517l-.26.966a1 1 0 1 0 1.933.517zm-8.744-3.863a1 1 0 1 0-1.932-.518l-.259.966a1 1 0 0 0 1.932.518zM7.15 19.018a1 1 0 1 0-1.931-.517l-.26.966a1 1 0 0 0 1.933.517z"/></svg>
React
import type { SVGProps } from "react";
export function MingcuteThunderstormFill(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5 8.416a6.5 6.5 0 0 1 12.586-2.204a6.002 6.002 0 0 1 2.001 10.598a3 3 0 0 0 .052-.172l.259-.966a3 3 0 0 0-4.994-2.924a3 3 0 0 0-5.51-.737l-.305.537a3 3 0 0 0-4.767 1.571l-.259.966a3 3 0 0 0 0 1.553a3 3 0 0 0-.217.242A5 5 0 0 1 5 8.417"/><path fill="currentColor" d="M12.496 12.632a1 1 0 0 1 .372 1.364L11.723 16h1.105a1.1 1.1 0 0 1 .955 1.646l-1.915 3.35a1 1 0 0 1-1.736-.992L11.277 18h-1.105a1.1 1.1 0 0 1-.955-1.646l1.915-3.35a1 1 0 0 1 1.364-.372m5.47 2.523a1 1 0 1 0-1.932-.518l-.259.966a1 1 0 0 0 1.932.518zm-1.036 3.863a1 1 0 1 0-1.93-.517l-.26.966a1 1 0 1 0 1.933.517zm-8.744-3.863a1 1 0 1 0-1.932-.518l-.259.966a1 1 0 0 0 1.932.518zM7.15 19.018a1 1 0 1 0-1.931-.517l-.26.966a1 1 0 0 0 1.933.517z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5 8.416a6.5 6.5 0 0 1 12.586-2.204a6.002 6.002 0 0 1 2.001 10.598a3 3 0 0 0 .052-.172l.259-.966a3 3 0 0 0-4.994-2.924a3 3 0 0 0-5.51-.737l-.305.537a3 3 0 0 0-4.767 1.571l-.259.966a3 3 0 0 0 0 1.553a3 3 0 0 0-.217.242A5 5 0 0 1 5 8.417"/><path fill="currentColor" d="M12.496 12.632a1 1 0 0 1 .372 1.364L11.723 16h1.105a1.1 1.1 0 0 1 .955 1.646l-1.915 3.35a1 1 0 0 1-1.736-.992L11.277 18h-1.105a1.1 1.1 0 0 1-.955-1.646l1.915-3.35a1 1 0 0 1 1.364-.372m5.47 2.523a1 1 0 1 0-1.932-.518l-.259.966a1 1 0 0 0 1.932.518zm-1.036 3.863a1 1 0 1 0-1.93-.517l-.26.966a1 1 0 1 0 1.933.517zm-8.744-3.863a1 1 0 1 0-1.932-.518l-.259.966a1 1 0 0 0 1.932.518zM7.15 19.018a1 1 0 1 0-1.931-.517l-.26.966a1 1 0 0 0 1.933.517z"/></svg> </template>
CSS
.icon-thunderstorm-fill {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M5%208.416a6.5%206.5%200%200%201%2012.586-2.204a6.002%206.002%200%200%201%202.001%2010.598a3%203%200%200%200%20.052-.172l.259-.966a3%203%200%200%200-4.994-2.924a3%203%200%200%200-5.51-.737l-.305.537a3%203%200%200%200-4.767%201.571l-.259.966a3%203%200%200%200%200%201.553a3%203%200%200%200-.217.242A5%205%200%200%201%205%208.417%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12.496%2012.632a1%201%200%200%201%20.372%201.364L11.723%2016h1.105a1.1%201.1%200%200%201%20.955%201.646l-1.915%203.35a1%201%200%200%201-1.736-.992L11.277%2018h-1.105a1.1%201.1%200%200%201-.955-1.646l1.915-3.35a1%201%200%200%201%201.364-.372m5.47%202.523a1%201%200%201%200-1.932-.518l-.259.966a1%201%200%200%200%201.932.518zm-1.036%203.863a1%201%200%201%200-1.93-.517l-.26.966a1%201%200%201%200%201.933.517zm-8.744-3.863a1%201%200%201%200-1.932-.518l-.259.966a1%201%200%200%200%201.932.518zM7.15%2019.018a1%201%200%201%200-1.931-.517l-.26.966a1%201%200%200%200%201.933.517z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M5%208.416a6.5%206.5%200%200%201%2012.586-2.204a6.002%206.002%200%200%201%202.001%2010.598a3%203%200%200%200%20.052-.172l.259-.966a3%203%200%200%200-4.994-2.924a3%203%200%200%200-5.51-.737l-.305.537a3%203%200%200%200-4.767%201.571l-.259.966a3%203%200%200%200%200%201.553a3%203%200%200%200-.217.242A5%205%200%200%201%205%208.417%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12.496%2012.632a1%201%200%200%201%20.372%201.364L11.723%2016h1.105a1.1%201.1%200%200%201%20.955%201.646l-1.915%203.35a1%201%200%200%201-1.736-.992L11.277%2018h-1.105a1.1%201.1%200%200%201-.955-1.646l1.915-3.35a1%201%200%200%201%201.364-.372m5.47%202.523a1%201%200%201%200-1.932-.518l-.259.966a1%201%200%200%200%201.932.518zm-1.036%203.863a1%201%200%201%200-1.93-.517l-.26.966a1%201%200%201%200%201.933.517zm-8.744-3.863a1%201%200%201%200-1.932-.518l-.259.966a1%201%200%200%200%201.932.518zM7.15%2019.018a1%201%200%201%200-1.931-.517l-.26.966a1%201%200%200%200%201.933.517z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mingcute/thunderstorm-fill.svg?color=%231a73e8&size=48
