cloud sun rain icon
cloud-sun-rain from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- cloud-sun-rain
- Set
- Framework7 Icons
- Style
- Outline
- Viewbox
- 56×56
- License
- MIT
1 other variant in Framework7 Icons
The same icon in other sets
Related icons in Framework7 Icons
Use the cloud sun rain icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M36.06 9.18c.868 0 1.601-.734 1.601-1.601V3.412c0-.887-.733-1.6-1.6-1.6c-.887 0-1.62.713-1.62 1.6V7.58c0 .867.733 1.6 1.62 1.6M24.858 12.9c.636.637 1.697.618 2.294 0c.58-.616.598-1.619 0-2.236l-2.988-2.99c-.617-.616-1.62-.597-2.237 0c-.617.618-.617 1.64 0 2.276Zm20.113 0c.598.618 1.639.637 2.275 0l2.931-2.95c.618-.636.618-1.658 0-2.275c-.617-.598-1.62-.617-2.237 0l-2.97 2.989c-.616.617-.597 1.62 0 2.237M8.176 40.748h20.865c5.573 0 9.893-4.204 9.893-9.642v-.174c3.895-1.253 6.653-4.86 6.653-9.121c0-5.303-4.243-9.565-9.526-9.565a9.51 9.51 0 0 0-9.102 6.653c-2.314-2.622-5.554-4.165-9.218-4.165c-6.383 0-11.724 4.936-12.36 11.261C2.16 26.998 0 29.795 0 33.285c0 4.358 3.259 7.463 8.176 7.463M36.061 15.08c3.76 0 6.691 2.95 6.691 6.73a6.71 6.71 0 0 1-4.281 6.306c-1.234-3.703-4.724-6.287-9.121-6.538c.116-3.683 3.027-6.498 6.71-6.498M8.099 37.66c-3.278 0-5.014-1.87-5.014-4.3c0-2.025 1.196-3.838 4.03-4.59c.926-.25 1.274-.675 1.35-1.639c.444-5.419 4.455-9.314 9.276-9.314c3.741 0 6.653 2.063 8.446 5.67c.405.829.887 1.099 1.87 1.099c4.976 0 7.792 3.008 7.792 6.595c0 3.606-2.932 6.48-6.75 6.48Zm42.154-14.25h4.166c.867 0 1.581-.714 1.581-1.601s-.714-1.6-1.581-1.6h-4.166c-.867 0-1.6.713-1.6 1.6s.733 1.6 1.6 1.6M47.94 35.963c.617.617 1.62.598 2.237-.02c.618-.616.618-1.638 0-2.236l-2.97-2.97c-.616-.598-1.62-.617-2.236 0a1.63 1.63 0 0 0 0 2.276ZM23.2 49.791l2.506-4.358c.347-.598.155-1.273-.424-1.601c-.578-.347-1.234-.154-1.581.444l-2.526 4.377c-.328.56-.174 1.234.424 1.581a1.19 1.19 0 0 0 1.6-.443m-15.35.019l2.506-4.358c.367-.598.174-1.273-.405-1.6c-.578-.348-1.253-.155-1.6.443l-2.526 4.377c-.328.56-.155 1.234.443 1.582a1.17 1.17 0 0 0 1.581-.444m21.385 5.4l2.507-4.34c.347-.597.154-1.272-.424-1.62c-.579-.327-1.234-.134-1.581.444l-2.546 4.397c-.309.54-.154 1.215.444 1.562a1.154 1.154 0 0 0 1.6-.444m-15.35.019l2.507-4.34c.347-.597.174-1.272-.405-1.619c-.598-.328-1.253-.135-1.6.444L11.86 54.11c-.328.54-.155 1.215.424 1.562a1.154 1.154 0 0 0 1.6-.443"/></svg>
React
import type { SVGProps } from "react";
export function F7CloudSunRain(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M36.06 9.18c.868 0 1.601-.734 1.601-1.601V3.412c0-.887-.733-1.6-1.6-1.6c-.887 0-1.62.713-1.62 1.6V7.58c0 .867.733 1.6 1.62 1.6M24.858 12.9c.636.637 1.697.618 2.294 0c.58-.616.598-1.619 0-2.236l-2.988-2.99c-.617-.616-1.62-.597-2.237 0c-.617.618-.617 1.64 0 2.276Zm20.113 0c.598.618 1.639.637 2.275 0l2.931-2.95c.618-.636.618-1.658 0-2.275c-.617-.598-1.62-.617-2.237 0l-2.97 2.989c-.616.617-.597 1.62 0 2.237M8.176 40.748h20.865c5.573 0 9.893-4.204 9.893-9.642v-.174c3.895-1.253 6.653-4.86 6.653-9.121c0-5.303-4.243-9.565-9.526-9.565a9.51 9.51 0 0 0-9.102 6.653c-2.314-2.622-5.554-4.165-9.218-4.165c-6.383 0-11.724 4.936-12.36 11.261C2.16 26.998 0 29.795 0 33.285c0 4.358 3.259 7.463 8.176 7.463M36.061 15.08c3.76 0 6.691 2.95 6.691 6.73a6.71 6.71 0 0 1-4.281 6.306c-1.234-3.703-4.724-6.287-9.121-6.538c.116-3.683 3.027-6.498 6.71-6.498M8.099 37.66c-3.278 0-5.014-1.87-5.014-4.3c0-2.025 1.196-3.838 4.03-4.59c.926-.25 1.274-.675 1.35-1.639c.444-5.419 4.455-9.314 9.276-9.314c3.741 0 6.653 2.063 8.446 5.67c.405.829.887 1.099 1.87 1.099c4.976 0 7.792 3.008 7.792 6.595c0 3.606-2.932 6.48-6.75 6.48Zm42.154-14.25h4.166c.867 0 1.581-.714 1.581-1.601s-.714-1.6-1.581-1.6h-4.166c-.867 0-1.6.713-1.6 1.6s.733 1.6 1.6 1.6M47.94 35.963c.617.617 1.62.598 2.237-.02c.618-.616.618-1.638 0-2.236l-2.97-2.97c-.616-.598-1.62-.617-2.236 0a1.63 1.63 0 0 0 0 2.276ZM23.2 49.791l2.506-4.358c.347-.598.155-1.273-.424-1.601c-.578-.347-1.234-.154-1.581.444l-2.526 4.377c-.328.56-.174 1.234.424 1.581a1.19 1.19 0 0 0 1.6-.443m-15.35.019l2.506-4.358c.367-.598.174-1.273-.405-1.6c-.578-.348-1.253-.155-1.6.443l-2.526 4.377c-.328.56-.155 1.234.443 1.582a1.17 1.17 0 0 0 1.581-.444m21.385 5.4l2.507-4.34c.347-.597.154-1.272-.424-1.62c-.579-.327-1.234-.134-1.581.444l-2.546 4.397c-.309.54-.154 1.215.444 1.562a1.154 1.154 0 0 0 1.6-.444m-15.35.019l2.507-4.34c.347-.597.174-1.272-.405-1.619c-.598-.328-1.253-.135-1.6.444L11.86 54.11c-.328.54-.155 1.215.424 1.562a1.154 1.154 0 0 0 1.6-.443"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M36.06 9.18c.868 0 1.601-.734 1.601-1.601V3.412c0-.887-.733-1.6-1.6-1.6c-.887 0-1.62.713-1.62 1.6V7.58c0 .867.733 1.6 1.62 1.6M24.858 12.9c.636.637 1.697.618 2.294 0c.58-.616.598-1.619 0-2.236l-2.988-2.99c-.617-.616-1.62-.597-2.237 0c-.617.618-.617 1.64 0 2.276Zm20.113 0c.598.618 1.639.637 2.275 0l2.931-2.95c.618-.636.618-1.658 0-2.275c-.617-.598-1.62-.617-2.237 0l-2.97 2.989c-.616.617-.597 1.62 0 2.237M8.176 40.748h20.865c5.573 0 9.893-4.204 9.893-9.642v-.174c3.895-1.253 6.653-4.86 6.653-9.121c0-5.303-4.243-9.565-9.526-9.565a9.51 9.51 0 0 0-9.102 6.653c-2.314-2.622-5.554-4.165-9.218-4.165c-6.383 0-11.724 4.936-12.36 11.261C2.16 26.998 0 29.795 0 33.285c0 4.358 3.259 7.463 8.176 7.463M36.061 15.08c3.76 0 6.691 2.95 6.691 6.73a6.71 6.71 0 0 1-4.281 6.306c-1.234-3.703-4.724-6.287-9.121-6.538c.116-3.683 3.027-6.498 6.71-6.498M8.099 37.66c-3.278 0-5.014-1.87-5.014-4.3c0-2.025 1.196-3.838 4.03-4.59c.926-.25 1.274-.675 1.35-1.639c.444-5.419 4.455-9.314 9.276-9.314c3.741 0 6.653 2.063 8.446 5.67c.405.829.887 1.099 1.87 1.099c4.976 0 7.792 3.008 7.792 6.595c0 3.606-2.932 6.48-6.75 6.48Zm42.154-14.25h4.166c.867 0 1.581-.714 1.581-1.601s-.714-1.6-1.581-1.6h-4.166c-.867 0-1.6.713-1.6 1.6s.733 1.6 1.6 1.6M47.94 35.963c.617.617 1.62.598 2.237-.02c.618-.616.618-1.638 0-2.236l-2.97-2.97c-.616-.598-1.62-.617-2.236 0a1.63 1.63 0 0 0 0 2.276ZM23.2 49.791l2.506-4.358c.347-.598.155-1.273-.424-1.601c-.578-.347-1.234-.154-1.581.444l-2.526 4.377c-.328.56-.174 1.234.424 1.581a1.19 1.19 0 0 0 1.6-.443m-15.35.019l2.506-4.358c.367-.598.174-1.273-.405-1.6c-.578-.348-1.253-.155-1.6.443l-2.526 4.377c-.328.56-.155 1.234.443 1.582a1.17 1.17 0 0 0 1.581-.444m21.385 5.4l2.507-4.34c.347-.597.154-1.272-.424-1.62c-.579-.327-1.234-.134-1.581.444l-2.546 4.397c-.309.54-.154 1.215.444 1.562a1.154 1.154 0 0 0 1.6-.444m-15.35.019l2.507-4.34c.347-.597.174-1.272-.405-1.619c-.598-.328-1.253-.135-1.6.444L11.86 54.11c-.328.54-.155 1.215.424 1.562a1.154 1.154 0 0 0 1.6-.443"/></svg> </template>
CSS
.icon-cloud-sun-rain {
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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M36.06%209.18c.868%200%201.601-.734%201.601-1.601V3.412c0-.887-.733-1.6-1.6-1.6c-.887%200-1.62.713-1.62%201.6V7.58c0%20.867.733%201.6%201.62%201.6M24.858%2012.9c.636.637%201.697.618%202.294%200c.58-.616.598-1.619%200-2.236l-2.988-2.99c-.617-.616-1.62-.597-2.237%200c-.617.618-.617%201.64%200%202.276Zm20.113%200c.598.618%201.639.637%202.275%200l2.931-2.95c.618-.636.618-1.658%200-2.275c-.617-.598-1.62-.617-2.237%200l-2.97%202.989c-.616.617-.597%201.62%200%202.237M8.176%2040.748h20.865c5.573%200%209.893-4.204%209.893-9.642v-.174c3.895-1.253%206.653-4.86%206.653-9.121c0-5.303-4.243-9.565-9.526-9.565a9.51%209.51%200%200%200-9.102%206.653c-2.314-2.622-5.554-4.165-9.218-4.165c-6.383%200-11.724%204.936-12.36%2011.261C2.16%2026.998%200%2029.795%200%2033.285c0%204.358%203.259%207.463%208.176%207.463M36.061%2015.08c3.76%200%206.691%202.95%206.691%206.73a6.71%206.71%200%200%201-4.281%206.306c-1.234-3.703-4.724-6.287-9.121-6.538c.116-3.683%203.027-6.498%206.71-6.498M8.099%2037.66c-3.278%200-5.014-1.87-5.014-4.3c0-2.025%201.196-3.838%204.03-4.59c.926-.25%201.274-.675%201.35-1.639c.444-5.419%204.455-9.314%209.276-9.314c3.741%200%206.653%202.063%208.446%205.67c.405.829.887%201.099%201.87%201.099c4.976%200%207.792%203.008%207.792%206.595c0%203.606-2.932%206.48-6.75%206.48Zm42.154-14.25h4.166c.867%200%201.581-.714%201.581-1.601s-.714-1.6-1.581-1.6h-4.166c-.867%200-1.6.713-1.6%201.6s.733%201.6%201.6%201.6M47.94%2035.963c.617.617%201.62.598%202.237-.02c.618-.616.618-1.638%200-2.236l-2.97-2.97c-.616-.598-1.62-.617-2.236%200a1.63%201.63%200%200%200%200%202.276ZM23.2%2049.791l2.506-4.358c.347-.598.155-1.273-.424-1.601c-.578-.347-1.234-.154-1.581.444l-2.526%204.377c-.328.56-.174%201.234.424%201.581a1.19%201.19%200%200%200%201.6-.443m-15.35.019l2.506-4.358c.367-.598.174-1.273-.405-1.6c-.578-.348-1.253-.155-1.6.443l-2.526%204.377c-.328.56-.155%201.234.443%201.582a1.17%201.17%200%200%200%201.581-.444m21.385%205.4l2.507-4.34c.347-.597.154-1.272-.424-1.62c-.579-.327-1.234-.134-1.581.444l-2.546%204.397c-.309.54-.154%201.215.444%201.562a1.154%201.154%200%200%200%201.6-.444m-15.35.019l2.507-4.34c.347-.597.174-1.272-.405-1.619c-.598-.328-1.253-.135-1.6.444L11.86%2054.11c-.328.54-.155%201.215.424%201.562a1.154%201.154%200%200%200%201.6-.443%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%2056%2056%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M36.06%209.18c.868%200%201.601-.734%201.601-1.601V3.412c0-.887-.733-1.6-1.6-1.6c-.887%200-1.62.713-1.62%201.6V7.58c0%20.867.733%201.6%201.62%201.6M24.858%2012.9c.636.637%201.697.618%202.294%200c.58-.616.598-1.619%200-2.236l-2.988-2.99c-.617-.616-1.62-.597-2.237%200c-.617.618-.617%201.64%200%202.276Zm20.113%200c.598.618%201.639.637%202.275%200l2.931-2.95c.618-.636.618-1.658%200-2.275c-.617-.598-1.62-.617-2.237%200l-2.97%202.989c-.616.617-.597%201.62%200%202.237M8.176%2040.748h20.865c5.573%200%209.893-4.204%209.893-9.642v-.174c3.895-1.253%206.653-4.86%206.653-9.121c0-5.303-4.243-9.565-9.526-9.565a9.51%209.51%200%200%200-9.102%206.653c-2.314-2.622-5.554-4.165-9.218-4.165c-6.383%200-11.724%204.936-12.36%2011.261C2.16%2026.998%200%2029.795%200%2033.285c0%204.358%203.259%207.463%208.176%207.463M36.061%2015.08c3.76%200%206.691%202.95%206.691%206.73a6.71%206.71%200%200%201-4.281%206.306c-1.234-3.703-4.724-6.287-9.121-6.538c.116-3.683%203.027-6.498%206.71-6.498M8.099%2037.66c-3.278%200-5.014-1.87-5.014-4.3c0-2.025%201.196-3.838%204.03-4.59c.926-.25%201.274-.675%201.35-1.639c.444-5.419%204.455-9.314%209.276-9.314c3.741%200%206.653%202.063%208.446%205.67c.405.829.887%201.099%201.87%201.099c4.976%200%207.792%203.008%207.792%206.595c0%203.606-2.932%206.48-6.75%206.48Zm42.154-14.25h4.166c.867%200%201.581-.714%201.581-1.601s-.714-1.6-1.581-1.6h-4.166c-.867%200-1.6.713-1.6%201.6s.733%201.6%201.6%201.6M47.94%2035.963c.617.617%201.62.598%202.237-.02c.618-.616.618-1.638%200-2.236l-2.97-2.97c-.616-.598-1.62-.617-2.236%200a1.63%201.63%200%200%200%200%202.276ZM23.2%2049.791l2.506-4.358c.347-.598.155-1.273-.424-1.601c-.578-.347-1.234-.154-1.581.444l-2.526%204.377c-.328.56-.174%201.234.424%201.581a1.19%201.19%200%200%200%201.6-.443m-15.35.019l2.506-4.358c.367-.598.174-1.273-.405-1.6c-.578-.348-1.253-.155-1.6.443l-2.526%204.377c-.328.56-.155%201.234.443%201.582a1.17%201.17%200%200%200%201.581-.444m21.385%205.4l2.507-4.34c.347-.597.154-1.272-.424-1.62c-.579-.327-1.234-.134-1.581.444l-2.546%204.397c-.309.54-.154%201.215.444%201.562a1.154%201.154%200%200%200%201.6-.444m-15.35.019l2.507-4.34c.347-.597.174-1.272-.405-1.619c-.598-.328-1.253-.135-1.6.444L11.86%2054.11c-.328.54-.155%201.215.424%201.562a1.154%201.154%200%200%200%201.6-.443%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/cloud-sun-rain.svg?color=%231a73e8&size=48
