hurricane icon

hurricane-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.

Name: hurricane-thin
Set: Phosphor
Style: Thin
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

hurricane hurricane-bold hurricane-duotone hurricane-fill hurricane-light

The same icon in other sets

hurricaneBootstrap Icons hurricaneCarbon hurricaneFramework7 Icons hurricaneFont Awesome 6 Solid hurricaneFont Awesome Solid hurricaneMaterial Design Icons

Use the hurricane icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 100a28 28 0 1 0 28 28a28 28 0 0 0-28-28m0 48a20 20 0 1 1 20-20a20 20 0 0 1-20 20m25.49-100.06L163.87 9a4 4 0 0 0-4.71-4.94a191.4 191.4 0 0 0-57.32 24.54C64 53 44 87.32 44 128a84.08 84.08 0 0 0 58.51 80.06L92.13 247a4 4 0 0 0 4.71 4.94a191.3 191.3 0 0 0 57.32-24.55C192 203 212 168.68 212 128a84.08 84.08 0 0 0-58.51-80.06M150 220.51a190 190 0 0 1-48.39 21.87l9.61-36a4 4 0 0 0-2.84-4.9A76.06 76.06 0 0 1 52 128c0-38.29 18.16-69.41 54-92.51a190 190 0 0 1 48.39-21.87l-9.61 36a4 4 0 0 0 2.84 4.9A76.06 76.06 0 0 1 204 128c0 38.29-18.16 69.41-54 92.51"/></svg>

React

import type { SVGProps } from "react";

export function PhHurricaneThin(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 100a28 28 0 1 0 28 28a28 28 0 0 0-28-28m0 48a20 20 0 1 1 20-20a20 20 0 0 1-20 20m25.49-100.06L163.87 9a4 4 0 0 0-4.71-4.94a191.4 191.4 0 0 0-57.32 24.54C64 53 44 87.32 44 128a84.08 84.08 0 0 0 58.51 80.06L92.13 247a4 4 0 0 0 4.71 4.94a191.3 191.3 0 0 0 57.32-24.55C192 203 212 168.68 212 128a84.08 84.08 0 0 0-58.51-80.06M150 220.51a190 190 0 0 1-48.39 21.87l9.61-36a4 4 0 0 0-2.84-4.9A76.06 76.06 0 0 1 52 128c0-38.29 18.16-69.41 54-92.51a190 190 0 0 1 48.39-21.87l-9.61 36a4 4 0 0 0 2.84 4.9A76.06 76.06 0 0 1 204 128c0 38.29-18.16 69.41-54 92.51"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M128 100a28 28 0 1 0 28 28a28 28 0 0 0-28-28m0 48a20 20 0 1 1 20-20a20 20 0 0 1-20 20m25.49-100.06L163.87 9a4 4 0 0 0-4.71-4.94a191.4 191.4 0 0 0-57.32 24.54C64 53 44 87.32 44 128a84.08 84.08 0 0 0 58.51 80.06L92.13 247a4 4 0 0 0 4.71 4.94a191.3 191.3 0 0 0 57.32-24.55C192 203 212 168.68 212 128a84.08 84.08 0 0 0-58.51-80.06M150 220.51a190 190 0 0 1-48.39 21.87l9.61-36a4 4 0 0 0-2.84-4.9A76.06 76.06 0 0 1 52 128c0-38.29 18.16-69.41 54-92.51a190 190 0 0 1 48.39-21.87l-9.61 36a4 4 0 0 0 2.84 4.9A76.06 76.06 0 0 1 204 128c0 38.29-18.16 69.41-54 92.51"/></svg>
</template>

CSS

.icon-hurricane-thin {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M128%20100a28%2028%200%201%200%2028%2028a28%2028%200%200%200-28-28m0%2048a20%2020%200%201%201%2020-20a20%2020%200%200%201-20%2020m25.49-100.06L163.87%209a4%204%200%200%200-4.71-4.94a191.4%20191.4%200%200%200-57.32%2024.54C64%2053%2044%2087.32%2044%20128a84.08%2084.08%200%200%200%2058.51%2080.06L92.13%20247a4%204%200%200%200%204.71%204.94a191.3%20191.3%200%200%200%2057.32-24.55C192%20203%20212%20168.68%20212%20128a84.08%2084.08%200%200%200-58.51-80.06M150%20220.51a190%20190%200%200%201-48.39%2021.87l9.61-36a4%204%200%200%200-2.84-4.9A76.06%2076.06%200%200%201%2052%20128c0-38.29%2018.16-69.41%2054-92.51a190%20190%200%200%201%2048.39-21.87l-9.61%2036a4%204%200%200%200%202.84%204.9A76.06%2076.06%200%200%201%20204%20128c0%2038.29-18.16%2069.41-54%2092.51%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M128%20100a28%2028%200%201%200%2028%2028a28%2028%200%200%200-28-28m0%2048a20%2020%200%201%201%2020-20a20%2020%200%200%201-20%2020m25.49-100.06L163.87%209a4%204%200%200%200-4.71-4.94a191.4%20191.4%200%200%200-57.32%2024.54C64%2053%2044%2087.32%2044%20128a84.08%2084.08%200%200%200%2058.51%2080.06L92.13%20247a4%204%200%200%200%204.71%204.94a191.3%20191.3%200%200%200%2057.32-24.55C192%20203%20212%20168.68%20212%20128a84.08%2084.08%200%200%200-58.51-80.06M150%20220.51a190%20190%200%200%201-48.39%2021.87l9.61-36a4%204%200%200%200-2.84-4.9A76.06%2076.06%200%200%201%2052%20128c0-38.29%2018.16-69.41%2054-92.51a190%20190%200%200%201%2048.39-21.87l-9.61%2036a4%204%200%200%200%202.84%204.9A76.06%2076.06%200%200%201%20204%20128c0%2038.29-18.16%2069.41-54%2092.51%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/hurricane-thin.svg?color=%231a73e8&size=48