The Phosphor highlighter circle icon depicts a marker pen highlighting a circular area, commonly used to indicate selection, focus, or a highlighted state within a UI.
Common uses
- Highlighting selected item in a list
- Indicating a focused input field
- Marking a specific area on a canvas
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { HighlighterCircle } from '@phosphor-icons/react';
<HighlighterCircle size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<HighlighterCircle size={24} />thin
<HighlighterCircle size={24} weight="thin" />light
<HighlighterCircle size={24} weight="light" />bold
<HighlighterCircle size={24} weight="bold" />fill
<HighlighterCircle size={24} weight="fill" />duotone
<HighlighterCircle size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- design
- Keywords
- writewritingeditingdrawingdesigneditorofficehighlightercirclemarker circlehighlightselectionfocus
FAQ
- What is the highlighter circle icon used for?
- It visually emphasizes a selected or focused element, or draws attention to a specific area within an interface.
- How do I use the highlighter circle icon in React?
- Import it from the library and use it as a React component: import { HighlighterCircle } from '@phosphor-icons/react'.
- What is the license for this icon?
- The Phosphor icon library, including the highlighter circle 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 →