cloud sun icon
cloud-sun from Framework7 Icons by Vladimir Kharlampidi · Outline · MIT Free for personal and commercial use.
- Name
- cloud-sun
- 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 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 17.837c.868 0 1.601-.752 1.601-1.6V12.07c0-.887-.733-1.6-1.6-1.6c-.887 0-1.62.713-1.62 1.6v4.166c0 .848.733 1.6 1.62 1.6M24.858 21.54c.636.636 1.697.617 2.294 0c.58-.617.598-1.62 0-2.237l-2.988-2.97a1.583 1.583 0 0 0-2.237 0a1.606 1.606 0 0 0 0 2.256Zm20.113 0c.598.617 1.639.636 2.275 0l2.931-2.95a1.606 1.606 0 0 0 0-2.257a1.583 1.583 0 0 0-2.237 0l-2.97 2.97c-.616.617-.597 1.62 0 2.237M8.176 49.405h20.865c5.573 0 9.893-4.223 9.893-9.661v-.155c3.895-1.272 6.653-4.86 6.653-9.14a9.5 9.5 0 0 0-9.526-9.546a9.49 9.49 0 0 0-9.102 6.653c-2.314-2.642-5.554-4.184-9.218-4.184c-6.383 0-11.724 4.936-12.36 11.28C2.16 35.656 0 38.433 0 41.943c0 4.339 3.259 7.463 8.176 7.463M36.061 23.72c3.76 0 6.691 2.95 6.691 6.73c0 2.892-1.735 5.322-4.281 6.306c-1.234-3.684-4.724-6.268-9.121-6.538c.116-3.663 3.027-6.498 6.71-6.498M8.098 46.32c-3.278 0-5.014-1.89-5.014-4.3c0-2.044 1.196-3.857 4.03-4.609c.926-.25 1.274-.655 1.35-1.639c.444-5.4 4.455-9.295 9.276-9.295c3.741 0 6.653 2.064 8.446 5.65c.405.83.887 1.119 1.87 1.119c4.976 0 7.792 3.008 7.792 6.595s-2.932 6.48-6.75 6.48Zm42.154-14.27h4.166c.867 0 1.581-.713 1.581-1.6a1.59 1.59 0 0 0-1.581-1.582h-4.166c-.867 0-1.6.714-1.6 1.582c0 .887.733 1.6 1.6 1.6M47.94 44.603c.617.617 1.62.598 2.237-.02c.618-.616.618-1.638 0-2.236l-2.97-2.95c-.616-.598-1.62-.618-2.236 0a1.607 1.607 0 0 0 0 2.256Z"/></svg>
React
import type { SVGProps } from "react";
export function F7CloudSun(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 17.837c.868 0 1.601-.752 1.601-1.6V12.07c0-.887-.733-1.6-1.6-1.6c-.887 0-1.62.713-1.62 1.6v4.166c0 .848.733 1.6 1.62 1.6M24.858 21.54c.636.636 1.697.617 2.294 0c.58-.617.598-1.62 0-2.237l-2.988-2.97a1.583 1.583 0 0 0-2.237 0a1.606 1.606 0 0 0 0 2.256Zm20.113 0c.598.617 1.639.636 2.275 0l2.931-2.95a1.606 1.606 0 0 0 0-2.257a1.583 1.583 0 0 0-2.237 0l-2.97 2.97c-.616.617-.597 1.62 0 2.237M8.176 49.405h20.865c5.573 0 9.893-4.223 9.893-9.661v-.155c3.895-1.272 6.653-4.86 6.653-9.14a9.5 9.5 0 0 0-9.526-9.546a9.49 9.49 0 0 0-9.102 6.653c-2.314-2.642-5.554-4.184-9.218-4.184c-6.383 0-11.724 4.936-12.36 11.28C2.16 35.656 0 38.433 0 41.943c0 4.339 3.259 7.463 8.176 7.463M36.061 23.72c3.76 0 6.691 2.95 6.691 6.73c0 2.892-1.735 5.322-4.281 6.306c-1.234-3.684-4.724-6.268-9.121-6.538c.116-3.663 3.027-6.498 6.71-6.498M8.098 46.32c-3.278 0-5.014-1.89-5.014-4.3c0-2.044 1.196-3.857 4.03-4.609c.926-.25 1.274-.655 1.35-1.639c.444-5.4 4.455-9.295 9.276-9.295c3.741 0 6.653 2.064 8.446 5.65c.405.83.887 1.119 1.87 1.119c4.976 0 7.792 3.008 7.792 6.595s-2.932 6.48-6.75 6.48Zm42.154-14.27h4.166c.867 0 1.581-.713 1.581-1.6a1.59 1.59 0 0 0-1.581-1.582h-4.166c-.867 0-1.6.714-1.6 1.582c0 .887.733 1.6 1.6 1.6M47.94 44.603c.617.617 1.62.598 2.237-.02c.618-.616.618-1.638 0-2.236l-2.97-2.95c-.616-.598-1.62-.618-2.236 0a1.607 1.607 0 0 0 0 2.256Z"/></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 17.837c.868 0 1.601-.752 1.601-1.6V12.07c0-.887-.733-1.6-1.6-1.6c-.887 0-1.62.713-1.62 1.6v4.166c0 .848.733 1.6 1.62 1.6M24.858 21.54c.636.636 1.697.617 2.294 0c.58-.617.598-1.62 0-2.237l-2.988-2.97a1.583 1.583 0 0 0-2.237 0a1.606 1.606 0 0 0 0 2.256Zm20.113 0c.598.617 1.639.636 2.275 0l2.931-2.95a1.606 1.606 0 0 0 0-2.257a1.583 1.583 0 0 0-2.237 0l-2.97 2.97c-.616.617-.597 1.62 0 2.237M8.176 49.405h20.865c5.573 0 9.893-4.223 9.893-9.661v-.155c3.895-1.272 6.653-4.86 6.653-9.14a9.5 9.5 0 0 0-9.526-9.546a9.49 9.49 0 0 0-9.102 6.653c-2.314-2.642-5.554-4.184-9.218-4.184c-6.383 0-11.724 4.936-12.36 11.28C2.16 35.656 0 38.433 0 41.943c0 4.339 3.259 7.463 8.176 7.463M36.061 23.72c3.76 0 6.691 2.95 6.691 6.73c0 2.892-1.735 5.322-4.281 6.306c-1.234-3.684-4.724-6.268-9.121-6.538c.116-3.663 3.027-6.498 6.71-6.498M8.098 46.32c-3.278 0-5.014-1.89-5.014-4.3c0-2.044 1.196-3.857 4.03-4.609c.926-.25 1.274-.655 1.35-1.639c.444-5.4 4.455-9.295 9.276-9.295c3.741 0 6.653 2.064 8.446 5.65c.405.83.887 1.119 1.87 1.119c4.976 0 7.792 3.008 7.792 6.595s-2.932 6.48-6.75 6.48Zm42.154-14.27h4.166c.867 0 1.581-.713 1.581-1.6a1.59 1.59 0 0 0-1.581-1.582h-4.166c-.867 0-1.6.714-1.6 1.582c0 .887.733 1.6 1.6 1.6M47.94 44.603c.617.617 1.62.598 2.237-.02c.618-.616.618-1.638 0-2.236l-2.97-2.95c-.616-.598-1.62-.618-2.236 0a1.607 1.607 0 0 0 0 2.256Z"/></svg> </template>
CSS
.icon-cloud-sun {
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%2017.837c.868%200%201.601-.752%201.601-1.6V12.07c0-.887-.733-1.6-1.6-1.6c-.887%200-1.62.713-1.62%201.6v4.166c0%20.848.733%201.6%201.62%201.6M24.858%2021.54c.636.636%201.697.617%202.294%200c.58-.617.598-1.62%200-2.237l-2.988-2.97a1.583%201.583%200%200%200-2.237%200a1.606%201.606%200%200%200%200%202.256Zm20.113%200c.598.617%201.639.636%202.275%200l2.931-2.95a1.606%201.606%200%200%200%200-2.257a1.583%201.583%200%200%200-2.237%200l-2.97%202.97c-.616.617-.597%201.62%200%202.237M8.176%2049.405h20.865c5.573%200%209.893-4.223%209.893-9.661v-.155c3.895-1.272%206.653-4.86%206.653-9.14a9.5%209.5%200%200%200-9.526-9.546a9.49%209.49%200%200%200-9.102%206.653c-2.314-2.642-5.554-4.184-9.218-4.184c-6.383%200-11.724%204.936-12.36%2011.28C2.16%2035.656%200%2038.433%200%2041.943c0%204.339%203.259%207.463%208.176%207.463M36.061%2023.72c3.76%200%206.691%202.95%206.691%206.73c0%202.892-1.735%205.322-4.281%206.306c-1.234-3.684-4.724-6.268-9.121-6.538c.116-3.663%203.027-6.498%206.71-6.498M8.098%2046.32c-3.278%200-5.014-1.89-5.014-4.3c0-2.044%201.196-3.857%204.03-4.609c.926-.25%201.274-.655%201.35-1.639c.444-5.4%204.455-9.295%209.276-9.295c3.741%200%206.653%202.064%208.446%205.65c.405.83.887%201.119%201.87%201.119c4.976%200%207.792%203.008%207.792%206.595s-2.932%206.48-6.75%206.48Zm42.154-14.27h4.166c.867%200%201.581-.713%201.581-1.6a1.59%201.59%200%200%200-1.581-1.582h-4.166c-.867%200-1.6.714-1.6%201.582c0%20.887.733%201.6%201.6%201.6M47.94%2044.603c.617.617%201.62.598%202.237-.02c.618-.616.618-1.638%200-2.236l-2.97-2.95c-.616-.598-1.62-.618-2.236%200a1.607%201.607%200%200%200%200%202.256Z%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%2017.837c.868%200%201.601-.752%201.601-1.6V12.07c0-.887-.733-1.6-1.6-1.6c-.887%200-1.62.713-1.62%201.6v4.166c0%20.848.733%201.6%201.62%201.6M24.858%2021.54c.636.636%201.697.617%202.294%200c.58-.617.598-1.62%200-2.237l-2.988-2.97a1.583%201.583%200%200%200-2.237%200a1.606%201.606%200%200%200%200%202.256Zm20.113%200c.598.617%201.639.636%202.275%200l2.931-2.95a1.606%201.606%200%200%200%200-2.257a1.583%201.583%200%200%200-2.237%200l-2.97%202.97c-.616.617-.597%201.62%200%202.237M8.176%2049.405h20.865c5.573%200%209.893-4.223%209.893-9.661v-.155c3.895-1.272%206.653-4.86%206.653-9.14a9.5%209.5%200%200%200-9.526-9.546a9.49%209.49%200%200%200-9.102%206.653c-2.314-2.642-5.554-4.184-9.218-4.184c-6.383%200-11.724%204.936-12.36%2011.28C2.16%2035.656%200%2038.433%200%2041.943c0%204.339%203.259%207.463%208.176%207.463M36.061%2023.72c3.76%200%206.691%202.95%206.691%206.73c0%202.892-1.735%205.322-4.281%206.306c-1.234-3.684-4.724-6.268-9.121-6.538c.116-3.663%203.027-6.498%206.71-6.498M8.098%2046.32c-3.278%200-5.014-1.89-5.014-4.3c0-2.044%201.196-3.857%204.03-4.609c.926-.25%201.274-.655%201.35-1.639c.444-5.4%204.455-9.295%209.276-9.295c3.741%200%206.653%202.064%208.446%205.65c.405.83.887%201.119%201.87%201.119c4.976%200%207.792%203.008%207.792%206.595s-2.932%206.48-6.75%206.48Zm42.154-14.27h4.166c.867%200%201.581-.713%201.581-1.6a1.59%201.59%200%200%200-1.581-1.582h-4.166c-.867%200-1.6.714-1.6%201.582c0%20.887.733%201.6%201.6%201.6M47.94%2044.603c.617.617%201.62.598%202.237-.02c.618-.616.618-1.638%200-2.236l-2.97-2.95c-.616-.598-1.62-.618-2.236%200a1.607%201.607%200%200%200%200%202.256Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/cloud-sun.svg?color=%231a73e8&size=48
