Wrench Pixel Art Icon
A wrench icon for settings menus, maintenance modes, repair-service listings, developer-tools and DIY hardware categories.
Style variants
Base, sharp, solid or glyph: see how the four styles differ and which to use.
About the Wrench icon
An adjustable or combination wrench, one of the most established metaphors for settings and repair in UI design. Settings panels across desktop and mobile apps use it alongside or instead of a gear; developer tools reach for it in their configuration and maintenance sections; hardware stores list it in the hand-tools category. It signals hands-on fixing rather than abstract configuration. For settings with more of a preferences flavor, a gear icon is more conventional; wrench is clearest for literal repair.
Usage
<!-- HTML -->
<img src="pixelarticons/svg/wrench.svg" width="24" height="24" alt="Wrench" />
<!-- React -->
import { Wrench } from 'pixelarticons/react'
<!-- Sizes: 24px, 48px, 72px, 96px (multiples of 24) -->
<img src="wrench.svg" width="48" height="48" style="image-rendering: pixelated" />