landslide icon

Landslide: landslide, rockslide, mudslide. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Animated landslide-tumble · line-round

The hill shudders and the rocks come loose: the one at the foot hops off to the right, the boulder tumbles down the face and bounces out, the chip follows it. New rocks then fall from above and land in their places.

Download SVG

Native SVG animation, with no CSS or script. It loops by itself. Inline it to take the text color: in an <img> it draws black. To play it once on hover or click, run 0.2 s to 3.05 s. Examples and helper.

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="M14.856 14.144C14.952 14.241 15 14.359 15 14.5C15 14.641 14.952 14.759 14.856 14.856C14.759 14.952 14.641 15 14.5 15L2 15C1.724 15 1.488 14.902 1.293 14.707C1.098 14.512 1 14.276 1 14L1 4.5C1 4.399 1.028 4.307 1.084 4.223C1.6 3.449 2.15 2.879 2.735 2.514C3.283 2.171 3.871 2 4.5 2C4.616 2 4.719 2.035 4.809 2.105C4.898 2.175 4.957 2.266 4.985 2.379C5.25 3.437 5.589 4.486 6.004 5.526C6.472 6.701 7.009 7.794 7.616 8.805C8.296 9.939 9.042 10.933 9.855 11.789C10.72 12.7 11.645 13.437 12.631 14L14.5 14C14.641 14 14.759 14.048 14.856 14.144ZM7 3L8 2L9 2L9 3L8.854 3.146L8.854 3.146L8 4L7 3ZM10.148 3.926L10.149 3.925L12 3L12.854 3.854L12.854 3.854L13 4L13 6L12.138 7.724L12.138 7.724L12 8L10 8L9.112 6.224L9.112 6.223L9 6L9.111 5.777L9.112 5.776L10 4L10.148 3.926ZM9.13 12.477C8.267 11.569 7.477 10.516 6.759 9.32C6.124 8.262 5.563 7.121 5.075 5.896C4.697 4.949 4.379 3.994 4.121 3.031C3.823 3.081 3.537 3.191 3.265 3.361C2.832 3.632 2.41 4.063 2 4.654L2 14L10.823 14C10.235 13.555 9.671 13.047 9.13 12.477ZM13 9L14.5 9L14.923 10.268L14.923 10.269L15 10.5L14 12L12.5 12L12.362 11.725L12.362 11.724L12 11L12.862 9.276L12.862 9.276L13 9Z"/></svg>

React

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

export function LandslideIcon(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="M14.856 14.144C14.952 14.241 15 14.359 15 14.5C15 14.641 14.952 14.759 14.856 14.856C14.759 14.952 14.641 15 14.5 15L2 15C1.724 15 1.488 14.902 1.293 14.707C1.098 14.512 1 14.276 1 14L1 4.5C1 4.399 1.028 4.307 1.084 4.223C1.6 3.449 2.15 2.879 2.735 2.514C3.283 2.171 3.871 2 4.5 2C4.616 2 4.719 2.035 4.809 2.105C4.898 2.175 4.957 2.266 4.985 2.379C5.25 3.437 5.589 4.486 6.004 5.526C6.472 6.701 7.009 7.794 7.616 8.805C8.296 9.939 9.042 10.933 9.855 11.789C10.72 12.7 11.645 13.437 12.631 14L14.5 14C14.641 14 14.759 14.048 14.856 14.144ZM7 3L8 2L9 2L9 3L8.854 3.146L8.854 3.146L8 4L7 3ZM10.148 3.926L10.149 3.925L12 3L12.854 3.854L12.854 3.854L13 4L13 6L12.138 7.724L12.138 7.724L12 8L10 8L9.112 6.224L9.112 6.223L9 6L9.111 5.777L9.112 5.776L10 4L10.148 3.926ZM9.13 12.477C8.267 11.569 7.477 10.516 6.759 9.32C6.124 8.262 5.563 7.121 5.075 5.896C4.697 4.949 4.379 3.994 4.121 3.031C3.823 3.081 3.537 3.191 3.265 3.361C2.832 3.632 2.41 4.063 2 4.654L2 14L10.823 14C10.235 13.555 9.671 13.047 9.13 12.477ZM13 9L14.5 9L14.923 10.268L14.923 10.269L15 10.5L14 12L12.5 12L12.362 11.725L12.362 11.724L12 11L12.862 9.276L12.862 9.276L13 9Z" />
    </svg>
  );
}

Vue

Vue: see /icons/landslide.md

Svelte

Svelte: see /icons/landslide.md

HTML img

HTML img: see /icons/landslide.md

CSS

CSS: see /icons/landslide.md

Data URL

Data URL: see /icons/landslide.md

Sprite

Sprite: see /icons/landslide.md

SwiftUI

SwiftUI: see /icons/landslide.md

Compose

Compose: see /icons/landslide.md

Android XML

Android XML: see /icons/landslide.md

Flutter

Flutter: see /icons/landslide.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. 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 { LandslideIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

landslide, rockslide, mudslide

Tags

landslide, rockslide, mudslide, rockfall, slope, boulders, falling rocks, natural disaster, hazard, geology

Category

Weather

Component name

LandslideIcon

History

2026-11-06 20 px drawn, 24 px drawn, added, released in 0.4.0

Since

version 0.4.0

Family 50

air-quality avalanche celsius earthquake eclipse fahrenheit flood haze hurricane moon moon-off moon-star

More weather icons

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

For agents

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

landslide icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp