The Heroicons wrench screwdriver icon depicts a combination tool, commonly used in UI to represent settings, configuration, or repair actions.
Common uses
- Accessing application settings
- Initiating a repair or maintenance process
- Indicating a configuration or setup option
Use it in React
Install
npm i @heroicons/reactImport & render
import { WrenchScrewdriverIcon } from '@heroicons/react/24/outline';
<WrenchScrewdriverIcon className="size-6" />Styles
Heroicons ships this icon in 4 styles — each its own import:
24/outline
<WrenchScrewdriverIcon className="size-6" />24/solid
<WrenchScrewdriverIcon className="size-6" />20/solid
<WrenchScrewdriverIcon className="size-6" />16/solid
<WrenchScrewdriverIcon className="size-6" />Details
- Library
- Heroicons (324 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- wrenchscrewdriversettingsconfigurationtoolsrepair
FAQ
- What does the wrench screwdriver icon represent?
- This icon represents a combination of a wrench and a screwdriver, symbolizing actions related to settings, configuration, or repair.
- How do I use the wrench screwdriver icon in React?
- You can import and use it in React with: import { WrenchScrewdriverIcon } from '@heroicons/react/24/outline'. Then use it as <WrenchScrewdriverIcon className="h-6 w-6" />.
- What is the license for this icon?
- The Heroicons library, including this 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 →