umbrella icon

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

Name
umbrella
Set
Font Awesome 6 Solid
Style
Regular
Category
Maps
Viewbox
576×512
License
CC BY 4.0

The same icon in other sets

umbrellaAkar IconsumbrellaBootstrap IconsumbrellaCarbonumbrellaEmoji One (Colored)umbrellaElement Plusumbrella-fillEva IconsumbrellaFramework7 IconsumbrellaFont Awesome 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 6 Solid

anchorbombbookmarkgavelhelicopterlife-ringmagnetmap-pinnewspaperplaneplane-slashrestroomroadrocketshipsnowplowstreet-viewtraffic-lighttrainvestvest-patchesumbrella-beach

Use the umbrella icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 576 512"><path fill="currentColor" d="M288 0c17.7 0 32 14.3 32 32v17.7C451.8 63.4 557.7 161 573.9 285.9c2 15.6-17.3 24.4-27.8 12.7c-14-15.6-41.3-26.6-66.1-26.6c-38.7 0-71 27.5-78.4 64.1c-1.7 8.7-8.7 15.9-17.6 15.9s-15.8-7.2-17.6-15.9C359 299.5 326.7 272 288 272s-71 27.5-78.4 64.1c-1.7 8.7-8.7 15.9-17.6 15.9s-15.8-7.2-17.6-15.9C167 299.5 134.7 272 96 272c-24.8 0-52.1 11-66.1 26.7c-10.5 11.7-29.8 2.8-27.8-12.8C18.3 161 124.2 63.4 256 49.7V32c0-17.7 14.3-32 32-32m0 304c12.3 0 23.5 4.6 32 12.2v114.3c0 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.4V316.2c8.5-7.6 19.7-12.2 32-12.2"/></svg>

React

import type { SVGProps } from "react";

export function Fa6SolidUmbrella(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 576 512"><path fill="currentColor" d="M288 0c17.7 0 32 14.3 32 32v17.7C451.8 63.4 557.7 161 573.9 285.9c2 15.6-17.3 24.4-27.8 12.7c-14-15.6-41.3-26.6-66.1-26.6c-38.7 0-71 27.5-78.4 64.1c-1.7 8.7-8.7 15.9-17.6 15.9s-15.8-7.2-17.6-15.9C359 299.5 326.7 272 288 272s-71 27.5-78.4 64.1c-1.7 8.7-8.7 15.9-17.6 15.9s-15.8-7.2-17.6-15.9C167 299.5 134.7 272 96 272c-24.8 0-52.1 11-66.1 26.7c-10.5 11.7-29.8 2.8-27.8-12.8C18.3 161 124.2 63.4 256 49.7V32c0-17.7 14.3-32 32-32m0 304c12.3 0 23.5 4.6 32 12.2v114.3c0 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.4V316.2c8.5-7.6 19.7-12.2 32-12.2"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 576 512"><path fill="currentColor" d="M288 0c17.7 0 32 14.3 32 32v17.7C451.8 63.4 557.7 161 573.9 285.9c2 15.6-17.3 24.4-27.8 12.7c-14-15.6-41.3-26.6-66.1-26.6c-38.7 0-71 27.5-78.4 64.1c-1.7 8.7-8.7 15.9-17.6 15.9s-15.8-7.2-17.6-15.9C359 299.5 326.7 272 288 272s-71 27.5-78.4 64.1c-1.7 8.7-8.7 15.9-17.6 15.9s-15.8-7.2-17.6-15.9C167 299.5 134.7 272 96 272c-24.8 0-52.1 11-66.1 26.7c-10.5 11.7-29.8 2.8-27.8-12.8C18.3 161 124.2 63.4 256 49.7V32c0-17.7 14.3-32 32-32m0 304c12.3 0 23.5 4.6 32 12.2v114.3c0 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.4V316.2c8.5-7.6 19.7-12.2 32-12.2"/></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%20576%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M288%200c17.7%200%2032%2014.3%2032%2032v17.7C451.8%2063.4%20557.7%20161%20573.9%20285.9c2%2015.6-17.3%2024.4-27.8%2012.7c-14-15.6-41.3-26.6-66.1-26.6c-38.7%200-71%2027.5-78.4%2064.1c-1.7%208.7-8.7%2015.9-17.6%2015.9s-15.8-7.2-17.6-15.9C359%20299.5%20326.7%20272%20288%20272s-71%2027.5-78.4%2064.1c-1.7%208.7-8.7%2015.9-17.6%2015.9s-15.8-7.2-17.6-15.9C167%20299.5%20134.7%20272%2096%20272c-24.8%200-52.1%2011-66.1%2026.7c-10.5%2011.7-29.8%202.8-27.8-12.8C18.3%20161%20124.2%2063.4%20256%2049.7V32c0-17.7%2014.3-32%2032-32m0%20304c12.3%200%2023.5%204.6%2032%2012.2v114.3c0%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.4V316.2c8.5-7.6%2019.7-12.2%2032-12.2%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%20576%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M288%200c17.7%200%2032%2014.3%2032%2032v17.7C451.8%2063.4%20557.7%20161%20573.9%20285.9c2%2015.6-17.3%2024.4-27.8%2012.7c-14-15.6-41.3-26.6-66.1-26.6c-38.7%200-71%2027.5-78.4%2064.1c-1.7%208.7-8.7%2015.9-17.6%2015.9s-15.8-7.2-17.6-15.9C359%20299.5%20326.7%20272%20288%20272s-71%2027.5-78.4%2064.1c-1.7%208.7-8.7%2015.9-17.6%2015.9s-15.8-7.2-17.6-15.9C167%20299.5%20134.7%20272%2096%20272c-24.8%200-52.1%2011-66.1%2026.7c-10.5%2011.7-29.8%202.8-27.8-12.8C18.3%20161%20124.2%2063.4%20256%2049.7V32c0-17.7%2014.3-32%2032-32m0%20304c12.3%200%2023.5%204.6%2032%2012.2v114.3c0%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.4V316.2c8.5-7.6%2019.7-12.2%2032-12.2%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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