What is the arrow down on square icon used for?

This icon typically represents a download action, such as downloading a file or exporting data from an application.

How do I use this icon in React?

You can import and use it in React with the following statement: `import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline'`.

The Heroicons library, including this icon, is distributed under the MIT license.

Heroicons · arrow-down-on-square · MIT

The Heroicons arrow down on square icon depicts an arrow pointing downwards into a square, commonly used to signify downloading content or data.

Install

npm i @heroicons/react

Import & render

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

<ArrowDownOnSquareIcon className="size-6" />

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

24/outline

<ArrowDownOnSquareIcon className="size-6" />

24/solid

<ArrowDownOnSquareIcon className="size-6" />

20/solid

<ArrowDownOnSquareIcon className="size-6" />

16/solid

<ArrowDownOnSquareIcon className="size-6" />

What is the arrow down on square icon used for?: This icon typically represents a download action, such as downloading a file or exporting data from an application.
How do I use this icon in React?: You can import and use it in React with the following statement: `import { ArrowDownOnSquareIcon } from '@heroicons/react/24/outline'`.
What is the license for this icon?: The Heroicons library, including this icon, is distributed under the MIT license.

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

The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →