wrench icon
wrench from BoxIcons v2 by Boxicons · Regular · MIT Free for personal and commercial use.
- Name
- wrench
- Set
- BoxIcons v2
- Style
- Regular
- Viewbox
- 24×24
- License
- MIT
- Aliases
- bx-wrench
The same icon in other sets
wrenchBootstrap IconswrenchBoxIcons v2 SolidwrenchEmoji One (Colored)wrenchFramework7 IconswrenchFont Awesome 6 SolidwrenchFont Awesome Solidwrench-16-filledFluent UI System Iconswrench-16Fluent UI System Color IconswrenchFluent EmojiwrenchFluent Emoji FlatwrenchFluent Emoji High ContrastwrenchFirefox OS EmojiwrenchHeroIconswrenchIconoirwrenchIonIconswrenchJam IconswrenchLine AwesomewrenchLucidewrenchMage IconswrenchMaterial Design IconswrenchMyna UI IconswrenchNoto EmojiwrenchOpenMojiwrenchPhosphor
Use the wrench icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5.122 21c.378.378.88.586 1.414.586S7.572 21.378 7.95 21l4.336-4.336a7.5 7.5 0 0 0 2.217.333a7.45 7.45 0 0 0 5.302-2.195a7.48 7.48 0 0 0 1.632-8.158l-.57-1.388l-4.244 4.243l-2.121-2.122l4.243-4.243l-1.389-.571A7.5 7.5 0 0 0 14.499 2c-2.003 0-3.886.78-5.301 2.196a7.48 7.48 0 0 0-1.862 7.518L3 16.05a2 2 0 0 0 0 2.828zm4.548-8.791l-.254-.616a5.49 5.49 0 0 1 1.196-5.983a5.46 5.46 0 0 1 4.413-1.585l-3.353 3.353l4.949 4.95l3.355-3.355a5.49 5.49 0 0 1-1.587 4.416c-1.55 1.55-3.964 2.027-5.984 1.196l-.615-.255l-5.254 5.256h.001l-.001 1v-1l-2.122-2.122z"/></svg>
React
import type { SVGProps } from "react";
export function BxWrench(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5.122 21c.378.378.88.586 1.414.586S7.572 21.378 7.95 21l4.336-4.336a7.5 7.5 0 0 0 2.217.333a7.45 7.45 0 0 0 5.302-2.195a7.48 7.48 0 0 0 1.632-8.158l-.57-1.388l-4.244 4.243l-2.121-2.122l4.243-4.243l-1.389-.571A7.5 7.5 0 0 0 14.499 2c-2.003 0-3.886.78-5.301 2.196a7.48 7.48 0 0 0-1.862 7.518L3 16.05a2 2 0 0 0 0 2.828zm4.548-8.791l-.254-.616a5.49 5.49 0 0 1 1.196-5.983a5.46 5.46 0 0 1 4.413-1.585l-3.353 3.353l4.949 4.95l3.355-3.355a5.49 5.49 0 0 1-1.587 4.416c-1.55 1.55-3.964 2.027-5.984 1.196l-.615-.255l-5.254 5.256h.001l-.001 1v-1l-2.122-2.122z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M5.122 21c.378.378.88.586 1.414.586S7.572 21.378 7.95 21l4.336-4.336a7.5 7.5 0 0 0 2.217.333a7.45 7.45 0 0 0 5.302-2.195a7.48 7.48 0 0 0 1.632-8.158l-.57-1.388l-4.244 4.243l-2.121-2.122l4.243-4.243l-1.389-.571A7.5 7.5 0 0 0 14.499 2c-2.003 0-3.886.78-5.301 2.196a7.48 7.48 0 0 0-1.862 7.518L3 16.05a2 2 0 0 0 0 2.828zm4.548-8.791l-.254-.616a5.49 5.49 0 0 1 1.196-5.983a5.46 5.46 0 0 1 4.413-1.585l-3.353 3.353l4.949 4.95l3.355-3.355a5.49 5.49 0 0 1-1.587 4.416c-1.55 1.55-3.964 2.027-5.984 1.196l-.615-.255l-5.254 5.256h.001l-.001 1v-1l-2.122-2.122z"/></svg> </template>
CSS
.icon-wrench {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M5.122%2021c.378.378.88.586%201.414.586S7.572%2021.378%207.95%2021l4.336-4.336a7.5%207.5%200%200%200%202.217.333a7.45%207.45%200%200%200%205.302-2.195a7.48%207.48%200%200%200%201.632-8.158l-.57-1.388l-4.244%204.243l-2.121-2.122l4.243-4.243l-1.389-.571A7.5%207.5%200%200%200%2014.499%202c-2.003%200-3.886.78-5.301%202.196a7.48%207.48%200%200%200-1.862%207.518L3%2016.05a2%202%200%200%200%200%202.828zm4.548-8.791l-.254-.616a5.49%205.49%200%200%201%201.196-5.983a5.46%205.46%200%200%201%204.413-1.585l-3.353%203.353l4.949%204.95l3.355-3.355a5.49%205.49%200%200%201-1.587%204.416c-1.55%201.55-3.964%202.027-5.984%201.196l-.615-.255l-5.254%205.256h.001l-.001%201v-1l-2.122-2.122z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M5.122%2021c.378.378.88.586%201.414.586S7.572%2021.378%207.95%2021l4.336-4.336a7.5%207.5%200%200%200%202.217.333a7.45%207.45%200%200%200%205.302-2.195a7.48%207.48%200%200%200%201.632-8.158l-.57-1.388l-4.244%204.243l-2.121-2.122l4.243-4.243l-1.389-.571A7.5%207.5%200%200%200%2014.499%202c-2.003%200-3.886.78-5.301%202.196a7.48%207.48%200%200%200-1.862%207.518L3%2016.05a2%202%200%200%200%200%202.828zm4.548-8.791l-.254-.616a5.49%205.49%200%200%201%201.196-5.983a5.46%205.46%200%200%201%204.413-1.585l-3.353%203.353l4.949%204.95l3.355-3.355a5.49%205.49%200%200%201-1.587%204.416c-1.55%201.55-3.964%202.027-5.984%201.196l-.615-.255l-5.254%205.256h.001l-.001%201v-1l-2.122-2.122z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/bx/wrench.svg?color=%231a73e8&size=48
