umbrella icon

umbrella from Font Awesome Solid by Dave Gandy · Solid · Maps · CC-BY-4.0 Attribution required.

Name
umbrella
Set
Font Awesome Solid
Style
Solid
Category
Maps
Viewbox
640×640
License
CC BY 4.0

The same icon in other sets

umbrellaAkar IconsumbrellaBootstrap IconsumbrellaCarbonumbrellaEmoji One (Colored)umbrellaElement Plusumbrella-fillEva IconsumbrellaFramework7 IconsumbrellaFont Awesome 6 SolidumbrellaFeather Iconsumbrella-20-filledFluent UI System IconsumbrellaFluent EmojiumbrellaFluent Emoji FlatumbrellaFluent Emoji High ContrastumbrellaFirefox OS Emojiumbrellacss.ggumbrellaHealth IconsumbrellaHuge IconsumbrellaIconParkumbrellaIconPark OutlineumbrellaIconPark SolidumbrellaIconPark TwoToneumbrellaIconoirumbrellaIonIconsumbrellaJam Icons

More maps icons from Font Awesome Solid

anchorbombbookmarkdirectionsfighter-jetgavelhelicopterlife-ringmagnetmalemap-markermap-marker-altmap-pinnewspaperparkingplaneplane-slashrestroomroadrocketshipshopping-bagshopping-basketshopping-cart

Use the umbrella icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M320 32c17.7 0 32 14.3 32 32v2c126.3 15.7 224 123.5 224 254c0 3.8-.1 7.5-.2 11.3c-.3 6.9-5 12.8-11.7 14.7s-13.8-.7-17.6-6.5C532.1 318.1 507.7 304 480 304c-29.3 0-54.9 15.7-68.9 39.3c-2.7 4.6-7.6 7.6-13 7.8s-10.5-2.2-13.7-6.5c-14.6-19.8-38-32.6-64.5-32.6s-49.9 12.8-64.5 32.6c-3.2 4.3-8.3 6.8-13.7 6.5s-10.2-3.2-13-7.8c-14-23.6-39.6-39.3-68.9-39.3c-27.7 0-52.1 14.1-66.5 35.5c-3.9 5.7-11 8.4-17.6 6.5s-11.2-7.8-11.5-14.7c-.1-3.8-.2-7.5-.2-11.3c0-130.5 97.7-238.3 224-254v-2c0-17.7 14.3-32 32-32m32 360v102.6c0 45-36.5 81.4-81.4 81.4c-30.8 0-59-17.4-72.8-45l-2.3-4.7c-7.9-15.8-1.5-35 14.3-42.9s35-1.5 42.9 14.3l2.3 4.7c3 5.9 9 9.6 15.6 9.6c9.6 0 17.4-7.8 17.4-17.4V392c0-17.7 14.3-32 32-32s32 14.3 32 32"/></svg>

React

import type { SVGProps } from "react";

export function Fa7SolidUmbrella(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M320 32c17.7 0 32 14.3 32 32v2c126.3 15.7 224 123.5 224 254c0 3.8-.1 7.5-.2 11.3c-.3 6.9-5 12.8-11.7 14.7s-13.8-.7-17.6-6.5C532.1 318.1 507.7 304 480 304c-29.3 0-54.9 15.7-68.9 39.3c-2.7 4.6-7.6 7.6-13 7.8s-10.5-2.2-13.7-6.5c-14.6-19.8-38-32.6-64.5-32.6s-49.9 12.8-64.5 32.6c-3.2 4.3-8.3 6.8-13.7 6.5s-10.2-3.2-13-7.8c-14-23.6-39.6-39.3-68.9-39.3c-27.7 0-52.1 14.1-66.5 35.5c-3.9 5.7-11 8.4-17.6 6.5s-11.2-7.8-11.5-14.7c-.1-3.8-.2-7.5-.2-11.3c0-130.5 97.7-238.3 224-254v-2c0-17.7 14.3-32 32-32m32 360v102.6c0 45-36.5 81.4-81.4 81.4c-30.8 0-59-17.4-72.8-45l-2.3-4.7c-7.9-15.8-1.5-35 14.3-42.9s35-1.5 42.9 14.3l2.3 4.7c3 5.9 9 9.6 15.6 9.6c9.6 0 17.4-7.8 17.4-17.4V392c0-17.7 14.3-32 32-32s32 14.3 32 32"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M320 32c17.7 0 32 14.3 32 32v2c126.3 15.7 224 123.5 224 254c0 3.8-.1 7.5-.2 11.3c-.3 6.9-5 12.8-11.7 14.7s-13.8-.7-17.6-6.5C532.1 318.1 507.7 304 480 304c-29.3 0-54.9 15.7-68.9 39.3c-2.7 4.6-7.6 7.6-13 7.8s-10.5-2.2-13.7-6.5c-14.6-19.8-38-32.6-64.5-32.6s-49.9 12.8-64.5 32.6c-3.2 4.3-8.3 6.8-13.7 6.5s-10.2-3.2-13-7.8c-14-23.6-39.6-39.3-68.9-39.3c-27.7 0-52.1 14.1-66.5 35.5c-3.9 5.7-11 8.4-17.6 6.5s-11.2-7.8-11.5-14.7c-.1-3.8-.2-7.5-.2-11.3c0-130.5 97.7-238.3 224-254v-2c0-17.7 14.3-32 32-32m32 360v102.6c0 45-36.5 81.4-81.4 81.4c-30.8 0-59-17.4-72.8-45l-2.3-4.7c-7.9-15.8-1.5-35 14.3-42.9s35-1.5 42.9 14.3l2.3 4.7c3 5.9 9 9.6 15.6 9.6c9.6 0 17.4-7.8 17.4-17.4V392c0-17.7 14.3-32 32-32s32 14.3 32 32"/></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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M320%2032c17.7%200%2032%2014.3%2032%2032v2c126.3%2015.7%20224%20123.5%20224%20254c0%203.8-.1%207.5-.2%2011.3c-.3%206.9-5%2012.8-11.7%2014.7s-13.8-.7-17.6-6.5C532.1%20318.1%20507.7%20304%20480%20304c-29.3%200-54.9%2015.7-68.9%2039.3c-2.7%204.6-7.6%207.6-13%207.8s-10.5-2.2-13.7-6.5c-14.6-19.8-38-32.6-64.5-32.6s-49.9%2012.8-64.5%2032.6c-3.2%204.3-8.3%206.8-13.7%206.5s-10.2-3.2-13-7.8c-14-23.6-39.6-39.3-68.9-39.3c-27.7%200-52.1%2014.1-66.5%2035.5c-3.9%205.7-11%208.4-17.6%206.5s-11.2-7.8-11.5-14.7c-.1-3.8-.2-7.5-.2-11.3c0-130.5%2097.7-238.3%20224-254v-2c0-17.7%2014.3-32%2032-32m32%20360v102.6c0%2045-36.5%2081.4-81.4%2081.4c-30.8%200-59-17.4-72.8-45l-2.3-4.7c-7.9-15.8-1.5-35%2014.3-42.9s35-1.5%2042.9%2014.3l2.3%204.7c3%205.9%209%209.6%2015.6%209.6c9.6%200%2017.4-7.8%2017.4-17.4V392c0-17.7%2014.3-32%2032-32s32%2014.3%2032%2032%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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M320%2032c17.7%200%2032%2014.3%2032%2032v2c126.3%2015.7%20224%20123.5%20224%20254c0%203.8-.1%207.5-.2%2011.3c-.3%206.9-5%2012.8-11.7%2014.7s-13.8-.7-17.6-6.5C532.1%20318.1%20507.7%20304%20480%20304c-29.3%200-54.9%2015.7-68.9%2039.3c-2.7%204.6-7.6%207.6-13%207.8s-10.5-2.2-13.7-6.5c-14.6-19.8-38-32.6-64.5-32.6s-49.9%2012.8-64.5%2032.6c-3.2%204.3-8.3%206.8-13.7%206.5s-10.2-3.2-13-7.8c-14-23.6-39.6-39.3-68.9-39.3c-27.7%200-52.1%2014.1-66.5%2035.5c-3.9%205.7-11%208.4-17.6%206.5s-11.2-7.8-11.5-14.7c-.1-3.8-.2-7.5-.2-11.3c0-130.5%2097.7-238.3%20224-254v-2c0-17.7%2014.3-32%2032-32m32%20360v102.6c0%2045-36.5%2081.4-81.4%2081.4c-30.8%200-59-17.4-72.8-45l-2.3-4.7c-7.9-15.8-1.5-35%2014.3-42.9s35-1.5%2042.9%2014.3l2.3%204.7c3%205.9%209%209.6%2015.6%209.6c9.6%200%2017.4-7.8%2017.4-17.4V392c0-17.7%2014.3-32%2032-32s32%2014.3%2032%2032%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa7-solid/umbrella.svg?color=%231a73e8&size=48