The Phosphor line segment icon depicts a simple straight line, commonly used to represent connections, divisions, or paths in user interfaces.
Common uses
- Connecting nodes in a flowchart
- Indicating a selected path in a map
- Separating content sections
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { LineSegment } from '@phosphor-icons/react';
<LineSegment size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<LineSegment size={24} />thin
<LineSegment size={24} weight="thin" />light
<LineSegment size={24} weight="light" />bold
<LineSegment size={24} weight="bold" />fill
<LineSegment size={24} weight="fill" />duotone
<LineSegment size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- shapesdrawingpathpenvectordesignlinesegmentstraight linepath segmentvector linedrawing line
FAQ
- What is the line segment icon used for?
- It's used to visually represent a straight line, often signifying connections, boundaries, or parts of a path in UI designs.
- How do I use the line segment icon in React?
- You can import and use it like this: import { LineSegment } from '@phosphor-icons/react'. Then render it as a React component.
- What is the license for this icon?
- The Phosphor icon library, including the line segment 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 →