What is the pen icon used for?

It signifies actions like editing, writing, signing, or creating new content. It's a common symbol for editors and writing tools.

How do I use the pen icon in React?

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

Phosphor icons are distributed under the MIT license, which allows for free use in both personal and commercial projects.

Phosphor · pen · MIT

The Phosphor pen icon depicts a writing utensil and is commonly used in UIs to represent actions related to editing, writing, or signing.

Install

npm i @phosphor-icons/react

Import & render

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

<Pen size={24} />

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

regular

<Pen size={24} />

thin

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

light

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

bold

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

fill

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

duotone

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

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

What is the pen icon used for?: It signifies actions like editing, writing, signing, or creating new content. It's a common symbol for editors and writing tools.
How do I use the pen icon in React?: Import it from the library and use it as a component: import { Pen } from '@phosphor-icons/react'; <Pen />.
What is the license for Phosphor icons?: Phosphor icons are distributed under the MIT license, which allows for free use in both personal and commercial projects.

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