What is the pencil circle icon used for?

It's typically used for actions like editing, writing, or accessing settings related to content creation or modification.

How do I use the pencil circle icon in React?

You can import it directly from the library and use it as a component: import { PencilCircle } from '@phosphor-icons/react'.

Phosphor icons are distributed under the MIT license, allowing for free usage.

Phosphor · pencil-circle · MIT

The Phosphor pencil circle icon depicts a pencil within a circle, commonly used to signify actions related to editing, writing, or general settings.

Install

npm i @phosphor-icons/react

Import & render

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

<PencilCircle size={24} />

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

regular

<PencilCircle size={24} />

thin

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

light

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

bold

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

fill

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

duotone

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

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

What is the pencil circle icon used for?: It's typically used for actions like editing, writing, or accessing settings related to content creation or modification.
How do I use the pencil circle icon in React?: You can import it directly from the library and use it as a component: import { PencilCircle } from '@phosphor-icons/react'.
What is the license for Phosphor icons?: Phosphor icons are distributed under the MIT license, allowing for free usage.

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

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