---
title: "Umbrella animated icon"
description: "Umbrella animated icon (Weather). Rain lands on the umbrella and it shields. Light: a raindrop falls onto the left shoulder of the canopy, then one onto the right; each vanishes on contact and the rigid umbrella takes the hit, dipping and tipping toward that side, then rocks back and settles. Strong: a heavier shower: two drops land on each side in turn and the umbrella rocks under four decaying hits before it settles."
canonical: https://generativeicons.com/icons/umbrella/
---

# Umbrella animated icon

Rain lands on the umbrella and it shields. Light: a raindrop falls onto the left shoulder of the canopy, then one onto the right; each vanishes on contact and the rigid umbrella takes the hit, dipping and tipping toward that side, then rocks back and settles. Strong: a heavier shower: two drops land on each side in turn and the umbrella rocks under four decaying hits before it settles.

- Id: `umbrella`
- Category: Weather
- Search terms: rainy day, rain protection, rain gear, brolly, keep dry, waterproof, shelter, insurance, coverage
- One action, back to rest
- Styles: outline, solid, duotone; outline weights 1.5, 2, 2.5 (any from 1 to 3); motion light or strong
- File: https://generativeicons.com/assets/umbrella.lottie (dotLottie, 4007 bytes, sha256 693b54e8f8791e914bf4ec448d63235b542d50e75b32816fd283634b7f45238e)
- License: MIT

## Install

```sh
npm install @lottiefiles/generative-icons-runtime
npx generative-icons init
npx generative-icons add umbrella
```

## React

```tsx
// npm install @lottiefiles/generative-icons-react
'use client';
import { AnimatedIcon } from '@lottiefiles/generative-icons-react';
import icon, { src } from './generative-icons/umbrella.mjs';

export function UmbrellaIcon() {
  return <AnimatedIcon icon={icon} src={src} size={32}
    color="#ffffff" variant="outline" weight={2}
    motion="light" theme="dark" />;
}
```

## JavaScript

```js
import { createIcon } from '@lottiefiles/generative-icons-runtime';
import icon, { src } from './generative-icons/umbrella.mjs';

const handle = await createIcon(canvas, {
  icon, src,
  color: '#ffffff', style: 'outline', weight: 2,
  motion: 'light', theme: 'dark'
});
button.addEventListener('click', () => handle.play());
// On removal: handle.destroy();
```

More: https://generativeicons.com/icons/umbrella/ · https://generativeicons.com/api/icons/umbrella