The Phosphor crop icon visually represents the act of trimming or resizing an image or area, commonly used in UI for editing tools.
Common uses
- Image editing tools
- Screenshot annotation
- Layout adjustment
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Crop } from '@phosphor-icons/react';
<Crop size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Crop size={24} />thin
<Crop size={24} weight="thin" />light
<Crop size={24} weight="light" />bold
<Crop size={24} weight="bold" />fill
<Crop size={24} weight="fill" />duotone
<Crop size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- photographyclipscreenshotsdesigneditorcroptrimresizeframecut
FAQ
- What is the crop icon used for?
- It signifies the action of cutting away unwanted outer areas of an image or document to improve framing, composition, or to remove extraneous parts.
- How do I use the crop icon in React?
- You can import and use it like this: import { Crop } from '@phosphor-icons/react'. Then render it as <Crop size={32} />.
- What is the license for the Phosphor crop icon?
- The Phosphor icon library, including the crop icon, is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Phosphor.
Looking for something else? Search Phosphor 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 →