The Phosphor ruler icon depicts a measuring tool used for indicating scale, distance, or dimensions within design and editing interfaces.
Common uses
- Dimension display in editors
- Scale indicator in design tools
- Measurement tool selection
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Ruler } from '@phosphor-icons/react';
<Ruler size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Ruler size={24} />thin
<Ruler size={24} weight="thin" />light
<Ruler size={24} weight="light" />bold
<Ruler size={24} weight="bold" />fill
<Ruler size={24} weight="fill" />duotone
<Ruler size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- measurescaledistancedesigneditorobjectsrulerlength
FAQ
- What is the ruler icon used for?
- It represents measurement, scale, or distance, commonly found in design or editing software.
- How do I use the ruler icon in React?
- Import it from the library like so: `import { Ruler } from '@phosphor-icons/react'` and use it as a component.
- What is the license for this icon?
- The Phosphor icon set, including the ruler 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 →