cloud icon

Common uses

• Cloud storage indicator
• Online service status
• Weather forecast element

Use it in React

npm i @heroicons/react

import { CloudIcon } from '@heroicons/react/24/outline';

<CloudIcon className="size-6" />

Styles

Heroicons ships this icon in 4 styles — each its own import:

<CloudIcon className="size-6" />

<CloudIcon className="size-6" />

<CloudIcon className="size-6" />

<CloudIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

cloudweatherstorageonlineserver

FAQ

What is the Heroicons cloud icon used for?

It visually represents cloud-based concepts like storage, online services, or weather data within an application's interface.

How do I use the cloud icon in React?

Import it using `import { CloudIcon } from '@heroicons/react/24/outline'` and then render it as a component: `<CloudIcon className="h-6 w-6" />`.

What is the license for the Heroicons cloud icon?

The Heroicons library, including the cloud icon, is available under the MIT license.

Related icons

The same idea in other libraries, and near matches in Heroicons.