wrench icon
wrench from Iconoir by Luca Burgio · Regular · Tools · MIT Free for personal and commercial use.
- Name
- wrench
- Set
- Iconoir
- Style
- Regular
- Category
- Tools
- Viewbox
- 24×24
- License
- MIT
The same icon in other sets
wrenchBootstrap IconswrenchBoxIcons v2wrenchBoxIcons 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 EmojiwrenchHeroIconswrenchIonIconswrenchJam IconswrenchLine AwesomewrenchLucidewrenchMage IconswrenchMaterial Design IconswrenchMyna UI IconswrenchNoto EmojiwrenchOpenMojiwrenchPhosphor
More tools icons from Iconoir
Use the wrench icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m10.05 10.607l-7.07 7.07a2 2 0 0 0 0 2.83v0a2 2 0 0 0 2.828 0l7.07-7.072m-2.828-2.828c-.844-2.153-.679-4.978 1.06-6.718s4.95-2.121 6.718-1.06l-3.04 3.04l-.283 3.111l3.111-.282l3.04-3.041c1.062 1.768.68 4.978-1.06 6.717c-1.74 1.74-4.564 1.905-6.717 1.061"/></svg>
React
import type { SVGProps } from "react";
export function IconoirWrench(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="m10.05 10.607l-7.07 7.07a2 2 0 0 0 0 2.83v0a2 2 0 0 0 2.828 0l7.07-7.072m-2.828-2.828c-.844-2.153-.679-4.978 1.06-6.718s4.95-2.121 6.718-1.06l-3.04 3.04l-.283 3.111l3.111-.282l3.04-3.041c1.062 1.768.68 4.978-1.06 6.717c-1.74 1.74-4.564 1.905-6.717 1.061"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m10.05 10.607l-7.07 7.07a2 2 0 0 0 0 2.83v0a2 2 0 0 0 2.828 0l7.07-7.072m-2.828-2.828c-.844-2.153-.679-4.978 1.06-6.718s4.95-2.121 6.718-1.06l-3.04 3.04l-.283 3.111l3.111-.282l3.04-3.041c1.062 1.768.68 4.978-1.06 6.717c-1.74 1.74-4.564 1.905-6.717 1.061"/></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%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m10.05%2010.607l-7.07%207.07a2%202%200%200%200%200%202.83v0a2%202%200%200%200%202.828%200l7.07-7.072m-2.828-2.828c-.844-2.153-.679-4.978%201.06-6.718s4.95-2.121%206.718-1.06l-3.04%203.04l-.283%203.111l3.111-.282l3.04-3.041c1.062%201.768.68%204.978-1.06%206.717c-1.74%201.74-4.564%201.905-6.717%201.061%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%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22m10.05%2010.607l-7.07%207.07a2%202%200%200%200%200%202.83v0a2%202%200%200%200%202.828%200l7.07-7.072m-2.828-2.828c-.844-2.153-.679-4.978%201.06-6.718s4.95-2.121%206.718-1.06l-3.04%203.04l-.283%203.111l3.111-.282l3.04-3.041c1.062%201.768.68%204.978-1.06%206.717c-1.74%201.74-4.564%201.905-6.717%201.061%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/iconoir/wrench.svg?color=%231a73e8&size=48
