Cloud Sun Outline icon

solar:cloud-sun-outline

The Cloud Sun Outline icon (solar:cloud-sun-outline) is a free SVG icon from the Solar set by 480 Design. It is drawn on a 24 × 24 grid. Solar icons are released under the CC BY 4.0 license, which allows use in personal and commercial projects as long as you credit the author. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: Solar
Author: 480 Design
License: CC-BY-4.0
Size: 24 × 24
Category: Weather
Tags: cloudsun, sunoutline, cloudsunoutline

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M7 2.75C4.65279 2.75 2.75 4.65279 2.75 7C2.75 8.72851 3.78199 10.2176 5.26645 10.8817C5.54141 10.8257 5.82445 10.7919 6.11351 10.7823C6.04673 10.4136 6.0119 10.0341 6.0119 9.64706C6.0119 7.04812 7.57519 4.81845 9.81503 3.8158C9.06486 3.15194 8.07943 2.75 7 2.75ZM11.4296 3.33353C10.3759 2.06196 8.78267 1.25 7 1.25C3.82436 1.25 1.25 3.82436 1.25 7C1.25 8.87506 2.14744 10.5395 3.53468 11.5887C2.16077 12.4772 1.25 14.0127 1.25 15.7647C1.25 18.5264 3.51296 20.75 6.28571 20.75H16.2857C19.8474 20.75 22.75 17.8943 22.75 14.3529C22.75 11.7093 21.1313 9.44751 18.8314 8.47127C18.2724 5.49369 15.6343 3.25 12.4762 3.25C12.12 3.25 11.7703 3.27857 11.4296 3.33353ZM17.1577 8.01367C16.477 6.11631 14.6422 4.75 12.4762 4.75C9.7261 4.75 7.5119 6.95083 7.5119 9.64706C7.5119 10.1092 7.5766 10.5555 7.69729 10.9781C8.19448 11.1216 8.65991 11.3389 9.08045 11.6171C9.42592 11.8456 9.52072 12.3109 9.29219 12.6564C9.06366 13.0019 8.59835 13.0967 8.25288 12.8681C7.87207 12.6162 7.43917 12.4355 6.97329 12.3451C6.75147 12.3021 6.52165 12.2794 6.28571 12.2794C4.3246 12.2794 2.75 13.8482 2.75 15.7647C2.75 17.6812 4.3246 19.25 6.28571 19.25H16.2857C19.0358 19.25 21.25 17.0492 21.25 14.3529C21.25 12.2162 19.8607 10.3909 17.9124 9.72463C17.4038 9.55072 16.8568 9.45588 16.2857 9.45588C15.9662 9.45588 15.6542 9.48557 15.3522 9.54219C14.9451 9.61853 14.5175 9.41826 14.381 9.02721C14.2444 8.63617 14.4502 8.20386 14.8544 8.11339C15.3153 8.01024 15.7945 7.95588 16.2857 7.95588C16.5812 7.95588 16.8723 7.97555 17.1577 8.01367Z" clip-rule="evenodd"/></svg>

How to use the Cloud Sun Outline icon

React

import { Icon } from "@iconify/react";

<Icon icon="solar:cloud-sun-outline" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="solar:cloud-sun-outline" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="solar:cloud-sun-outline" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[solar--cloud-sun-outline]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/solar -->
<div class="i-solar:cloud-sun-outline"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="solar:cloud-sun-outline"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/solar/cloud-sun-outline.svg" alt="Cloud Sun Outline icon" width="24" height="24">

Related icons in Solar

Cloud Sun Outline icon FAQ

Is the Cloud Sun Outline icon free for commercial use?

Yes. Solar icons are released under the CC BY 4.0 license, which allows use in personal and commercial projects as long as you credit the author.

How do I use the Cloud Sun Outline icon in React?

Install @iconify/react and render <Icon icon="solar:cloud-sun-outline" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Cloud Sun Outline icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/solar/cloud-sun-outline.svg" alt="Cloud Sun Outline icon">, or paste the SVG code inline to style it with CSS.

Browse all Solar icons →