tornado-line from MingCute Icon by MingCute Design · Line · Apache-2.0 Free for personal and commercial use.

Name
tornado-line
Set
MingCute Icon
Style
Line
Viewbox
24×24
License
Apache 2.0

1 other variant in MingCute Icon

The same icon in other sets

Related icons in MingCute Icon

Use the tornado icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2" d="M18.42 10.803C20.017 10.081 21 9.092 21 8c0-2.21-4.03-4-9-4S3 5.79 3 8c0 1.092.984 2.081 2.58 2.803C7.211 11.542 9.485 12 12 12s4.788-.458 6.42-1.197Zm-1.96 3.51c-1.21.429-2.765.687-4.46.687c-1.345 0-2.601-.163-3.668-.444C6.332 14.028 5 13.08 5 12c0-.425.207-.83.58-1.197m12.84 0c.373.367.58.771.58 1.197c0 .93-.988 1.762-2.54 2.312m-7.153 2.95c.815.456 1.945.738 3.193.738c.434 0 .855-.034 1.252-.098C15.628 17.601 17 16.639 17 15.5c0-.43-.195-.835-.54-1.188m-8.128.244c-.214.291-.332.61-.332.944c0 .687.5 1.31 1.307 1.762m0 0C8.517 17.532 8 17.986 8 18.5c0 .828 1.343 1.5 3 1.5s3-.672 3-1.5c0-.213-.088-.415-.248-.598"/></svg>

React

import type { SVGProps } from "react";

export function MingcuteTornadoLine(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" strokeWidth="2" d="M18.42 10.803C20.017 10.081 21 9.092 21 8c0-2.21-4.03-4-9-4S3 5.79 3 8c0 1.092.984 2.081 2.58 2.803C7.211 11.542 9.485 12 12 12s4.788-.458 6.42-1.197Zm-1.96 3.51c-1.21.429-2.765.687-4.46.687c-1.345 0-2.601-.163-3.668-.444C6.332 14.028 5 13.08 5 12c0-.425.207-.83.58-1.197m12.84 0c.373.367.58.771.58 1.197c0 .93-.988 1.762-2.54 2.312m-7.153 2.95c.815.456 1.945.738 3.193.738c.434 0 .855-.034 1.252-.098C15.628 17.601 17 16.639 17 15.5c0-.43-.195-.835-.54-1.188m-8.128.244c-.214.291-.332.61-.332.944c0 .687.5 1.31 1.307 1.762m0 0C8.517 17.532 8 17.986 8 18.5c0 .828 1.343 1.5 3 1.5s3-.672 3-1.5c0-.213-.088-.415-.248-.598"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2" d="M18.42 10.803C20.017 10.081 21 9.092 21 8c0-2.21-4.03-4-9-4S3 5.79 3 8c0 1.092.984 2.081 2.58 2.803C7.211 11.542 9.485 12 12 12s4.788-.458 6.42-1.197Zm-1.96 3.51c-1.21.429-2.765.687-4.46.687c-1.345 0-2.601-.163-3.668-.444C6.332 14.028 5 13.08 5 12c0-.425.207-.83.58-1.197m12.84 0c.373.367.58.771.58 1.197c0 .93-.988 1.762-2.54 2.312m-7.153 2.95c.815.456 1.945.738 3.193.738c.434 0 .855-.034 1.252-.098C15.628 17.601 17 16.639 17 15.5c0-.43-.195-.835-.54-1.188m-8.128.244c-.214.291-.332.61-.332.944c0 .687.5 1.31 1.307 1.762m0 0C8.517 17.532 8 17.986 8 18.5c0 .828 1.343 1.5 3 1.5s3-.672 3-1.5c0-.213-.088-.415-.248-.598"/></svg>
</template>

CSS

.icon-tornado-line {
  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%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20d%3D%22M18.42%2010.803C20.017%2010.081%2021%209.092%2021%208c0-2.21-4.03-4-9-4S3%205.79%203%208c0%201.092.984%202.081%202.58%202.803C7.211%2011.542%209.485%2012%2012%2012s4.788-.458%206.42-1.197Zm-1.96%203.51c-1.21.429-2.765.687-4.46.687c-1.345%200-2.601-.163-3.668-.444C6.332%2014.028%205%2013.08%205%2012c0-.425.207-.83.58-1.197m12.84%200c.373.367.58.771.58%201.197c0%20.93-.988%201.762-2.54%202.312m-7.153%202.95c.815.456%201.945.738%203.193.738c.434%200%20.855-.034%201.252-.098C15.628%2017.601%2017%2016.639%2017%2015.5c0-.43-.195-.835-.54-1.188m-8.128.244c-.214.291-.332.61-.332.944c0%20.687.5%201.31%201.307%201.762m0%200C8.517%2017.532%208%2017.986%208%2018.5c0%20.828%201.343%201.5%203%201.5s3-.672%203-1.5c0-.213-.088-.415-.248-.598%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%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20d%3D%22M18.42%2010.803C20.017%2010.081%2021%209.092%2021%208c0-2.21-4.03-4-9-4S3%205.79%203%208c0%201.092.984%202.081%202.58%202.803C7.211%2011.542%209.485%2012%2012%2012s4.788-.458%206.42-1.197Zm-1.96%203.51c-1.21.429-2.765.687-4.46.687c-1.345%200-2.601-.163-3.668-.444C6.332%2014.028%205%2013.08%205%2012c0-.425.207-.83.58-1.197m12.84%200c.373.367.58.771.58%201.197c0%20.93-.988%201.762-2.54%202.312m-7.153%202.95c.815.456%201.945.738%203.193.738c.434%200%20.855-.034%201.252-.098C15.628%2017.601%2017%2016.639%2017%2015.5c0-.43-.195-.835-.54-1.188m-8.128.244c-.214.291-.332.61-.332.944c0%20.687.5%201.31%201.307%201.762m0%200C8.517%2017.532%208%2017.986%208%2018.5c0%20.828%201.343%201.5%203%201.5s3-.672%203-1.5c0-.213-.088-.415-.248-.598%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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