ICONYZ
English
Clouds Bold Duotone icon from Solar

Clouds Bold Duotone icon

solar:clouds-bold-duotone

The Clouds Bold Duotone icon (solar:clouds-bold-duotone) 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
cloudsbold, boldduotone, cloudsboldduotone, cloud
Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="currentColor"><path d="M16.2857 18C19.4416 18 22 15.4717 22 12.3529C22 9.88113 20.393 7.78024 18.1551 7.01498C17.8371 4.19371 15.4159 2 12.4762 2C9.32028 2 6.7619 4.52827 6.7619 7.64706C6.7619 8.33687 6.88706 8.9978 7.11616 9.60887C6.8475 9.55673 6.56983 9.52941 6.28571 9.52941C3.91878 9.52941 2 11.4256 2 13.7647C2 16.1038 3.91878 18 6.28571 18H16.2857Z" opacity=".5"/><path d="M18.2857 22C20.3371 22 22 20.4198 22 18.4706C22 16.9257 20.9554 15.6126 19.5008 15.1344C19.2941 13.3711 17.7203 12 15.8095 12C13.7582 12 12.0952 13.5802 12.0952 15.5294C12.0952 15.9605 12.1766 16.3736 12.3255 16.7555C12.1509 16.723 11.9704 16.7059 11.7857 16.7059C10.2472 16.7059 9 17.891 9 19.3529C9 20.8149 10.2472 22 11.7857 22H18.2857Z"/></g></svg>

How to use the Clouds Bold Duotone icon

React

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

<Icon icon="solar:clouds-bold-duotone" width="24" />

Vue

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

<template>
  <Icon icon="solar:clouds-bold-duotone" width="24" />
</template>

Svelte

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

<Icon icon="solar:clouds-bold-duotone" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[solar--clouds-bold-duotone]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/solar -->
<div class="i-solar:clouds-bold-duotone"></div>

Web component

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

<iconify-icon icon="solar:clouds-bold-duotone"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/solar/clouds-bold-duotone.svg" alt="Clouds Bold Duotone icon" width="24" height="24">

Related icons in Solar

clouds-bold icon
clouds-bold
 clouds-broken icon
clouds-broken
 clouds-line-duotone icon
clouds-line-duotone
 clouds-linear icon
clouds-linear
 clouds-outline icon
clouds-outline

Clouds Bold Duotone icon FAQ

Is the Clouds Bold Duotone 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 Clouds Bold Duotone icon in React?

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

How do I add the Clouds Bold Duotone icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/solar/clouds-bold-duotone.svg" alt="Clouds Bold Duotone icon">, or paste the SVG code inline to style it with CSS.

Browse all Solar icons →