cyclone icon
cyclone from Material Symbols Light by Google · Regular · Social · Apache-2.0 Free for personal and commercial use.
- Name
- cyclone
- Set
- Material Symbols Light
- Style
- Regular
- Category
- Social
- Viewbox
- 24×24
- License
- Apache 2.0
- Aliases
- cyclone-outline, cyclone-outline-sharp, cyclone-sharp
1 other variant in Material Symbols Light
The same icon in other sets
More social icons from Material Symbols Light
Use the cyclone icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 15q-1.246 0-2.123-.877T9 12t.877-2.123T12 9t2.123.877T15 12t-.877 2.123T12 15m0-1q.825 0 1.413-.587T14 12t-.587-1.412T12 10t-1.412.588T10 12t.588 1.413T12 14m5.044 7.116q.373-1.362.57-2.712t.263-2.673q-.883 1.454-2.461 2.361Q13.836 19 12 19q-3.862 0-5.751-.232t-3.365-.657v-1.067q1.4.431 2.75.617t2.674.216q-1.377-.748-2.343-2.356Q5 13.913 5 12q0-2.598.251-4.966q.251-2.367.618-4.15h1.068q-.354 1.593-.524 2.856q-.17 1.264-.29 2.568q.806-1.435 2.385-2.372T12 5q3.233 0 5.33.232t3.786.637v1.068q-1.4-.373-2.808-.572t-2.597-.261q1.531.94 2.41 2.529T19 12q0 3.521-.26 5.58q-.261 2.06-.628 3.536zm-.794-4.866Q18 14.5 18 12t-1.75-4.25T12 6T7.75 7.75T6 12t1.75 4.25T12 18t4.25-1.75"/></svg>
React
import type { SVGProps } from "react";
export function MaterialSymbolsLightCyclone(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="M12 15q-1.246 0-2.123-.877T9 12t.877-2.123T12 9t2.123.877T15 12t-.877 2.123T12 15m0-1q.825 0 1.413-.587T14 12t-.587-1.412T12 10t-1.412.588T10 12t.588 1.413T12 14m5.044 7.116q.373-1.362.57-2.712t.263-2.673q-.883 1.454-2.461 2.361Q13.836 19 12 19q-3.862 0-5.751-.232t-3.365-.657v-1.067q1.4.431 2.75.617t2.674.216q-1.377-.748-2.343-2.356Q5 13.913 5 12q0-2.598.251-4.966q.251-2.367.618-4.15h1.068q-.354 1.593-.524 2.856q-.17 1.264-.29 2.568q.806-1.435 2.385-2.372T12 5q3.233 0 5.33.232t3.786.637v1.068q-1.4-.373-2.808-.572t-2.597-.261q1.531.94 2.41 2.529T19 12q0 3.521-.26 5.58q-.261 2.06-.628 3.536zm-.794-4.866Q18 14.5 18 12t-1.75-4.25T12 6T7.75 7.75T6 12t1.75 4.25T12 18t4.25-1.75"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 15q-1.246 0-2.123-.877T9 12t.877-2.123T12 9t2.123.877T15 12t-.877 2.123T12 15m0-1q.825 0 1.413-.587T14 12t-.587-1.412T12 10t-1.412.588T10 12t.588 1.413T12 14m5.044 7.116q.373-1.362.57-2.712t.263-2.673q-.883 1.454-2.461 2.361Q13.836 19 12 19q-3.862 0-5.751-.232t-3.365-.657v-1.067q1.4.431 2.75.617t2.674.216q-1.377-.748-2.343-2.356Q5 13.913 5 12q0-2.598.251-4.966q.251-2.367.618-4.15h1.068q-.354 1.593-.524 2.856q-.17 1.264-.29 2.568q.806-1.435 2.385-2.372T12 5q3.233 0 5.33.232t3.786.637v1.068q-1.4-.373-2.808-.572t-2.597-.261q1.531.94 2.41 2.529T19 12q0 3.521-.26 5.58q-.261 2.06-.628 3.536zm-.794-4.866Q18 14.5 18 12t-1.75-4.25T12 6T7.75 7.75T6 12t1.75 4.25T12 18t4.25-1.75"/></svg> </template>
CSS
.icon-cyclone {
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%22M12%2015q-1.246%200-2.123-.877T9%2012t.877-2.123T12%209t2.123.877T15%2012t-.877%202.123T12%2015m0-1q.825%200%201.413-.587T14%2012t-.587-1.412T12%2010t-1.412.588T10%2012t.588%201.413T12%2014m5.044%207.116q.373-1.362.57-2.712t.263-2.673q-.883%201.454-2.461%202.361Q13.836%2019%2012%2019q-3.862%200-5.751-.232t-3.365-.657v-1.067q1.4.431%202.75.617t2.674.216q-1.377-.748-2.343-2.356Q5%2013.913%205%2012q0-2.598.251-4.966q.251-2.367.618-4.15h1.068q-.354%201.593-.524%202.856q-.17%201.264-.29%202.568q.806-1.435%202.385-2.372T12%205q3.233%200%205.33.232t3.786.637v1.068q-1.4-.373-2.808-.572t-2.597-.261q1.531.94%202.41%202.529T19%2012q0%203.521-.26%205.58q-.261%202.06-.628%203.536zm-.794-4.866Q18%2014.5%2018%2012t-1.75-4.25T12%206T7.75%207.75T6%2012t1.75%204.25T12%2018t4.25-1.75%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%22M12%2015q-1.246%200-2.123-.877T9%2012t.877-2.123T12%209t2.123.877T15%2012t-.877%202.123T12%2015m0-1q.825%200%201.413-.587T14%2012t-.587-1.412T12%2010t-1.412.588T10%2012t.588%201.413T12%2014m5.044%207.116q.373-1.362.57-2.712t.263-2.673q-.883%201.454-2.461%202.361Q13.836%2019%2012%2019q-3.862%200-5.751-.232t-3.365-.657v-1.067q1.4.431%202.75.617t2.674.216q-1.377-.748-2.343-2.356Q5%2013.913%205%2012q0-2.598.251-4.966q.251-2.367.618-4.15h1.068q-.354%201.593-.524%202.856q-.17%201.264-.29%202.568q.806-1.435%202.385-2.372T12%205q3.233%200%205.33.232t3.786.637v1.068q-1.4-.373-2.808-.572t-2.597-.261q1.531.94%202.41%202.529T19%2012q0%203.521-.26%205.58q-.261%202.06-.628%203.536zm-.794-4.866Q18%2014.5%2018%2012t-1.75-4.25T12%206T7.75%207.75T6%2012t1.75%204.25T12%2018t4.25-1.75%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/material-symbols-light/cyclone.svg?color=%231a73e8&size=48
