What is the arrow up on square icon used for?

This icon typically signifies an upload action, such as uploading a file or submitting data. It can also represent exporting information.

How do I use the arrow up on square icon in React?

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

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

Heroicons · arrow-up-on-square · MIT

The Heroicons arrow up on square icon depicts an upward-pointing arrow emerging from a square, commonly used to represent uploading files or data.

Install

npm i @heroicons/react

Import & render

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

<ArrowUpOnSquareIcon className="size-6" />

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

24/outline

<ArrowUpOnSquareIcon className="size-6" />

24/solid

<ArrowUpOnSquareIcon className="size-6" />

20/solid

<ArrowUpOnSquareIcon className="size-6" />

16/solid

<ArrowUpOnSquareIcon className="size-6" />

What is the arrow up on square icon used for?: This icon typically signifies an upload action, such as uploading a file or submitting data. It can also represent exporting information.
How do I use the arrow up on square icon in React?: You can import and use it in React with the following statement: `import { ArrowUpOnSquareIcon } from '@heroicons/react/24/outline'`.
What is the license for Heroicons?: Heroicons are provided under the MIT license, allowing for free use in both personal and commercial projects.

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 →