What does the pencil square icon represent?

It signifies an action to edit, modify, or update content or settings.

How do I use the pencil square icon in React?

Import it using `import { PencilSquareIcon } from '@heroicons/react/24/outline'` and then use it as a React component.

The Heroicons pencil square icon is available under the MIT license.

Heroicons · pencil-square · MIT

The Heroicons pencil square icon depicts a pencil within a square, commonly used to represent an edit or modify action.

Install

npm i @heroicons/react

Import & render

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

<PencilSquareIcon className="size-6" />

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

24/outline

<PencilSquareIcon className="size-6" />

24/solid

<PencilSquareIcon className="size-6" />

20/solid

<PencilSquareIcon className="size-6" />

16/solid

<PencilSquareIcon className="size-6" />

What does the pencil square icon represent?: It signifies an action to edit, modify, or update content or settings.
How do I use the pencil square icon in React?: Import it using `import { PencilSquareIcon } from '@heroicons/react/24/outline'` and then use it as a React component.
What is the license for this icon?: The Heroicons pencil square icon is available 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 →