cloud arrow down icon

Common uses

• Download button
• Save to cloud action
• Data import indicator

Use it in React

npm i @heroicons/react

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

<CloudArrowDownIcon className="size-6" />

Styles

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

<CloudArrowDownIcon className="size-6" />

<CloudArrowDownIcon className="size-6" />

<CloudArrowDownIcon className="size-6" />

<CloudArrowDownIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

cloudarrowdowndownloadcloud downloadsaveimport

FAQ

What does the cloud arrow down icon represent?

It signifies downloading or retrieving data from a cloud service. It's often used for download buttons or indicating data import.

How do I use this icon in React?

Import it from Heroicons like this: import { CloudArrowDownIcon } from '@heroicons/react/24/outline'. Then use it as a React component: <CloudArrowDownIcon className="h-6 w-6" />.

What is the license for Heroicons?

Heroicons are distributed under the MIT license, allowing for free use in both personal and commercial projects.

Related icons

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