flood icon

Flood: flood, flooding, flood warning, flash flood. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M3.293 5L6.793 1.5C6.988 1.305 7.224 1.207 7.5 1.207C7.776 1.207 8.012 1.305 8.207 1.5L11.707 5C11.902 5.195 12 5.431 12 5.707L12 9.939C12.154 9.899 12.297 9.839 12.43 9.759C12.543 9.691 12.662 9.602 12.786 9.492C12.867 9.421 12.987 9.306 13.146 9.146C13.246 9.047 13.364 8.997 13.5 8.997C13.636 8.997 13.754 9.047 13.854 9.146C13.953 9.246 14.003 9.364 14.003 9.5C14.003 9.636 13.953 9.754 13.854 9.854C13.68 10.028 13.544 10.157 13.448 10.242C13.278 10.393 13.11 10.517 12.945 10.616C12.518 10.872 12.037 11 11.5 11C10.963 11 10.482 10.872 10.055 10.616C9.89 10.517 9.722 10.393 9.552 10.242C9.456 10.157 9.32 10.028 9.146 9.854C8.987 9.694 8.867 9.579 8.786 9.508C8.662 9.398 8.543 9.309 8.43 9.241C8.162 9.08 7.852 9 7.5 9C7.148 9 6.838 9.08 6.57 9.241C6.457 9.309 6.338 9.398 6.214 9.508C6.133 9.579 6.013 9.694 5.854 9.854C5.68 10.028 5.544 10.157 5.448 10.242C5.278 10.393 5.11 10.517 4.945 10.616C4.518 10.872 4.037 11 3.5 11C2.963 11 2.482 10.872 2.055 10.616C1.89 10.517 1.722 10.393 1.552 10.242C1.456 10.157 1.32 10.028 1.146 9.854C1.047 9.754 0.997 9.636 0.997 9.5C0.997 9.364 1.047 9.246 1.146 9.146C1.244 9.049 1.362 9 1.5 9C1.638 9 1.756 9.049 1.854 9.146C2.013 9.306 2.133 9.421 2.214 9.492C2.338 9.602 2.457 9.691 2.57 9.759C2.703 9.839 2.846 9.899 3 9.939L3 5.707C3 5.431 3.098 5.195 3.293 5ZM7.5 2.207L4 5.707L4 9.939C4.154 9.899 4.297 9.839 4.43 9.759C4.543 9.691 4.662 9.602 4.786 9.492C4.867 9.421 4.987 9.306 5.146 9.146C5.32 8.972 5.456 8.843 5.552 8.758C5.722 8.607 5.89 8.483 6.055 8.384C6.482 8.128 6.963 8 7.5 8C8.037 8 8.518 8.128 8.945 8.384C9.11 8.483 9.278 8.607 9.448 8.758C9.544 8.843 9.68 8.972 9.854 9.146C10.013 9.306 10.133 9.421 10.214 9.492C10.338 9.602 10.457 9.691 10.57 9.759C10.703 9.839 10.846 9.899 11 9.939L11 5.707L7.5 2.207ZM2.214 13.492C2.338 13.602 2.457 13.691 2.57 13.759C2.838 13.92 3.148 14 3.5 14C3.852 14 4.162 13.92 4.43 13.759C4.543 13.691 4.662 13.602 4.786 13.492C4.867 13.421 4.987 13.306 5.146 13.146C5.32 12.972 5.456 12.843 5.552 12.758C5.722 12.607 5.89 12.483 6.055 12.384C6.482 12.128 6.963 12 7.5 12C8.037 12 8.518 12.128 8.945 12.384C9.11 12.483 9.278 12.607 9.448 12.758C9.544 12.843 9.68 12.972 9.854 13.146C10.013 13.306 10.133 13.421 10.214 13.492C10.338 13.602 10.457 13.691 10.57 13.759C10.838 13.92 11.148 14 11.5 14C11.852 14 12.162 13.92 12.43 13.759C12.543 13.691 12.662 13.602 12.786 13.492C12.867 13.421 12.987 13.306 13.146 13.146C13.246 13.047 13.364 12.997 13.5 12.997C13.636 12.997 13.754 13.047 13.854 13.146C13.953 13.246 14.003 13.364 14.003 13.5C14.003 13.636 13.953 13.754 13.854 13.854C13.68 14.028 13.544 14.157 13.448 14.242C13.278 14.393 13.11 14.517 12.945 14.616C12.518 14.872 12.037 15 11.5 15C10.963 15 10.482 14.872 10.055 14.616C9.89 14.517 9.722 14.393 9.552 14.242C9.456 14.157 9.32 14.028 9.146 13.854C8.987 13.694 8.867 13.579 8.786 13.508C8.662 13.398 8.543 13.309 8.43 13.241C8.162 13.08 7.852 13 7.5 13C7.148 13 6.838 13.08 6.57 13.241C6.457 13.309 6.338 13.398 6.214 13.508C6.133 13.579 6.013 13.694 5.854 13.854C5.68 14.028 5.544 14.157 5.448 14.242C5.278 14.393 5.11 14.517 4.945 14.616C4.518 14.872 4.037 15 3.5 15C2.963 15 2.482 14.872 2.055 14.616C1.89 14.517 1.722 14.393 1.552 14.242C1.456 14.157 1.32 14.028 1.146 13.854C1.047 13.754 0.997 13.636 0.997 13.5C0.997 13.364 1.047 13.246 1.146 13.146C1.244 13.049 1.362 13 1.5 13C1.638 13 1.756 13.049 1.854 13.146C2.013 13.306 2.133 13.421 2.214 13.492Z"/></svg>

React

// Gentleface "flood" (line-round), MIT. https://gentleface.com/icons/flood
import type { SVGProps } from 'react';

export function FloodIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M3.293 5L6.793 1.5C6.988 1.305 7.224 1.207 7.5 1.207C7.776 1.207 8.012 1.305 8.207 1.5L11.707 5C11.902 5.195 12 5.431 12 5.707L12 9.939C12.154 9.899 12.297 9.839 12.43 9.759C12.543 9.691 12.662 9.602 12.786 9.492C12.867 9.421 12.987 9.306 13.146 9.146C13.246 9.047 13.364 8.997 13.5 8.997C13.636 8.997 13.754 9.047 13.854 9.146C13.953 9.246 14.003 9.364 14.003 9.5C14.003 9.636 13.953 9.754 13.854 9.854C13.68 10.028 13.544 10.157 13.448 10.242C13.278 10.393 13.11 10.517 12.945 10.616C12.518 10.872 12.037 11 11.5 11C10.963 11 10.482 10.872 10.055 10.616C9.89 10.517 9.722 10.393 9.552 10.242C9.456 10.157 9.32 10.028 9.146 9.854C8.987 9.694 8.867 9.579 8.786 9.508C8.662 9.398 8.543 9.309 8.43 9.241C8.162 9.08 7.852 9 7.5 9C7.148 9 6.838 9.08 6.57 9.241C6.457 9.309 6.338 9.398 6.214 9.508C6.133 9.579 6.013 9.694 5.854 9.854C5.68 10.028 5.544 10.157 5.448 10.242C5.278 10.393 5.11 10.517 4.945 10.616C4.518 10.872 4.037 11 3.5 11C2.963 11 2.482 10.872 2.055 10.616C1.89 10.517 1.722 10.393 1.552 10.242C1.456 10.157 1.32 10.028 1.146 9.854C1.047 9.754 0.997 9.636 0.997 9.5C0.997 9.364 1.047 9.246 1.146 9.146C1.244 9.049 1.362 9 1.5 9C1.638 9 1.756 9.049 1.854 9.146C2.013 9.306 2.133 9.421 2.214 9.492C2.338 9.602 2.457 9.691 2.57 9.759C2.703 9.839 2.846 9.899 3 9.939L3 5.707C3 5.431 3.098 5.195 3.293 5ZM7.5 2.207L4 5.707L4 9.939C4.154 9.899 4.297 9.839 4.43 9.759C4.543 9.691 4.662 9.602 4.786 9.492C4.867 9.421 4.987 9.306 5.146 9.146C5.32 8.972 5.456 8.843 5.552 8.758C5.722 8.607 5.89 8.483 6.055 8.384C6.482 8.128 6.963 8 7.5 8C8.037 8 8.518 8.128 8.945 8.384C9.11 8.483 9.278 8.607 9.448 8.758C9.544 8.843 9.68 8.972 9.854 9.146C10.013 9.306 10.133 9.421 10.214 9.492C10.338 9.602 10.457 9.691 10.57 9.759C10.703 9.839 10.846 9.899 11 9.939L11 5.707L7.5 2.207ZM2.214 13.492C2.338 13.602 2.457 13.691 2.57 13.759C2.838 13.92 3.148 14 3.5 14C3.852 14 4.162 13.92 4.43 13.759C4.543 13.691 4.662 13.602 4.786 13.492C4.867 13.421 4.987 13.306 5.146 13.146C5.32 12.972 5.456 12.843 5.552 12.758C5.722 12.607 5.89 12.483 6.055 12.384C6.482 12.128 6.963 12 7.5 12C8.037 12 8.518 12.128 8.945 12.384C9.11 12.483 9.278 12.607 9.448 12.758C9.544 12.843 9.68 12.972 9.854 13.146C10.013 13.306 10.133 13.421 10.214 13.492C10.338 13.602 10.457 13.691 10.57 13.759C10.838 13.92 11.148 14 11.5 14C11.852 14 12.162 13.92 12.43 13.759C12.543 13.691 12.662 13.602 12.786 13.492C12.867 13.421 12.987 13.306 13.146 13.146C13.246 13.047 13.364 12.997 13.5 12.997C13.636 12.997 13.754 13.047 13.854 13.146C13.953 13.246 14.003 13.364 14.003 13.5C14.003 13.636 13.953 13.754 13.854 13.854C13.68 14.028 13.544 14.157 13.448 14.242C13.278 14.393 13.11 14.517 12.945 14.616C12.518 14.872 12.037 15 11.5 15C10.963 15 10.482 14.872 10.055 14.616C9.89 14.517 9.722 14.393 9.552 14.242C9.456 14.157 9.32 14.028 9.146 13.854C8.987 13.694 8.867 13.579 8.786 13.508C8.662 13.398 8.543 13.309 8.43 13.241C8.162 13.08 7.852 13 7.5 13C7.148 13 6.838 13.08 6.57 13.241C6.457 13.309 6.338 13.398 6.214 13.508C6.133 13.579 6.013 13.694 5.854 13.854C5.68 14.028 5.544 14.157 5.448 14.242C5.278 14.393 5.11 14.517 4.945 14.616C4.518 14.872 4.037 15 3.5 15C2.963 15 2.482 14.872 2.055 14.616C1.89 14.517 1.722 14.393 1.552 14.242C1.456 14.157 1.32 14.028 1.146 13.854C1.047 13.754 0.997 13.636 0.997 13.5C0.997 13.364 1.047 13.246 1.146 13.146C1.244 13.049 1.362 13 1.5 13C1.638 13 1.756 13.049 1.854 13.146C2.013 13.306 2.133 13.421 2.214 13.492Z" />
    </svg>
  );
}

Vue

Vue: see /icons/flood.md

Svelte

Svelte: see /icons/flood.md

HTML img

HTML img: see /icons/flood.md

CSS

CSS: see /icons/flood.md

Data URL

Data URL: see /icons/flood.md

Sprite

Sprite: see /icons/flood.md

SwiftUI

SwiftUI: see /icons/flood.md

Compose

Compose: see /icons/flood.md

Android XML

Android XML: see /icons/flood.md

Flutter

Flutter: see /icons/flood.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

With npm: import { FloodIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

flood, flooding, flood warning, flash flood, flood risk

Alternatives

droplet-alert: a water leak inside a home
tsunami: a tsunami or tidal wave

Also fits

water leak: flooding as a weather hazard
tsunami: flooding

Tags

flood, flooding, flood warning, high water, inundation, rising water, house, waves, natural disaster, hazard, storm surge

Category

Weather

Component name

FloodIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

Family 22

air-quality celsius fahrenheit haze hurricane moon moon-star rainbow snowflake sun sun-dim sun-snow

More weather icons

cloud-drizzle cloud-fog cloud-hail cloud-lightning cloud-moon cloud-moon-rain cloud-rain cloud-rain-heavy cloud-sleet cloud-snow cloud-sun cloud-sun-rain clouds droplet droplet-alert droplet-off · all weather icons

For agents

Metadata: /icons/flood.json · Markdown: /icons/flood.md · SVG: https://gentleface.com/svg/{style}/16/flood.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/flood.png

flood icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp