wrench icon
wrench from Line Awesome by Icons8 · Line · Objects · Apache-2.0 Free for personal and commercial use.
- Name
- wrench
- Set
- Line Awesome
- Style
- Line
- Category
- Objects
- Viewbox
- 32×32
- License
- Apache 2.0
- Aliases
- wrench-solid
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 EmojiwrenchHeroIconswrenchIconoirwrenchIonIconswrenchJam IconswrenchLucidewrenchMage IconswrenchMaterial Design IconswrenchMyna UI IconswrenchNoto EmojiwrenchOpenMojiwrenchPhosphor
More objects icons from Line Awesome
Use the wrench icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M21 4c-3.855 0-7 3.145-7 7c0 .715.215 1.363.414 2.016l-9.469 9.468a3.244 3.244 0 0 0 0 4.575a3.247 3.247 0 0 0 4.57 0l9.47-9.47c.648.2 1.3.411 2.015.411c3.855 0 7-3.145 7-7c0-1.027-.227-2-.625-2.875l-.594-1.32l-1.02 1.023L22.587 11H21V9.414l4.195-4.195l-1.32-.594A6.9 6.9 0 0 0 21 4m0 2c.172 0 .316.086.484.102L19 8.586V13h4.414l2.48-2.484c.02.168.106.312.106.484c0 2.773-2.227 5-5 5a5 5 0 0 1-1.969-.402l-.62-.266L8.1 25.641a1.226 1.226 0 0 1-1.742 0a1.23 1.23 0 0 1 0-1.746l10.31-10.305l-.266-.625A5 5 0 0 1 16 11c0-2.773 2.227-5 5-5"/></svg>
React
import type { SVGProps } from "react";
export function LaWrench(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M21 4c-3.855 0-7 3.145-7 7c0 .715.215 1.363.414 2.016l-9.469 9.468a3.244 3.244 0 0 0 0 4.575a3.247 3.247 0 0 0 4.57 0l9.47-9.47c.648.2 1.3.411 2.015.411c3.855 0 7-3.145 7-7c0-1.027-.227-2-.625-2.875l-.594-1.32l-1.02 1.023L22.587 11H21V9.414l4.195-4.195l-1.32-.594A6.9 6.9 0 0 0 21 4m0 2c.172 0 .316.086.484.102L19 8.586V13h4.414l2.48-2.484c.02.168.106.312.106.484c0 2.773-2.227 5-5 5a5 5 0 0 1-1.969-.402l-.62-.266L8.1 25.641a1.226 1.226 0 0 1-1.742 0a1.23 1.23 0 0 1 0-1.746l10.31-10.305l-.266-.625A5 5 0 0 1 16 11c0-2.773 2.227-5 5-5"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M21 4c-3.855 0-7 3.145-7 7c0 .715.215 1.363.414 2.016l-9.469 9.468a3.244 3.244 0 0 0 0 4.575a3.247 3.247 0 0 0 4.57 0l9.47-9.47c.648.2 1.3.411 2.015.411c3.855 0 7-3.145 7-7c0-1.027-.227-2-.625-2.875l-.594-1.32l-1.02 1.023L22.587 11H21V9.414l4.195-4.195l-1.32-.594A6.9 6.9 0 0 0 21 4m0 2c.172 0 .316.086.484.102L19 8.586V13h4.414l2.48-2.484c.02.168.106.312.106.484c0 2.773-2.227 5-5 5a5 5 0 0 1-1.969-.402l-.62-.266L8.1 25.641a1.226 1.226 0 0 1-1.742 0a1.23 1.23 0 0 1 0-1.746l10.31-10.305l-.266-.625A5 5 0 0 1 16 11c0-2.773 2.227-5 5-5"/></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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21%204c-3.855%200-7%203.145-7%207c0%20.715.215%201.363.414%202.016l-9.469%209.468a3.244%203.244%200%200%200%200%204.575a3.247%203.247%200%200%200%204.57%200l9.47-9.47c.648.2%201.3.411%202.015.411c3.855%200%207-3.145%207-7c0-1.027-.227-2-.625-2.875l-.594-1.32l-1.02%201.023L22.587%2011H21V9.414l4.195-4.195l-1.32-.594A6.9%206.9%200%200%200%2021%204m0%202c.172%200%20.316.086.484.102L19%208.586V13h4.414l2.48-2.484c.02.168.106.312.106.484c0%202.773-2.227%205-5%205a5%205%200%200%201-1.969-.402l-.62-.266L8.1%2025.641a1.226%201.226%200%200%201-1.742%200a1.23%201.23%200%200%201%200-1.746l10.31-10.305l-.266-.625A5%205%200%200%201%2016%2011c0-2.773%202.227-5%205-5%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21%204c-3.855%200-7%203.145-7%207c0%20.715.215%201.363.414%202.016l-9.469%209.468a3.244%203.244%200%200%200%200%204.575a3.247%203.247%200%200%200%204.57%200l9.47-9.47c.648.2%201.3.411%202.015.411c3.855%200%207-3.145%207-7c0-1.027-.227-2-.625-2.875l-.594-1.32l-1.02%201.023L22.587%2011H21V9.414l4.195-4.195l-1.32-.594A6.9%206.9%200%200%200%2021%204m0%202c.172%200%20.316.086.484.102L19%208.586V13h4.414l2.48-2.484c.02.168.106.312.106.484c0%202.773-2.227%205-5%205a5%205%200%200%201-1.969-.402l-.62-.266L8.1%2025.641a1.226%201.226%200%200%201-1.742%200a1.23%201.23%200%200%201%200-1.746l10.31-10.305l-.266-.625A5%205%200%200%201%2016%2011c0-2.773%202.227-5%205-5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/la/wrench.svg?color=%231a73e8&size=48
