Gentleface › Weather › cloud-sun

cloud-sun icon

Cloud sun: partly cloudy, partly sunny, weather, mostly sunny. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8.5 1C8.641 1 8.759 1.048 8.856 1.144C8.952 1.241 9 1.359 9 1.5L9 2.5C9 2.641 8.952 2.759 8.856 2.856C8.759 2.952 8.641 3 8.5 3C8.359 3 8.241 2.952 8.144 2.856C8.048 2.759 8 2.641 8 2.5L8 1.5C8 1.359 8.048 1.241 8.144 1.144C8.241 1.048 8.359 1 8.5 1ZM12.854 3.854C12.754 3.953 12.636 4.003 12.5 4.003C12.364 4.003 12.246 3.953 12.146 3.854C12.049 3.756 12 3.638 12 3.5C12 3.362 12.049 3.244 12.146 3.146L13.146 2.146C13.246 2.047 13.364 1.997 13.5 1.997C13.636 1.997 13.754 2.047 13.854 2.146C13.951 2.244 14 2.362 14 2.5C14 2.638 13.951 2.756 13.854 2.854L12.854 3.854ZM3.146 2.854C3.047 2.754 2.997 2.636 2.997 2.5C2.997 2.364 3.047 2.246 3.146 2.146C3.244 2.049 3.362 2 3.5 2C3.638 2 3.756 2.049 3.854 2.146L4.854 3.146C4.951 3.244 5 3.362 5 3.5C5 3.638 4.951 3.756 4.854 3.854C4.754 3.953 4.636 4.003 4.5 4.003C4.364 4.003 4.246 3.953 4.146 3.854L3.146 2.854ZM8.5 4C8.945 4 9.375 4.082 9.788 4.246C10.238 4.424 10.633 4.683 10.975 5.025C11.317 5.367 11.576 5.762 11.754 6.212C11.918 6.625 12 7.055 12 7.5C12 8.05 11.877 8.571 11.631 9.064C11.568 9.19 11.472 9.274 11.343 9.318C11.214 9.361 11.087 9.351 10.961 9.288C10.834 9.225 10.75 9.129 10.707 9C10.664 8.871 10.674 8.743 10.737 8.617C10.912 8.265 11 7.893 11 7.5C11 7.182 10.941 6.875 10.824 6.58C10.697 6.259 10.512 5.976 10.268 5.732C10.024 5.488 9.741 5.303 9.42 5.176C9.125 5.059 8.818 5 8.5 5C8.12 5 7.759 5.082 7.416 5.247C7.074 5.412 6.784 5.643 6.546 5.94C6.46 6.048 6.349 6.11 6.211 6.125C6.182 6.128 6.153 6.129 6.125 6.128C6.075 6.116 6.024 6.105 5.973 6.095C5.928 6.077 5.885 6.051 5.844 6.019C5.736 5.933 5.674 5.821 5.659 5.684C5.643 5.546 5.679 5.424 5.765 5.316C6.097 4.9 6.503 4.577 6.982 4.346C7.462 4.115 7.968 4 8.5 4ZM2.202 13.859C1.814 13.479 1.515 13.037 1.306 12.535C1.114 12.072 1.012 11.589 1.001 11.087C0.99 10.585 1.071 10.098 1.243 9.627C1.43 9.116 1.709 8.662 2.081 8.265C2.453 7.868 2.887 7.56 3.385 7.341C3.844 7.138 4.325 7.026 4.826 7.004C5.328 6.982 5.816 7.052 6.292 7.214C6.806 7.39 7.266 7.659 7.671 8.022C8.076 8.385 8.393 8.813 8.624 9.306C8.74 9.555 8.83 9.811 8.892 10.074C9.013 10.044 9.137 10.023 9.264 10.011C9.673 9.972 10.069 10.031 10.449 10.187C10.83 10.343 11.152 10.579 11.417 10.895C11.652 11.176 11.818 11.494 11.913 11.848C12.009 12.202 12.026 12.56 11.964 12.921C11.895 13.327 11.735 13.693 11.485 14.02C11.235 14.347 10.923 14.596 10.55 14.769C10.217 14.923 9.867 15 9.5 15L5 15C4.498 15 4.013 14.909 3.545 14.726C3.039 14.528 2.591 14.239 2.202 13.859ZM13 7.5C13 7.359 13.048 7.241 13.144 7.144C13.241 7.048 13.359 7 13.5 7L14.5 7C14.641 7 14.759 7.048 14.856 7.144C14.952 7.241 15 7.359 15 7.5C15 7.641 14.952 7.759 14.856 7.856C14.759 7.952 14.641 8 14.5 8L13.5 8C13.359 8 13.241 7.952 13.144 7.856C13.048 7.759 13 7.641 13 7.5ZM10.691 13.412C10.841 13.216 10.937 12.996 10.979 12.753C11.016 12.536 11.005 12.321 10.948 12.109C10.891 11.896 10.791 11.706 10.65 11.537C10.491 11.348 10.298 11.206 10.07 11.112C9.841 11.019 9.604 10.983 9.358 11.007C9.139 11.028 8.935 11.093 8.744 11.204C8.677 11.244 8.603 11.266 8.525 11.271C8.384 11.28 8.263 11.24 8.161 11.15C8.059 11.061 8.003 10.945 7.994 10.805C7.969 10.429 7.877 10.071 7.718 9.729C7.545 9.36 7.307 9.039 7.003 8.767C6.7 8.494 6.355 8.292 5.969 8.161C5.612 8.039 5.246 7.986 4.87 8.003C4.494 8.019 4.133 8.103 3.789 8.255C3.416 8.42 3.09 8.651 2.811 8.949C2.532 9.247 2.322 9.587 2.182 9.97C2.053 10.324 1.993 10.689 2.001 11.065C2.009 11.442 2.085 11.804 2.23 12.151C2.386 12.528 2.61 12.859 2.902 13.144C3.193 13.429 3.529 13.646 3.909 13.795C4.26 13.932 4.623 14 5 14L9.5 14C9.72 14 9.93 13.954 10.13 13.861C10.354 13.758 10.541 13.608 10.691 13.412Z"/></svg>

React

// Gentleface "cloud-sun" (line-round), MIT. https://gentleface.com/icons/cloud-sun
import type { SVGProps } from 'react';

export function CloudSunIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M8.5 1C8.641 1 8.759 1.048 8.856 1.144C8.952 1.241 9 1.359 9 1.5L9 2.5C9 2.641 8.952 2.759 8.856 2.856C8.759 2.952 8.641 3 8.5 3C8.359 3 8.241 2.952 8.144 2.856C8.048 2.759 8 2.641 8 2.5L8 1.5C8 1.359 8.048 1.241 8.144 1.144C8.241 1.048 8.359 1 8.5 1ZM12.854 3.854C12.754 3.953 12.636 4.003 12.5 4.003C12.364 4.003 12.246 3.953 12.146 3.854C12.049 3.756 12 3.638 12 3.5C12 3.362 12.049 3.244 12.146 3.146L13.146 2.146C13.246 2.047 13.364 1.997 13.5 1.997C13.636 1.997 13.754 2.047 13.854 2.146C13.951 2.244 14 2.362 14 2.5C14 2.638 13.951 2.756 13.854 2.854L12.854 3.854ZM3.146 2.854C3.047 2.754 2.997 2.636 2.997 2.5C2.997 2.364 3.047 2.246 3.146 2.146C3.244 2.049 3.362 2 3.5 2C3.638 2 3.756 2.049 3.854 2.146L4.854 3.146C4.951 3.244 5 3.362 5 3.5C5 3.638 4.951 3.756 4.854 3.854C4.754 3.953 4.636 4.003 4.5 4.003C4.364 4.003 4.246 3.953 4.146 3.854L3.146 2.854ZM8.5 4C8.945 4 9.375 4.082 9.788 4.246C10.238 4.424 10.633 4.683 10.975 5.025C11.317 5.367 11.576 5.762 11.754 6.212C11.918 6.625 12 7.055 12 7.5C12 8.05 11.877 8.571 11.631 9.064C11.568 9.19 11.472 9.274 11.343 9.318C11.214 9.361 11.087 9.351 10.961 9.288C10.834 9.225 10.75 9.129 10.707 9C10.664 8.871 10.674 8.743 10.737 8.617C10.912 8.265 11 7.893 11 7.5C11 7.182 10.941 6.875 10.824 6.58C10.697 6.259 10.512 5.976 10.268 5.732C10.024 5.488 9.741 5.303 9.42 5.176C9.125 5.059 8.818 5 8.5 5C8.12 5 7.759 5.082 7.416 5.247C7.074 5.412 6.784 5.643 6.546 5.94C6.46 6.048 6.349 6.11 6.211 6.125C6.182 6.128 6.153 6.129 6.125 6.128C6.075 6.116 6.024 6.105 5.973 6.095C5.928 6.077 5.885 6.051 5.844 6.019C5.736 5.933 5.674 5.821 5.659 5.684C5.643 5.546 5.679 5.424 5.765 5.316C6.097 4.9 6.503 4.577 6.982 4.346C7.462 4.115 7.968 4 8.5 4ZM2.202 13.859C1.814 13.479 1.515 13.037 1.306 12.535C1.114 12.072 1.012 11.589 1.001 11.087C0.99 10.585 1.071 10.098 1.243 9.627C1.43 9.116 1.709 8.662 2.081 8.265C2.453 7.868 2.887 7.56 3.385 7.341C3.844 7.138 4.325 7.026 4.826 7.004C5.328 6.982 5.816 7.052 6.292 7.214C6.806 7.39 7.266 7.659 7.671 8.022C8.076 8.385 8.393 8.813 8.624 9.306C8.74 9.555 8.83 9.811 8.892 10.074C9.013 10.044 9.137 10.023 9.264 10.011C9.673 9.972 10.069 10.031 10.449 10.187C10.83 10.343 11.152 10.579 11.417 10.895C11.652 11.176 11.818 11.494 11.913 11.848C12.009 12.202 12.026 12.56 11.964 12.921C11.895 13.327 11.735 13.693 11.485 14.02C11.235 14.347 10.923 14.596 10.55 14.769C10.217 14.923 9.867 15 9.5 15L5 15C4.498 15 4.013 14.909 3.545 14.726C3.039 14.528 2.591 14.239 2.202 13.859ZM13 7.5C13 7.359 13.048 7.241 13.144 7.144C13.241 7.048 13.359 7 13.5 7L14.5 7C14.641 7 14.759 7.048 14.856 7.144C14.952 7.241 15 7.359 15 7.5C15 7.641 14.952 7.759 14.856 7.856C14.759 7.952 14.641 8 14.5 8L13.5 8C13.359 8 13.241 7.952 13.144 7.856C13.048 7.759 13 7.641 13 7.5ZM10.691 13.412C10.841 13.216 10.937 12.996 10.979 12.753C11.016 12.536 11.005 12.321 10.948 12.109C10.891 11.896 10.791 11.706 10.65 11.537C10.491 11.348 10.298 11.206 10.07 11.112C9.841 11.019 9.604 10.983 9.358 11.007C9.139 11.028 8.935 11.093 8.744 11.204C8.677 11.244 8.603 11.266 8.525 11.271C8.384 11.28 8.263 11.24 8.161 11.15C8.059 11.061 8.003 10.945 7.994 10.805C7.969 10.429 7.877 10.071 7.718 9.729C7.545 9.36 7.307 9.039 7.003 8.767C6.7 8.494 6.355 8.292 5.969 8.161C5.612 8.039 5.246 7.986 4.87 8.003C4.494 8.019 4.133 8.103 3.789 8.255C3.416 8.42 3.09 8.651 2.811 8.949C2.532 9.247 2.322 9.587 2.182 9.97C2.053 10.324 1.993 10.689 2.001 11.065C2.009 11.442 2.085 11.804 2.23 12.151C2.386 12.528 2.61 12.859 2.902 13.144C3.193 13.429 3.529 13.646 3.909 13.795C4.26 13.932 4.623 14 5 14L9.5 14C9.72 14 9.93 13.954 10.13 13.861C10.354 13.758 10.541 13.608 10.691 13.412Z" />
    </svg>
  );
}

Vue

Vue: see /icons/cloud-sun.md

Svelte

Svelte: see /icons/cloud-sun.md

HTML img

HTML img: see /icons/cloud-sun.md

CSS

CSS: see /icons/cloud-sun.md

Data URL

Data URL: see /icons/cloud-sun.md

Sprite

Sprite: see /icons/cloud-sun.md

SwiftUI

SwiftUI: see /icons/cloud-sun.md

Compose

Compose: see /icons/cloud-sun.md

Android XML

Android XML: see /icons/cloud-sun.md

Flutter

Flutter: see /icons/cloud-sun.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

partly cloudy, partly sunny, weather, mostly sunny, few clouds, partly cloudy day, forecast, weather forecast, meteorology

Alternatives

clouds: overcast or mostly cloudy
cloud-moon: partly cloudy at night

Also fits

cloudy: partly cloudy (partly-cloudy)
partly cloudy night: partly cloudy by day
sunny: partly cloudy or partly sunny

Tags

weather, partly-cloudy, sun, cloud, forecast, day

Category

Weather

Component name

CloudSunIcon

History

2026-10-15 added

Family 22

cloud cloud-alert cloud-arrow-down cloud-arrow-up cloud-check cloud-clock cloud-fog cloud-gear cloud-hail cloud-lightning cloud-lock cloud-moon

More weather icons

air-quality droplet droplet-alert droplet-off haze hurricane moon moon-star rainbow snowflake sun sunrise sunset thermometer thermometer-snowflake tornado · all weather icons

For agents

Metadata: /icons/cloud-sun.json · Markdown: /icons/cloud-sun.md · SVG: https://gentleface.com/svg/{style}/16/cloud-sun.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/cloud-sun.png

cloud-sun icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp