Add icons to this collection by clicking the heart icon.
Umbrella icon - also known as nature, landscape, summertime, beach, holidays, sun, and umbrella. Created in a clean flat gradient style with a white, gray, yellow, orange, and pink finish, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="512"
height="512"
viewBox="0 0 512 512"
>
<radialGradient
id="b"
cx="96"
cy="99.046"
r="65.541"
gradientUnits="userSpaceOnUse"
>
<stop offset=".335" stop-color="#f2683d" />
<stop offset=".581" stop-color="#f77649" stop-opacity=".626" />
<stop offset="1" stop-color="#ff8d5c" stop-opacity="0" />
</radialGradient>
<radialGradient
id="c"
cx="44.895"
cy="52.993"
r="99.133"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ffea63" stop-opacity="0" />
<stop offset=".262" stop-color="#ffdc63" stop-opacity=".308" />
<stop offset=".596" stop-color="#ffcc63" stop-opacity=".677" />
<stop offset=".829" stop-color="#ffc263" stop-opacity=".91" />
<stop offset=".941" stop-color="#ffbe63" />
</radialGradient>
<linearGradient
id="a"
x1="201.755"
x2="189.9"
y1="202.64"
y2="252.282"
gradientUnits="userSpaceOnUse"
>
<stop offset=".059" stop-color="#d6d6ff" />
<stop offset=".244" stop-color="#dfdfff" />
<stop offset=".652" stop-color="#ededff" />
<stop offset="1" stop-color="#f2f2ff" />
</linearGradient>
<linearGradient
id="d"
x1="445.997"
x2="435.104"
y1="254.445"
y2="302.319"
href="#a"
/>
<linearGradient
id="e"
x1="132.888"
x2="422.421"
y1="51.553"
y2="255.433"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#f2f2ff" stop-opacity="0" />
<stop offset=".099" stop-color="#f1f1ff" stop-opacity=".019" />
<stop offset=".215" stop-color="#f0f0ff" stop-opacity=".075" />
<stop offset=".34" stop-color="#ededff" stop-opacity=".168" />
<stop offset=".472" stop-color="#eaeaff" stop-opacity=".298" />
<stop offset=".608" stop-color="#e5e5ff" stop-opacity=".465" />
<stop offset=".748" stop-color="#dfdfff" stop-opacity=".669" />
<stop offset=".889" stop-color="#d9d9ff" stop-opacity=".905" />
<stop offset=".941" stop-color="#d6d6ff" />
</linearGradient>
<linearGradient
id="f"
x1="32"
x2="480"
y1="460.238"
y2="460.238"
gradientUnits="userSpaceOnUse"
>
<stop offset=".494" stop-color="#ffbe63" />
<stop offset=".545" stop-color="#ffbe63" stop-opacity=".98" />
<stop offset=".608" stop-color="#ffbf63" stop-opacity=".92" />
<stop offset=".676" stop-color="#ffc163" stop-opacity=".822" />
<stop offset=".75" stop-color="#ffc363" stop-opacity=".686" />
<stop offset=".826" stop-color="#ffc663" stop-opacity=".51" />
<stop offset=".906" stop-color="#ffca63" stop-opacity=".295" />
<stop offset=".986" stop-color="#ffce63" stop-opacity=".046" />
<stop offset="1" stop-color="#ffcf63" stop-opacity="0" />
</linearGradient>
<linearGradient
id="g"
x1="279.615"
x2="480"
y1="443.1"
y2="443.1"
gradientUnits="userSpaceOnUse"
>
<stop offset=".315" stop-color="#ffbe63" />
<stop offset=".321" stop-color="#ffbe63" stop-opacity=".988" />
<stop offset=".472" stop-color="#ffc363" stop-opacity=".693" />
<stop offset=".613" stop-color="#ffc763" stop-opacity=".446" />
<stop offset=".74" stop-color="#ffcb63" stop-opacity=".254" />
<stop offset=".851" stop-color="#ffcd63" stop-opacity=".115" />
<stop offset=".941" stop-color="#ffce63" stop-opacity=".031" />
<stop offset="1" stop-color="#ffcf63" stop-opacity="0" />
</linearGradient>
<linearGradient
id="h"
x1="323.265"
x2="278.563"
y1="228.037"
y2="455.221"
gradientUnits="userSpaceOnUse"
>
<stop offset=".224" stop-color="#6b6080" />
<stop offset=".231" stop-color="#6c6180" stop-opacity=".961" />
<stop offset=".284" stop-color="#716783" stop-opacity=".705" />
<stop offset=".343" stop-color="#756c85" stop-opacity=".484" />
<stop offset=".409" stop-color="#787087" stop-opacity=".306" />
<stop offset=".485" stop-color="#7b7388" stop-opacity=".168" />
<stop offset=".577" stop-color="#7d7589" stop-opacity=".072" />
<stop offset=".701" stop-color="#7e778a" stop-opacity=".016" />
<stop offset="1" stop-color="#7e778a" stop-opacity="0" />
</linearGradient>
<linearGradient
id="i"
x1="323.42"
x2="309.482"
y1="231.145"
y2="287.505"
href="#a"
/>
<linearGradient
id="j"
x1="391.26"
x2="378.571"
y1="237.694"
y2="304.452"
gradientUnits="userSpaceOnUse"
>
<stop offset=".255" stop-color="#ffcf63" />
<stop offset=".364" stop-color="#ffd563" />
<stop offset=".717" stop-color="#ffe563" />
<stop offset="1" stop-color="#ffea63" />
</linearGradient>
<radialGradient
id="k"
cx="317.661"
cy="178.141"
r="121.591"
gradientTransform="matrix(.013 1 -.629 .008 425.402 -140.995)"
gradientUnits="userSpaceOnUse"
>
<stop offset=".654" stop-color="#ffea63" />
<stop offset="1" stop-color="#ffcf63" />
</radialGradient>
<linearGradient
id="l"
x1="238.733"
x2="252.909"
y1="277.907"
y2="230.978"
gradientUnits="userSpaceOnUse"
>
<stop offset=".52" stop-color="#f25264" />
<stop offset=".754" stop-color="#ef5062" />
<stop offset=".941" stop-color="#e54b5d" />
<stop offset="1" stop-color="#e0485a" />
</linearGradient>
<linearGradient
id="m"
x1="253.731"
x2="302.124"
y1="142.199"
y2="159.483"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#f25264" stop-opacity="0" />
<stop offset=".124" stop-color="#f05163" stop-opacity=".093" />
<stop offset=".381" stop-color="#ec4f61" stop-opacity=".333" />
<stop offset=".744" stop-color="#e54b5d" stop-opacity=".714" />
<stop offset="1" stop-color="#e0485a" />
</linearGradient>
<linearGradient
id="n"
x1="287.182"
x2="364.369"
y1="167.057"
y2="167.057"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#f2f2ff" />
<stop offset=".348" stop-color="#ededff" />
<stop offset=".756" stop-color="#dfdfff" />
<stop offset=".941" stop-color="#d6d6ff" />
</linearGradient>
<linearGradient
id="o"
x1="367.508"
x2="332.735"
y1="81.713"
y2="74.506"
gradientUnits="userSpaceOnUse"
>
<stop offset=".196" stop-color="#6b6080" />
<stop offset=".311" stop-color="#706783" stop-opacity=".711" />
<stop offset=".437" stop-color="#756d85" stop-opacity=".455" />
<stop offset=".568" stop-color="#797187" stop-opacity=".255" />
<stop offset=".702" stop-color="#7c7489" stop-opacity=".113" />
<stop offset=".843" stop-color="#7d768a" stop-opacity=".028" />
<stop offset="1" stop-color="#7e778a" stop-opacity="0" />
</linearGradient>
<g>
<path
fill="#ff8d5c"
d="M150.396 99.046c0-6.55 11.304-14.812 9.385-20.722-1.99-6.126-16.056-6.15-19.767-11.249-3.748-5.15.55-18.524-4.6-22.272-5.099-3.71-16.473 4.483-22.599 2.494C106.905 45.378 102.55 32 96 32S85.095 45.378 79.184 47.297c-6.125 1.99-17.5-6.204-22.598-2.494-5.15 3.748-.852 17.122-4.6 22.272-3.711 5.1-17.778 5.123-19.767 11.249-1.919 5.91 9.385 14.172 9.385 20.722s-11.304 14.812-9.385 20.722c1.99 6.126 16.056 6.15 19.767 11.249 3.748 5.15-.55 18.524 4.6 22.272 5.099 3.71 16.473-4.483 22.599-2.494 5.91 1.919 10.265 15.297 16.815 15.297s10.905-13.378 16.816-15.297c6.125-1.99 17.5 6.204 22.599 2.494 5.15-3.748.851-17.122 4.6-22.272 3.71-5.1 17.777-5.123 19.766-11.249 1.919-5.91-9.385-14.172-9.385-20.722z"
/>
<path
fill="url(#b)"
d="M150.396 99.046c0-6.55 11.304-14.812 9.385-20.722-1.99-6.126-16.056-6.15-19.767-11.249-3.748-5.15.55-18.524-4.6-22.272-5.099-3.71-16.473 4.483-22.599 2.494C106.905 45.378 102.55 32 96 32S85.095 45.378 79.184 47.297c-6.125 1.99-17.5-6.204-22.598-2.494-5.15 3.748-.852 17.122-4.6 22.272-3.711 5.1-17.778 5.123-19.767 11.249-1.919 5.91 9.385 14.172 9.385 20.722s-11.304 14.812-9.385 20.722c1.99 6.126 16.056 6.15 19.767 11.249 3.748 5.15-.55 18.524 4.6 22.272 5.099 3.71 16.473-4.483 22.599-2.494 5.91 1.919 10.265 15.297 16.815 15.297s10.905-13.378 16.816-15.297c6.125-1.99 17.5 6.204 22.599 2.494 5.15-3.748.851-17.122 4.6-22.272 3.71-5.1 17.777-5.123 19.766-11.249 1.919-5.91-9.385-14.172-9.385-20.722z"
/>
<circle cx="96" cy="99.046" r="39.9" fill="#ffea63" />
<circle cx="96" cy="99.046" r="39.9" fill="url(#c)" />
<path
fill="url(#a)"
d="m204.896 183.822-40.268 26.906a34.245 34.245 0 1 0 67.174 13.362z"
/>
<path
fill="url(#d)"
d="M476.91 272.845a34.245 34.245 0 1 1-67.173-13.362l40.267-26.906z"
/>
<path
fill="#f2f2ff"
d="M164.629 210.728a159.2 159.2 0 1 1 312.281 62.117z"
/>
<path
fill="url(#e)"
d="M164.629 210.728a159.2 159.2 0 1 1 312.281 62.117z"
/>
<path
fill="#ffcf63"
d="M32 409.392c112 0 112 10 224 10s112-10 224-10v73.285H32z"
/>
<path
fill="url(#f)"
d="M480 482.677H32v-42.292s92.488 26.731 181.6 26.3 238.034-28.887 266.4-28.887z"
/>
<path fill="url(#g)" d="M433.605 448.402h-153.99l12.361-10.604H480z" />
<path
fill="#7e778a"
d="m312.834 230.42-42.652 214.43c-.792 3.979 19.373 5.122 20.164 1.146l42.104-211.674z"
/>
<path
fill="url(#h)"
d="m312.834 230.42-42.652 214.43c-.792 3.979 19.373 5.122 20.164 1.146l42.104-211.674z"
/>
<path
fill="url(#i)"
d="M354.356 248.468a34.245 34.245 0 1 1-67.174-13.362L327.45 208.2z"
/>
<path
fill="url(#j)"
d="m407.035 240.136 14.495 21.693a34.245 34.245 0 0 1-67.174-13.361z"
/>
<path
fill="url(#k)"
d="m350.193 247.64 1.635-161.994s78.379 44.803 69.702 176.183z"
/>
<path
fill="url(#l)"
d="m260.276 194.838-40.268 26.906a34.245 34.245 0 1 0 67.174 13.362z"
/>
<path
fill="#ff596d"
d="m291.346 235.934 60.481-150.288S262.27 97.044 220.008 221.744z"
/>
<path
fill="url(#m)"
d="m291.346 235.934 60.481-150.288S262.27 97.044 220.008 221.744z"
/>
<path
fill="#f2f2ff"
d="M351.828 85.646s-40.726 29.205-64.646 149.46l67.174 13.361c23.92-120.254-2.528-162.821-2.528-162.821z"
/>
<path
fill="url(#n)"
d="M351.828 85.646s-40.726 29.205-64.646 149.46l67.174 13.361c23.92-120.254-2.528-162.821-2.528-162.821z"
/>
<path
fill="#7e778a"
d="m344.346 71.999-3.316 16.673.013.003c-.704 3.536 18.887 7.433 19.59 3.897l.013.002 3.316-16.673c2.58-12.967-17.033-16.887-19.616-3.902z"
/>
<path
fill="url(#o)"
d="m344.346 71.999-3.316 16.673.013.003c-.704 3.536 18.887 7.433 19.59 3.897l.013.002 3.316-16.673c2.58-12.967-17.033-16.887-19.616-3.902z"
/>
<path fill="#ffbe63" d="m480 437.798-46.395 10.604" />
</g>
</svg>
More icons in the same style and category