ICONYZ
English
Cloud icon from Ligature Symbols

Cloud icon

ls:cloud

The Cloud icon (ls:cloud) is a free SVG icon from the Ligature Symbols set by Kazuyuki Motoyama. It is drawn on a 819 × 620 grid. Ligature Symbols icons are released under the Open Font License, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set
Ligature Symbols
Author
Kazuyuki Motoyama
License
OFL-1.1
Size
819 × 620
Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="819" height="620" viewBox="0 0 819 620"><path fill="currentColor" d="M343 620H171C77 620 0 543 0 449c0-71 43-130 103-156c0-5-1-10-1-15c0-56 47-102 103-102c34 0 64 17 83 42c31-84 112-145 207-145c122 0 220 99 222 220c60 27 102 86 102 156c0 94-77 171-171 171H481V520h81c12 0 16-8 7-17L428 352c-4-4-10-7-16-7s-13 3-17 7L254 503c-8 9-6 17 7 17h82z"/></svg>

How to use the Cloud icon

React

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

<Icon icon="ls:cloud" width="24" />

Vue

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

<template>
  <Icon icon="ls:cloud" width="24" />
</template>

Svelte

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

<Icon icon="ls:cloud" width="24" />

Tailwind CSS

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

UnoCSS

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

Web component

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

<iconify-icon icon="ls:cloud"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/ls/cloud.svg" alt="Cloud icon" width="24" height="24">

Cloud icon in other icon sets

Cloud icon FAQ

Is the Cloud icon free for commercial use?

Yes. Ligature Symbols icons are released under the Open Font License, which allows use in personal and commercial projects.

How do I use the Cloud icon in React?

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

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

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

Browse all Ligature Symbols icons →