umbrella icon
umbrella from Phosphor by Phosphor Icons · Regular · MIT Free for personal and commercial use.
- Name
- umbrella
- Set
- Phosphor
- Style
- Regular
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
umbrellaAkar IconsumbrellaBootstrap IconsumbrellaCarbonumbrellaEmoji One (Colored)umbrella-fillEva IconsumbrellaFramework7 IconsumbrellaFont Awesome 6 SolidumbrellaFeather Iconsumbrella-20-filledFluent UI System IconsumbrellaFluent EmojiumbrellaFluent Emoji FlatumbrellaFluent Emoji High Contrastumbrellacss.ggumbrellaHuge IconsumbrellaIconoirumbrellaIonIconsumbrellaJam IconsumbrellaLine AwesomeumbrellaLucideumbrellaMajesticonsumbrellaMaterial SymbolsumbrellaMaterial Design Iconsumbrella-fillMingCute IconumbrellaNoto Emoji
Related icons in Phosphor
Use the umbrella icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M240 126.63A112.44 112.44 0 0 0 51.75 53.75a111.56 111.56 0 0 0-35.7 72.88A16 16 0 0 0 32 144h88v56a32 32 0 0 0 64 0a8 8 0 0 0-16 0a16 16 0 0 1-32 0v-56h88a16 16 0 0 0 16-17.37M32 128a96.15 96.15 0 0 1 76.2-85.89C96.48 58 81.85 86.11 80.17 128Zm64.15 0c1.39-30.77 10.53-52.81 18.3-66.24A106.4 106.4 0 0 1 128 43.16a106.3 106.3 0 0 1 13.52 18.6C154.8 84.7 159 109.28 159.82 128Zm79.65 0c-1.68-41.89-16.31-70-28-85.94A96.07 96.07 0 0 1 224 128Z"/></svg>
React
import type { SVGProps } from "react";
export function PhUmbrella(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M240 126.63A112.44 112.44 0 0 0 51.75 53.75a111.56 111.56 0 0 0-35.7 72.88A16 16 0 0 0 32 144h88v56a32 32 0 0 0 64 0a8 8 0 0 0-16 0a16 16 0 0 1-32 0v-56h88a16 16 0 0 0 16-17.37M32 128a96.15 96.15 0 0 1 76.2-85.89C96.48 58 81.85 86.11 80.17 128Zm64.15 0c1.39-30.77 10.53-52.81 18.3-66.24A106.4 106.4 0 0 1 128 43.16a106.3 106.3 0 0 1 13.52 18.6C154.8 84.7 159 109.28 159.82 128Zm79.65 0c-1.68-41.89-16.31-70-28-85.94A96.07 96.07 0 0 1 224 128Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M240 126.63A112.44 112.44 0 0 0 51.75 53.75a111.56 111.56 0 0 0-35.7 72.88A16 16 0 0 0 32 144h88v56a32 32 0 0 0 64 0a8 8 0 0 0-16 0a16 16 0 0 1-32 0v-56h88a16 16 0 0 0 16-17.37M32 128a96.15 96.15 0 0 1 76.2-85.89C96.48 58 81.85 86.11 80.17 128Zm64.15 0c1.39-30.77 10.53-52.81 18.3-66.24A106.4 106.4 0 0 1 128 43.16a106.3 106.3 0 0 1 13.52 18.6C154.8 84.7 159 109.28 159.82 128Zm79.65 0c-1.68-41.89-16.31-70-28-85.94A96.07 96.07 0 0 1 224 128Z"/></svg> </template>
CSS
.icon-umbrella {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M240%20126.63A112.44%20112.44%200%200%200%2051.75%2053.75a111.56%20111.56%200%200%200-35.7%2072.88A16%2016%200%200%200%2032%20144h88v56a32%2032%200%200%200%2064%200a8%208%200%200%200-16%200a16%2016%200%200%201-32%200v-56h88a16%2016%200%200%200%2016-17.37M32%20128a96.15%2096.15%200%200%201%2076.2-85.89C96.48%2058%2081.85%2086.11%2080.17%20128Zm64.15%200c1.39-30.77%2010.53-52.81%2018.3-66.24A106.4%20106.4%200%200%201%20128%2043.16a106.3%20106.3%200%200%201%2013.52%2018.6C154.8%2084.7%20159%20109.28%20159.82%20128Zm79.65%200c-1.68-41.89-16.31-70-28-85.94A96.07%2096.07%200%200%201%20224%20128Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M240%20126.63A112.44%20112.44%200%200%200%2051.75%2053.75a111.56%20111.56%200%200%200-35.7%2072.88A16%2016%200%200%200%2032%20144h88v56a32%2032%200%200%200%2064%200a8%208%200%200%200-16%200a16%2016%200%200%201-32%200v-56h88a16%2016%200%200%200%2016-17.37M32%20128a96.15%2096.15%200%200%201%2076.2-85.89C96.48%2058%2081.85%2086.11%2080.17%20128Zm64.15%200c1.39-30.77%2010.53-52.81%2018.3-66.24A106.4%20106.4%200%200%201%20128%2043.16a106.3%20106.3%200%200%201%2013.52%2018.6C154.8%2084.7%20159%20109.28%20159.82%20128Zm79.65%200c-1.68-41.89-16.31-70-28-85.94A96.07%2096.07%200%200%201%20224%20128Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/umbrella.svg?color=%231a73e8&size=48
