The Tabler edit icon depicts a pencil, commonly used in user interfaces to signify an action that allows users to modify or update existing content.
Common uses
- Button to edit a profile
- Link to modify a document
- Icon for a 'revise' action
Use it in React
Install
npm i @tabler/icons-reactImport & render
import { IconEdit } from '@tabler/icons-react';
<IconEdit size={24} stroke={2} />Styles
Tabler ships this icon in 2 styles — each its own import:
outline
<IconEdit size={24} stroke={2} />filled
<IconEditFilled size={24} stroke={2} />Details
- Library
- Tabler (5,093 icons)
- License
- MIT
- viewBox
0 0 24 24- Category
- Design
- Keywords
- pencilchangeupdateeditmodifycreativeartisticreviseadjustvisualdesign
FAQ
- What does the edit icon represent?
- It represents the action of making changes or updates to existing content. It's a universal symbol for editing.
- How do I use the edit icon in React?
- You can import and use it directly from the '@tabler/icons-react' library like this: `import { IconEdit } from '@tabler/icons-react'`. Then render it as `<IconEdit />`.
- What is the license for the Tabler edit icon?
- The Tabler icon set, including the edit icon, is released under the MIT license, allowing for free use.
Related icons
The same idea in other libraries, and near matches in Tabler.
Looking for something else? Search Tabler and 4 more libraries by description →
The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →