The Heroicons adjustments vertical icon depicts a stack of horizontal lines with sliders, commonly used to represent settings, filters, or configuration options that can be adjusted.
Common uses
- Opening a settings modal
- Applying filters to a list
- Accessing advanced search options
Use it in React
Install
npm i @heroicons/reactImport & render
import { AdjustmentsVerticalIcon } from '@heroicons/react/24/outline';
<AdjustmentsVerticalIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<AdjustmentsVerticalIcon className="size-6" />24/solid
<AdjustmentsVerticalIcon className="size-6" />20/solid
<AdjustmentsVerticalIcon className="size-6" />16/solid
<AdjustmentsVerticalIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- adjustmentsverticalsettingsfilteroptionsconfigure
FAQ
- What is the 'adjustments vertical' icon used for?
- It's typically used to indicate options for configuring or filtering data. This could be for settings, preferences, or search parameters.
- How do I use this icon in React?
- You can import it directly from the Heroicons library like this: import { AdjustmentsVerticalIcon } from '@heroicons/react/24/outline'.
- What is the license for this icon?
- The Heroicons library, including the 'adjustments vertical' icon, is available under the MIT license.
Related icons
The same idea in other libraries, and near matches in Heroicons.
Looking for something else? Search Heroicons 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 →