Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:

Weather Icons · WiFlood

Flood icon

A free flood icon from Weather Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

License: SIL OFL 1.1 license
Project: erikflowers.github.io

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/weather-icons/flood.json

components/icons/weather-icons-flood.tsx

import * as React from "react";

/**
 * Flood from Weather Icons (https://erikflowers.github.io/weather-icons/), SIL OFL 1.1.
 * Via Cuelark UI: ui.cuelark.com/icons/weather-icons/flood. Sized in em, colored by currentColor.
 */
export function WiFloodIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      version="1.1"
      id="Layer_1"
      x="0px"
      y="0px"
      viewBox="0 0 30 30"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M6.72,20.76c0-0.05,0.01-0.12,0.02-0.21v-4.76c0.28,0.49,0.66,0.89,1.15,1.19c0.49,0.3,1.03,0.45,1.61,0.45
	c0.59,0,1.13-0.15,1.62-0.45c0.49-0.3,0.87-0.69,1.15-1.19c0.27,0.49,0.66,0.89,1.15,1.19c0.49,0.3,1.03,0.45,1.62,0.45
	c0.58,0,1.12-0.15,1.61-0.45c0.49-0.3,0.87-0.69,1.15-1.19c0.28,0.49,0.67,0.89,1.15,1.19c0.49,0.3,1.02,0.45,1.6,0.45
	c0.58,0,1.12-0.15,1.61-0.45c0.49-0.3,0.88-0.69,1.15-1.19v4.81c0,0.02,0,0.05,0,0.08c0,0.03,0,0.06,0,0.08c0,0.01,0,0.04,0,0.07
	s0,0.06,0,0.08c-0.03,0.23-0.13,0.43-0.3,0.6c-0.17,0.17-0.37,0.27-0.6,0.3c-0.02,0-0.05,0-0.08,0.01
	c-0.03,0.01-0.06,0.01-0.08,0.01c-0.01,0-0.04,0-0.07-0.01c-0.03-0.01-0.06-0.01-0.08-0.01H7.94c-0.02,0-0.04,0-0.08,0.01
	c-0.03,0.01-0.06,0.01-0.07,0.01c-0.02,0-0.05,0-0.08-0.01c-0.03-0.01-0.06-0.01-0.07-0.01c-0.22-0.03-0.42-0.12-0.58-0.28
	c-0.16-0.16-0.27-0.34-0.32-0.56C6.73,20.88,6.72,20.81,6.72,20.76z M12.23,9.67c0-0.16,0.06-0.3,0.17-0.42l2.21-2.22l0.03-0.02
	c0.01,0,0.01,0,0.01-0.01c0.01,0,0.01,0,0.01-0.01c0.01,0,0.01,0,0.01-0.01h0.01c0.01,0,0.01,0,0.01-0.01s0-0.01,0.01-0.02h0.02
	l0.01-0.01h0.01l0.01-0.01h0.01l0.01-0.01h0.01c0.01-0.01,0.01-0.01,0.02-0.01h0.01c0-0.01,0.01-0.01,0.02-0.01
	c0.01-0.01,0.01-0.01,0.02-0.01l0.04-0.02h0.01c0.01,0,0.01,0,0.01-0.01h0.07l0.01-0.01h0.12c0.01,0,0.01,0,0.02,0.01h0.06
	c0,0.01,0,0.01,0.01,0.01h0.02c0.01,0.01,0.02,0.02,0.03,0.02l0.02,0.01h0.02l0.01,0.01h0.01l0.01,0.01c0.01,0,0.01,0,0.01,0.01
	h0.02c0.01,0,0.01,0,0.01,0c0,0,0,0,0.01,0c0.01,0.01,0.01,0.01,0.02,0.01c0,0.01,0,0.02,0.01,0.02l0.01,0.01h0.02l0.01,0.01
	L15.41,7l0.01,0.01l0.02,0.02l2.22,2.22c0.12,0.12,0.18,0.26,0.18,0.42c0,0.16-0.06,0.3-0.18,0.41c-0.11,0.12-0.25,0.18-0.41,0.18
	c-0.16,0-0.3-0.06-0.41-0.18l-1.23-1.22v6.9c0,0.16-0.06,0.29-0.17,0.4c-0.11,0.11-0.25,0.17-0.41,0.17c-0.16,0-0.3-0.06-0.42-0.17
	c-0.12-0.11-0.17-0.25-0.17-0.4v-6.9l-1.22,1.22c-0.12,0.12-0.26,0.18-0.42,0.18c-0.16,0-0.3-0.06-0.41-0.18
	C12.29,9.97,12.23,9.83,12.23,9.67z"
      />
    </svg>
  );
}

With react-icons

import { WiFlood } from "react-icons/wi";

export function Example() {
  return <WiFlood className="size-5" />;
}

flood.svg

<svg
  version="1.1"
  id="Layer_1"
  x="0px"
  y="0px"
  viewBox="0 0 30 30"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M6.72,20.76c0-0.05,0.01-0.12,0.02-0.21v-4.76c0.28,0.49,0.66,0.89,1.15,1.19c0.49,0.3,1.03,0.45,1.61,0.45
	c0.59,0,1.13-0.15,1.62-0.45c0.49-0.3,0.87-0.69,1.15-1.19c0.27,0.49,0.66,0.89,1.15,1.19c0.49,0.3,1.03,0.45,1.62,0.45
	c0.58,0,1.12-0.15,1.61-0.45c0.49-0.3,0.87-0.69,1.15-1.19c0.28,0.49,0.67,0.89,1.15,1.19c0.49,0.3,1.02,0.45,1.6,0.45
	c0.58,0,1.12-0.15,1.61-0.45c0.49-0.3,0.88-0.69,1.15-1.19v4.81c0,0.02,0,0.05,0,0.08c0,0.03,0,0.06,0,0.08c0,0.01,0,0.04,0,0.07
	s0,0.06,0,0.08c-0.03,0.23-0.13,0.43-0.3,0.6c-0.17,0.17-0.37,0.27-0.6,0.3c-0.02,0-0.05,0-0.08,0.01
	c-0.03,0.01-0.06,0.01-0.08,0.01c-0.01,0-0.04,0-0.07-0.01c-0.03-0.01-0.06-0.01-0.08-0.01H7.94c-0.02,0-0.04,0-0.08,0.01
	c-0.03,0.01-0.06,0.01-0.07,0.01c-0.02,0-0.05,0-0.08-0.01c-0.03-0.01-0.06-0.01-0.07-0.01c-0.22-0.03-0.42-0.12-0.58-0.28
	c-0.16-0.16-0.27-0.34-0.32-0.56C6.73,20.88,6.72,20.81,6.72,20.76z M12.23,9.67c0-0.16,0.06-0.3,0.17-0.42l2.21-2.22l0.03-0.02
	c0.01,0,0.01,0,0.01-0.01c0.01,0,0.01,0,0.01-0.01c0.01,0,0.01,0,0.01-0.01h0.01c0.01,0,0.01,0,0.01-0.01s0-0.01,0.01-0.02h0.02
	l0.01-0.01h0.01l0.01-0.01h0.01l0.01-0.01h0.01c0.01-0.01,0.01-0.01,0.02-0.01h0.01c0-0.01,0.01-0.01,0.02-0.01
	c0.01-0.01,0.01-0.01,0.02-0.01l0.04-0.02h0.01c0.01,0,0.01,0,0.01-0.01h0.07l0.01-0.01h0.12c0.01,0,0.01,0,0.02,0.01h0.06
	c0,0.01,0,0.01,0.01,0.01h0.02c0.01,0.01,0.02,0.02,0.03,0.02l0.02,0.01h0.02l0.01,0.01h0.01l0.01,0.01c0.01,0,0.01,0,0.01,0.01
	h0.02c0.01,0,0.01,0,0.01,0c0,0,0,0,0.01,0c0.01,0.01,0.01,0.01,0.02,0.01c0,0.01,0,0.02,0.01,0.02l0.01,0.01h0.02l0.01,0.01
	L15.41,7l0.01,0.01l0.02,0.02l2.22,2.22c0.12,0.12,0.18,0.26,0.18,0.42c0,0.16-0.06,0.3-0.18,0.41c-0.11,0.12-0.25,0.18-0.41,0.18
	c-0.16,0-0.3-0.06-0.41-0.18l-1.23-1.22v6.9c0,0.16-0.06,0.29-0.17,0.4c-0.11,0.11-0.25,0.17-0.41,0.17c-0.16,0-0.3-0.06-0.42-0.17
	c-0.12-0.11-0.17-0.25-0.17-0.4v-6.9l-1.22,1.22c-0.12,0.12-0.26,0.18-0.42,0.18c-0.16,0-0.3-0.06-0.41-0.18
	C12.29,9.97,12.23,9.83,12.23,9.67z"
  />
</svg>

Attribution

"Flood" icon from Weather Icons (https://erikflowers.github.io/weather-icons/), licensed under SIL OFL 1.1 license.

Flood icon in other sets

Similar Weather Icons icons