umbrella icon

Umbrella: umbrella, insurance, parasol, rain protection. 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="M8 12C8 12.276 8.098 12.512 8.293 12.707C8.488 12.902 8.724 13 9 13C9.209 13 9.4 12.94 9.571 12.821C9.743 12.701 9.865 12.543 9.938 12.347C9.986 12.217 10.072 12.124 10.198 12.066C10.323 12.008 10.451 12.004 10.58 12.051C10.71 12.099 10.803 12.186 10.861 12.311C10.919 12.437 10.924 12.564 10.876 12.694C10.731 13.086 10.486 13.402 10.143 13.641C9.799 13.88 9.418 14 9 14C8.746 14 8.5 13.953 8.264 13.86C8.007 13.758 7.781 13.609 7.586 13.414C7.391 13.219 7.242 12.993 7.14 12.736C7.047 12.5 7 12.254 7 12L7 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 6.673 1.152 5.876 1.456 5.107C1.787 4.273 2.269 3.538 2.904 2.904C3.538 2.269 4.273 1.787 5.107 1.456C5.876 1.152 6.673 1 7.5 1C8.327 1 9.124 1.152 9.893 1.456C10.727 1.787 11.462 2.269 12.096 2.904C12.731 3.538 13.213 4.273 13.544 5.107C13.848 5.876 14 6.673 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L8 8L8 12ZM12.614 5.475C12.334 4.769 11.926 4.148 11.389 3.611C10.852 3.074 10.231 2.666 9.525 2.386C8.874 2.129 8.199 2 7.5 2C6.801 2 6.126 2.129 5.475 2.386C4.769 2.666 4.148 3.074 3.611 3.611C3.074 4.148 2.666 4.769 2.386 5.475C2.191 5.969 2.069 6.478 2.022 7L12.978 7C12.931 6.478 12.809 5.969 12.614 5.475Z"/></svg>

React

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

export function UmbrellaIcon(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="M8 12C8 12.276 8.098 12.512 8.293 12.707C8.488 12.902 8.724 13 9 13C9.209 13 9.4 12.94 9.571 12.821C9.743 12.701 9.865 12.543 9.938 12.347C9.986 12.217 10.072 12.124 10.198 12.066C10.323 12.008 10.451 12.004 10.58 12.051C10.71 12.099 10.803 12.186 10.861 12.311C10.919 12.437 10.924 12.564 10.876 12.694C10.731 13.086 10.486 13.402 10.143 13.641C9.799 13.88 9.418 14 9 14C8.746 14 8.5 13.953 8.264 13.86C8.007 13.758 7.781 13.609 7.586 13.414C7.391 13.219 7.242 12.993 7.14 12.736C7.047 12.5 7 12.254 7 12L7 8L1.5 8C1.359 8 1.241 7.952 1.144 7.856C1.048 7.759 1 7.641 1 7.5C1 6.673 1.152 5.876 1.456 5.107C1.787 4.273 2.269 3.538 2.904 2.904C3.538 2.269 4.273 1.787 5.107 1.456C5.876 1.152 6.673 1 7.5 1C8.327 1 9.124 1.152 9.893 1.456C10.727 1.787 11.462 2.269 12.096 2.904C12.731 3.538 13.213 4.273 13.544 5.107C13.848 5.876 14 6.673 14 7.5C14 7.641 13.952 7.759 13.856 7.856C13.759 7.952 13.641 8 13.5 8L8 8L8 12ZM12.614 5.475C12.334 4.769 11.926 4.148 11.389 3.611C10.852 3.074 10.231 2.666 9.525 2.386C8.874 2.129 8.199 2 7.5 2C6.801 2 6.126 2.129 5.475 2.386C4.769 2.666 4.148 3.074 3.611 3.611C3.074 4.148 2.666 4.769 2.386 5.475C2.191 5.969 2.069 6.478 2.022 7L12.978 7C12.931 6.478 12.809 5.969 12.614 5.475Z" />
    </svg>
  );
}

Vue

Vue: see /icons/umbrella.md

Svelte

Svelte: see /icons/umbrella.md

HTML img

HTML img: see /icons/umbrella.md

CSS

CSS: see /icons/umbrella.md

Data URL

Data URL: see /icons/umbrella.md

Sprite

Sprite: see /icons/umbrella.md

SwiftUI

SwiftUI: see /icons/umbrella.md

Compose

Compose: see /icons/umbrella.md

Android XML

Android XML: see /icons/umbrella.md

Flutter

Flutter: see /icons/umbrella.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.

Meaning

Use it for

umbrella, insurance, parasol, rain protection, insurance policy, insured

Alternatives

beach: a beach or a beach holiday (Material beach_access)
cloud-rain: rain in a forecast

Don’t confuse with

shield: shield owns security and protection; umbrella is the insurance convention

Also fits

home insurance: insurance in general
insurance claim: insurance in general
rain: rain protection or a rainy-day plan

Not for

beach (use beach): rain or insurance; the beach parasol stands in the sand

Tags

umbrella, rain, rainy, weather, insurance, cover, shelter, protection

Category

Weather

Component name

UmbrellaIcon

History

2026-10-14 added

Family 16

air-quality haze hurricane moon moon-star rainbow snowflake sun sun-dim sunrise sunset thermometer

More weather icons

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

For agents

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

umbrella icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp