What does the pencil icon represent?

It represents actions like editing, writing, or making changes to content.

How do I use the pencil icon in React?

Import it from the library: `import { Pencil } from '@phosphor-icons/react'` and use it as a component: ` `.

The Phosphor icon library, including the pencil icon, is available under the MIT license.

Phosphor · pencil · MIT

The Phosphor pencil icon depicts a writing utensil and is commonly used in UI to represent actions related to editing, writing, or modifying content.

Install

npm i @phosphor-icons/react

Import & render

import { Pencil } from '@phosphor-icons/react';

<Pencil size={24} />

Phosphor ships this icon in 6 styles — each its own import:

regular

<Pencil size={24} />

thin

<Pencil size={24} weight="thin" />

light

<Pencil size={24} weight="light" />

bold

<Pencil size={24} weight="bold" />

fill

<Pencil size={24} weight="fill" />

duotone

<Pencil size={24} weight="duotone" />

Library: Phosphor (1,512 icons)
License: MIT
viewBox: 0 0 256 256
Category: design
Keywords: writewritingeditingsignsignaturedesigneditorofficepencileditmodifycompose

What does the pencil icon represent?: It represents actions like editing, writing, or making changes to content.
How do I use the pencil icon in React?: Import it from the library: `import { Pencil } from '@phosphor-icons/react'` and use it as a component: `<Pencil />`.
What is the license for the Phosphor pencil icon?: The Phosphor icon library, including the pencil icon, is available under the MIT license.

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