Add icons to this collection by clicking the heart icon.
Rain icon - also known as weather, storm, sky, rainy, rain, and meteorology. Created in a clean lineal gradient style, 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="100"
height="100"
viewBox="0 0 495.973 495.973"
>
<linearGradient
id="a"
x1="-51.676"
x2="26.649"
y1="556.923"
y2="635.253"
gradientTransform="matrix(8 0 0 -8 399.385 4958.163)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#aa6100" />
<stop offset=".093" stop-color="#ac6400" />
<stop offset=".165" stop-color="#b26e00" />
<stop offset=".231" stop-color="#bb7e00" />
<stop offset=".292" stop-color="#c99600" />
<stop offset=".35" stop-color="#dbb400" />
<stop offset=".405" stop-color="#f0d800" />
<stop offset=".439" stop-color="#fff200" />
<stop offset=".474" stop-color="#ffd705" />
<stop offset=".519" stop-color="#ffbb0a" />
<stop offset=".565" stop-color="#ffa80e" />
<stop offset=".611" stop-color="#ff9c10" />
<stop offset=".658" stop-color="#ff9811" />
<stop offset=".732" stop-color="#ff9a12" />
<stop offset=".758" stop-color="#ffa118" />
<stop offset=".777" stop-color="#ffac21" />
<stop offset=".793" stop-color="#ffbd2e" />
<stop offset=".806" stop-color="#ffd33f" />
<stop offset=".809" stop-color="#ffda44" />
<stop offset=".879" stop-color="#dda928" />
<stop offset=".96" stop-color="#b8750b" />
<stop offset="1" stop-color="#aa6100" />
</linearGradient>
<path
d="M401.417 117.403c-13.634-64.857-77.264-106.38-142.12-92.746-51.317 10.788-89.686 53.648-94.752 105.842-61.546-24.584-131.368 5.38-155.952 66.926s5.38 131.368 66.926 155.952a120.025 120.025 0 0 0 27.426 7.339 123.48 123.48 0 0 0 17 1.192h252a122.308 122.308 0 0 0 47.04-9.24c63.384-26.013 93.679-98.484 67.666-161.868a124.053 124.053 0 0 0-85.266-73.396l.032-.001zm11.464 220.504a106.413 106.413 0 0 1-40.936 8h-252a107.178 107.178 0 0 1-14.792-1.04c-56.847-8.215-96.272-60.957-88.057-117.805s60.957-96.272 117.805-88.057a104.014 104.014 0 0 1 33.324 10.774 8.002 8.002 0 0 0 7.864-.632 8.678 8.678 0 0 0 3.856-7.24c.022-57.438 46.603-103.982 104.04-103.96 51.008.02 94.474 37.03 102.624 87.384a8 8 0 0 0 6.344 6.576c58.541 11.614 96.583 68.486 84.969 127.027a108.061 108.061 0 0 1-65.041 78.973z"
fill="url(#a)"
/>
<linearGradient
id="b"
x1="-46.858"
x2="31.469"
y1="552.103"
y2="630.435"
gradientTransform="matrix(8 0 0 -8 399.385 4958.163)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#aa6100" />
<stop offset=".093" stop-color="#ac6400" />
<stop offset=".165" stop-color="#b26e00" />
<stop offset=".231" stop-color="#bb7e00" />
<stop offset=".292" stop-color="#c99600" />
<stop offset=".35" stop-color="#dbb400" />
<stop offset=".405" stop-color="#f0d800" />
<stop offset=".439" stop-color="#fff200" />
<stop offset=".474" stop-color="#ffd705" />
<stop offset=".519" stop-color="#ffbb0a" />
<stop offset=".565" stop-color="#ffa80e" />
<stop offset=".611" stop-color="#ff9c10" />
<stop offset=".658" stop-color="#ff9811" />
<stop offset=".732" stop-color="#ff9a12" />
<stop offset=".758" stop-color="#ffa118" />
<stop offset=".777" stop-color="#ffac21" />
<stop offset=".793" stop-color="#ffbd2e" />
<stop offset=".806" stop-color="#ffd33f" />
<stop offset=".809" stop-color="#ffda44" />
<stop offset=".879" stop-color="#dda928" />
<stop offset=".96" stop-color="#b8750b" />
<stop offset="1" stop-color="#aa6100" />
</linearGradient>
<path
d="M159.945 369.907a8 8 0 0 0-8 8v56a8 8 0 0 0 16 0v-56a8 8 0 0 0-8-8z"
fill="url(#b)"
/>
<linearGradient
id="c"
x1="-41.357"
x2="36.97"
y1="546.605"
y2="624.934"
gradientTransform="matrix(8 0 0 -8 399.385 4958.163)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#aa6100" />
<stop offset=".093" stop-color="#ac6400" />
<stop offset=".165" stop-color="#b26e00" />
<stop offset=".231" stop-color="#bb7e00" />
<stop offset=".292" stop-color="#c99600" />
<stop offset=".35" stop-color="#dbb400" />
<stop offset=".405" stop-color="#f0d800" />
<stop offset=".439" stop-color="#fff200" />
<stop offset=".474" stop-color="#ffd705" />
<stop offset=".519" stop-color="#ffbb0a" />
<stop offset=".565" stop-color="#ffa80e" />
<stop offset=".611" stop-color="#ff9c10" />
<stop offset=".658" stop-color="#ff9811" />
<stop offset=".732" stop-color="#ff9a12" />
<stop offset=".758" stop-color="#ffa118" />
<stop offset=".777" stop-color="#ffac21" />
<stop offset=".793" stop-color="#ffbd2e" />
<stop offset=".806" stop-color="#ffd33f" />
<stop offset=".809" stop-color="#ffda44" />
<stop offset=".879" stop-color="#dda928" />
<stop offset=".96" stop-color="#b8750b" />
<stop offset="1" stop-color="#aa6100" />
</linearGradient>
<path
d="M247.945 369.907a8 8 0 0 0-8 8v56a8 8 0 0 0 16 0v-56a8 8 0 0 0-8-8z"
fill="url(#c)"
/>
<linearGradient
id="d"
x1="-35.86"
x2="42.47"
y1="541.102"
y2="619.434"
gradientTransform="matrix(8 0 0 -8 399.385 4958.163)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#aa6100" />
<stop offset=".093" stop-color="#ac6400" />
<stop offset=".165" stop-color="#b26e00" />
<stop offset=".231" stop-color="#bb7e00" />
<stop offset=".292" stop-color="#c99600" />
<stop offset=".35" stop-color="#dbb400" />
<stop offset=".405" stop-color="#f0d800" />
<stop offset=".439" stop-color="#fff200" />
<stop offset=".474" stop-color="#ffd705" />
<stop offset=".519" stop-color="#ffbb0a" />
<stop offset=".565" stop-color="#ffa80e" />
<stop offset=".611" stop-color="#ff9c10" />
<stop offset=".658" stop-color="#ff9811" />
<stop offset=".732" stop-color="#ff9a12" />
<stop offset=".758" stop-color="#ffa118" />
<stop offset=".777" stop-color="#ffac21" />
<stop offset=".793" stop-color="#ffbd2e" />
<stop offset=".806" stop-color="#ffd33f" />
<stop offset=".809" stop-color="#ffda44" />
<stop offset=".879" stop-color="#dda928" />
<stop offset=".96" stop-color="#b8750b" />
<stop offset="1" stop-color="#aa6100" />
</linearGradient>
<path
d="M335.945 369.907a8 8 0 0 0-8 8v56a8 8 0 0 0 16 0v-56a8 8 0 0 0-8-8z"
fill="url(#d)"
/>
<linearGradient
id="e"
x1="-43.357"
x2="34.97"
y1="548.605"
y2="626.934"
gradientTransform="matrix(8 0 0 -8 399.385 4958.163)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#aa6100" />
<stop offset=".093" stop-color="#ac6400" />
<stop offset=".165" stop-color="#b26e00" />
<stop offset=".231" stop-color="#bb7e00" />
<stop offset=".292" stop-color="#c99600" />
<stop offset=".35" stop-color="#dbb400" />
<stop offset=".405" stop-color="#f0d800" />
<stop offset=".439" stop-color="#fff200" />
<stop offset=".474" stop-color="#ffd705" />
<stop offset=".519" stop-color="#ffbb0a" />
<stop offset=".565" stop-color="#ffa80e" />
<stop offset=".611" stop-color="#ff9c10" />
<stop offset=".658" stop-color="#ff9811" />
<stop offset=".732" stop-color="#ff9a12" />
<stop offset=".758" stop-color="#ffa118" />
<stop offset=".777" stop-color="#ffac21" />
<stop offset=".793" stop-color="#ffbd2e" />
<stop offset=".806" stop-color="#ffd33f" />
<stop offset=".809" stop-color="#ffda44" />
<stop offset=".879" stop-color="#dda928" />
<stop offset=".96" stop-color="#b8750b" />
<stop offset="1" stop-color="#aa6100" />
</linearGradient>
<path
d="M159.945 449.907a8 8 0 0 0-8 8v8a8 8 0 0 0 16 0v-8a8 8 0 0 0-8-8z"
fill="url(#e)"
/>
<linearGradient
id="f"
x1="-37.86"
x2="40.47"
y1="543.102"
y2="621.434"
gradientTransform="matrix(8 0 0 -8 399.385 4958.163)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#aa6100" />
<stop offset=".093" stop-color="#ac6400" />
<stop offset=".165" stop-color="#b26e00" />
<stop offset=".231" stop-color="#bb7e00" />
<stop offset=".292" stop-color="#c99600" />
<stop offset=".35" stop-color="#dbb400" />
<stop offset=".405" stop-color="#f0d800" />
<stop offset=".439" stop-color="#fff200" />
<stop offset=".474" stop-color="#ffd705" />
<stop offset=".519" stop-color="#ffbb0a" />
<stop offset=".565" stop-color="#ffa80e" />
<stop offset=".611" stop-color="#ff9c10" />
<stop offset=".658" stop-color="#ff9811" />
<stop offset=".732" stop-color="#ff9a12" />
<stop offset=".758" stop-color="#ffa118" />
<stop offset=".777" stop-color="#ffac21" />
<stop offset=".793" stop-color="#ffbd2e" />
<stop offset=".806" stop-color="#ffd33f" />
<stop offset=".809" stop-color="#ffda44" />
<stop offset=".879" stop-color="#dda928" />
<stop offset=".96" stop-color="#b8750b" />
<stop offset="1" stop-color="#aa6100" />
</linearGradient>
<path
d="M247.945 449.907a8 8 0 0 0-8 8v8a8 8 0 0 0 16 0v-8a8 8 0 0 0-8-8z"
fill="url(#f)"
/>
<linearGradient
id="g"
x1="-32.357"
x2="45.97"
y1="537.605"
y2="615.934"
gradientTransform="matrix(8 0 0 -8 399.385 4958.163)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#aa6100" />
<stop offset=".093" stop-color="#ac6400" />
<stop offset=".165" stop-color="#b26e00" />
<stop offset=".231" stop-color="#bb7e00" />
<stop offset=".292" stop-color="#c99600" />
<stop offset=".35" stop-color="#dbb400" />
<stop offset=".405" stop-color="#f0d800" />
<stop offset=".439" stop-color="#fff200" />
<stop offset=".474" stop-color="#ffd705" />
<stop offset=".519" stop-color="#ffbb0a" />
<stop offset=".565" stop-color="#ffa80e" />
<stop offset=".611" stop-color="#ff9c10" />
<stop offset=".658" stop-color="#ff9811" />
<stop offset=".732" stop-color="#ff9a12" />
<stop offset=".758" stop-color="#ffa118" />
<stop offset=".777" stop-color="#ffac21" />
<stop offset=".793" stop-color="#ffbd2e" />
<stop offset=".806" stop-color="#ffd33f" />
<stop offset=".809" stop-color="#ffda44" />
<stop offset=".879" stop-color="#dda928" />
<stop offset=".96" stop-color="#b8750b" />
<stop offset="1" stop-color="#aa6100" />
</linearGradient>
<path
d="M335.945 449.907a8 8 0 0 0-8 8v8a8 8 0 0 0 16 0v-8a8 8 0 0 0-8-8z"
fill="url(#g)"
/>
</svg>
More icons in the same style and category