cloud sun icon
cloud-sun-fill from Framework7 Icons by Vladimir Kharlampidi · Fill · MIT Free for personal and commercial use.
- Name
- cloud-sun-fill
- Set
- Framework7 Icons
- Style
- Fill
- 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="M35.986 17.817c.89 0 1.605-.735 1.605-1.605v-4.177c0-.89-.715-1.605-1.605-1.605s-1.605.715-1.605 1.605v4.177c0 .87.716 1.605 1.605 1.605m-11.215 3.732c.638.638 1.682.618 2.282 0c.599-.62.618-1.625 0-2.244l-2.978-2.977a1.593 1.593 0 0 0-2.263 0c-.619.599-.619 1.624 0 2.262Zm20.15 0c.599.618 1.643.638 2.28 0l2.96-2.959c.618-.638.599-1.663 0-2.262a1.593 1.593 0 0 0-2.263 0l-2.978 2.977c-.619.62-.6 1.625 0 2.244m-3.965 17.21c2.842-1.915 4.602-4.873 4.602-8.277a9.55 9.55 0 0 0-9.572-9.59c-3.5 0-6.536 1.875-8.14 4.679c.812.831 1.508 1.74 2.088 2.862c6.38.522 10.5 4.486 11.022 10.326M8.025 49.413h20.923c5.472 0 9.726-4.138 9.726-9.494c0-5.337-4.331-9.36-10.113-9.398c-2.263-4.312-6.285-6.826-10.964-6.826c-6.285 0-11.622 4.892-12.202 11.235C2.108 35.916 0 38.7 0 42.104c0 4.331 3.268 7.31 8.025 7.31m42.194-17.326h4.176c.87 0 1.586-.715 1.605-1.605c0-.89-.735-1.605-1.605-1.605h-4.177c-.87 0-1.605.716-1.605 1.605c0 .89.735 1.605 1.605 1.605m-2.32 12.589a1.61 1.61 0 0 0 2.261-.02c.6-.618.62-1.643 0-2.243l-2.997-2.978c-.618-.599-1.624-.618-2.243 0a1.634 1.634 0 0 0 0 2.282Z"/></svg>
React
import type { SVGProps } from "react";
export function F7CloudSunFill(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="M35.986 17.817c.89 0 1.605-.735 1.605-1.605v-4.177c0-.89-.715-1.605-1.605-1.605s-1.605.715-1.605 1.605v4.177c0 .87.716 1.605 1.605 1.605m-11.215 3.732c.638.638 1.682.618 2.282 0c.599-.62.618-1.625 0-2.244l-2.978-2.977a1.593 1.593 0 0 0-2.263 0c-.619.599-.619 1.624 0 2.262Zm20.15 0c.599.618 1.643.638 2.28 0l2.96-2.959c.618-.638.599-1.663 0-2.262a1.593 1.593 0 0 0-2.263 0l-2.978 2.977c-.619.62-.6 1.625 0 2.244m-3.965 17.21c2.842-1.915 4.602-4.873 4.602-8.277a9.55 9.55 0 0 0-9.572-9.59c-3.5 0-6.536 1.875-8.14 4.679c.812.831 1.508 1.74 2.088 2.862c6.38.522 10.5 4.486 11.022 10.326M8.025 49.413h20.923c5.472 0 9.726-4.138 9.726-9.494c0-5.337-4.331-9.36-10.113-9.398c-2.263-4.312-6.285-6.826-10.964-6.826c-6.285 0-11.622 4.892-12.202 11.235C2.108 35.916 0 38.7 0 42.104c0 4.331 3.268 7.31 8.025 7.31m42.194-17.326h4.176c.87 0 1.586-.715 1.605-1.605c0-.89-.735-1.605-1.605-1.605h-4.177c-.87 0-1.605.716-1.605 1.605c0 .89.735 1.605 1.605 1.605m-2.32 12.589a1.61 1.61 0 0 0 2.261-.02c.6-.618.62-1.643 0-2.243l-2.997-2.978c-.618-.599-1.624-.618-2.243 0a1.634 1.634 0 0 0 0 2.282Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 56 56"><path fill="currentColor" d="M35.986 17.817c.89 0 1.605-.735 1.605-1.605v-4.177c0-.89-.715-1.605-1.605-1.605s-1.605.715-1.605 1.605v4.177c0 .87.716 1.605 1.605 1.605m-11.215 3.732c.638.638 1.682.618 2.282 0c.599-.62.618-1.625 0-2.244l-2.978-2.977a1.593 1.593 0 0 0-2.263 0c-.619.599-.619 1.624 0 2.262Zm20.15 0c.599.618 1.643.638 2.28 0l2.96-2.959c.618-.638.599-1.663 0-2.262a1.593 1.593 0 0 0-2.263 0l-2.978 2.977c-.619.62-.6 1.625 0 2.244m-3.965 17.21c2.842-1.915 4.602-4.873 4.602-8.277a9.55 9.55 0 0 0-9.572-9.59c-3.5 0-6.536 1.875-8.14 4.679c.812.831 1.508 1.74 2.088 2.862c6.38.522 10.5 4.486 11.022 10.326M8.025 49.413h20.923c5.472 0 9.726-4.138 9.726-9.494c0-5.337-4.331-9.36-10.113-9.398c-2.263-4.312-6.285-6.826-10.964-6.826c-6.285 0-11.622 4.892-12.202 11.235C2.108 35.916 0 38.7 0 42.104c0 4.331 3.268 7.31 8.025 7.31m42.194-17.326h4.176c.87 0 1.586-.715 1.605-1.605c0-.89-.735-1.605-1.605-1.605h-4.177c-.87 0-1.605.716-1.605 1.605c0 .89.735 1.605 1.605 1.605m-2.32 12.589a1.61 1.61 0 0 0 2.261-.02c.6-.618.62-1.643 0-2.243l-2.997-2.978c-.618-.599-1.624-.618-2.243 0a1.634 1.634 0 0 0 0 2.282Z"/></svg> </template>
CSS
.icon-cloud-sun-fill {
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%22M35.986%2017.817c.89%200%201.605-.735%201.605-1.605v-4.177c0-.89-.715-1.605-1.605-1.605s-1.605.715-1.605%201.605v4.177c0%20.87.716%201.605%201.605%201.605m-11.215%203.732c.638.638%201.682.618%202.282%200c.599-.62.618-1.625%200-2.244l-2.978-2.977a1.593%201.593%200%200%200-2.263%200c-.619.599-.619%201.624%200%202.262Zm20.15%200c.599.618%201.643.638%202.28%200l2.96-2.959c.618-.638.599-1.663%200-2.262a1.593%201.593%200%200%200-2.263%200l-2.978%202.977c-.619.62-.6%201.625%200%202.244m-3.965%2017.21c2.842-1.915%204.602-4.873%204.602-8.277a9.55%209.55%200%200%200-9.572-9.59c-3.5%200-6.536%201.875-8.14%204.679c.812.831%201.508%201.74%202.088%202.862c6.38.522%2010.5%204.486%2011.022%2010.326M8.025%2049.413h20.923c5.472%200%209.726-4.138%209.726-9.494c0-5.337-4.331-9.36-10.113-9.398c-2.263-4.312-6.285-6.826-10.964-6.826c-6.285%200-11.622%204.892-12.202%2011.235C2.108%2035.916%200%2038.7%200%2042.104c0%204.331%203.268%207.31%208.025%207.31m42.194-17.326h4.176c.87%200%201.586-.715%201.605-1.605c0-.89-.735-1.605-1.605-1.605h-4.177c-.87%200-1.605.716-1.605%201.605c0%20.89.735%201.605%201.605%201.605m-2.32%2012.589a1.61%201.61%200%200%200%202.261-.02c.6-.618.62-1.643%200-2.243l-2.997-2.978c-.618-.599-1.624-.618-2.243%200a1.634%201.634%200%200%200%200%202.282Z%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%22M35.986%2017.817c.89%200%201.605-.735%201.605-1.605v-4.177c0-.89-.715-1.605-1.605-1.605s-1.605.715-1.605%201.605v4.177c0%20.87.716%201.605%201.605%201.605m-11.215%203.732c.638.638%201.682.618%202.282%200c.599-.62.618-1.625%200-2.244l-2.978-2.977a1.593%201.593%200%200%200-2.263%200c-.619.599-.619%201.624%200%202.262Zm20.15%200c.599.618%201.643.638%202.28%200l2.96-2.959c.618-.638.599-1.663%200-2.262a1.593%201.593%200%200%200-2.263%200l-2.978%202.977c-.619.62-.6%201.625%200%202.244m-3.965%2017.21c2.842-1.915%204.602-4.873%204.602-8.277a9.55%209.55%200%200%200-9.572-9.59c-3.5%200-6.536%201.875-8.14%204.679c.812.831%201.508%201.74%202.088%202.862c6.38.522%2010.5%204.486%2011.022%2010.326M8.025%2049.413h20.923c5.472%200%209.726-4.138%209.726-9.494c0-5.337-4.331-9.36-10.113-9.398c-2.263-4.312-6.285-6.826-10.964-6.826c-6.285%200-11.622%204.892-12.202%2011.235C2.108%2035.916%200%2038.7%200%2042.104c0%204.331%203.268%207.31%208.025%207.31m42.194-17.326h4.176c.87%200%201.586-.715%201.605-1.605c0-.89-.735-1.605-1.605-1.605h-4.177c-.87%200-1.605.716-1.605%201.605c0%20.89.735%201.605%201.605%201.605m-2.32%2012.589a1.61%201.61%200%200%200%202.261-.02c.6-.618.62-1.643%200-2.243l-2.997-2.978c-.618-.599-1.624-.618-2.243%200a1.634%201.634%200%200%200%200%202.282Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/f7/cloud-sun-fill.svg?color=%231a73e8&size=48
