The Phosphor sliders icon depicts a set of horizontal bars, commonly used to represent controls for adjusting settings like volume, equalization, or other media parameters.
Common uses
- Volume control slider
- Equalizer settings panel
- Filter adjustment interface
Use it in React
Install
npm i @phosphor-icons/reactImport & render
import { Sliders } from '@phosphor-icons/react';
<Sliders size={24} />Styles
Phosphor ships this icon in 6 styles — each its own import:
regular
<Sliders size={24} />thin
<Sliders size={24} weight="thin" />light
<Sliders size={24} weight="light" />bold
<Sliders size={24} weight="bold" />fill
<Sliders size={24} weight="fill" />duotone
<Sliders size={24} weight="duotone" />Details
- Library
- Phosphor (1,512 icons)
- License
- MIT
- viewBox
0 0 256 256- Category
- media
- Keywords
- musicaudiofadersfiltersequalizervolumesettingspreferencesmediasystemsliders
FAQ
- What is the sliders icon used for?
- It's typically used for adjusting settings, especially in media applications, to control parameters like volume or audio filters.
- How do I use the sliders icon in React?
- You can import and use it like this: import { Sliders } from '@phosphor-icons/react'. Then render it as a component: <Sliders />.
- What is the license for the Phosphor sliders icon?
- The Phosphor icon library, including the sliders 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 →