wrench icon
wrench from Unicons by Iconscout · Line · User Interface · Apache-2.0 Free for personal and commercial use.
- Name
- wrench
- Set
- Unicons
- Style
- Line
- Category
- User Interface
- Viewbox
- 24×24
- License
- Apache 2.0
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 IconswrenchLine AwesomewrenchLucidewrenchMage IconswrenchMaterial Design IconswrenchMyna UI IconswrenchNoto EmojiwrenchOpenMoji
More user interface icons from Unicons
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="m21.71 15.58l-4.52-4.51a7 7 0 0 0 .14-1.4A7.67 7.67 0 0 0 6.42 2.72a1 1 0 0 0-.57.74a1 1 0 0 0 .28.88l4.35 4.34l-1.8 1.8l-4.34-4.35a1 1 0 0 0-.88-.27a1 1 0 0 0-.74.56a7.67 7.67 0 0 0 7 10.91a7 7 0 0 0 1.4-.14l4.51 4.52a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42l-4.9-4.9a1 1 0 0 0-.95-.26a6 6 0 0 1-1.48.2A5.67 5.67 0 0 1 4 9.67a6 6 0 0 1 .08-1L8 12.6a1 1 0 0 0 1.42 0l3.18-3.21a1 1 0 0 0 0-1.39L8.71 4.08a6 6 0 0 1 1-.08a5.67 5.67 0 0 1 5.66 5.67a6 6 0 0 1-.2 1.48a1 1 0 0 0 .26.95l4.9 4.9a1 1 0 0 0 1.42-1.42Z"/></svg>
React
import type { SVGProps } from "react";
export function UilWrench(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="m21.71 15.58l-4.52-4.51a7 7 0 0 0 .14-1.4A7.67 7.67 0 0 0 6.42 2.72a1 1 0 0 0-.57.74a1 1 0 0 0 .28.88l4.35 4.34l-1.8 1.8l-4.34-4.35a1 1 0 0 0-.88-.27a1 1 0 0 0-.74.56a7.67 7.67 0 0 0 7 10.91a7 7 0 0 0 1.4-.14l4.51 4.52a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42l-4.9-4.9a1 1 0 0 0-.95-.26a6 6 0 0 1-1.48.2A5.67 5.67 0 0 1 4 9.67a6 6 0 0 1 .08-1L8 12.6a1 1 0 0 0 1.42 0l3.18-3.21a1 1 0 0 0 0-1.39L8.71 4.08a6 6 0 0 1 1-.08a5.67 5.67 0 0 1 5.66 5.67a6 6 0 0 1-.2 1.48a1 1 0 0 0 .26.95l4.9 4.9a1 1 0 0 0 1.42-1.42Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m21.71 15.58l-4.52-4.51a7 7 0 0 0 .14-1.4A7.67 7.67 0 0 0 6.42 2.72a1 1 0 0 0-.57.74a1 1 0 0 0 .28.88l4.35 4.34l-1.8 1.8l-4.34-4.35a1 1 0 0 0-.88-.27a1 1 0 0 0-.74.56a7.67 7.67 0 0 0 7 10.91a7 7 0 0 0 1.4-.14l4.51 4.52a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42l-4.9-4.9a1 1 0 0 0-.95-.26a6 6 0 0 1-1.48.2A5.67 5.67 0 0 1 4 9.67a6 6 0 0 1 .08-1L8 12.6a1 1 0 0 0 1.42 0l3.18-3.21a1 1 0 0 0 0-1.39L8.71 4.08a6 6 0 0 1 1-.08a5.67 5.67 0 0 1 5.66 5.67a6 6 0 0 1-.2 1.48a1 1 0 0 0 .26.95l4.9 4.9a1 1 0 0 0 1.42-1.42Z"/></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%22m21.71%2015.58l-4.52-4.51a7%207%200%200%200%20.14-1.4A7.67%207.67%200%200%200%206.42%202.72a1%201%200%200%200-.57.74a1%201%200%200%200%20.28.88l4.35%204.34l-1.8%201.8l-4.34-4.35a1%201%200%200%200-.88-.27a1%201%200%200%200-.74.56a7.67%207.67%200%200%200%207%2010.91a7%207%200%200%200%201.4-.14l4.51%204.52a1%201%200%200%200%201.42%200a1%201%200%200%200%200-1.42l-4.9-4.9a1%201%200%200%200-.95-.26a6%206%200%200%201-1.48.2A5.67%205.67%200%200%201%204%209.67a6%206%200%200%201%20.08-1L8%2012.6a1%201%200%200%200%201.42%200l3.18-3.21a1%201%200%200%200%200-1.39L8.71%204.08a6%206%200%200%201%201-.08a5.67%205.67%200%200%201%205.66%205.67a6%206%200%200%201-.2%201.48a1%201%200%200%200%20.26.95l4.9%204.9a1%201%200%200%200%201.42-1.42Z%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%22m21.71%2015.58l-4.52-4.51a7%207%200%200%200%20.14-1.4A7.67%207.67%200%200%200%206.42%202.72a1%201%200%200%200-.57.74a1%201%200%200%200%20.28.88l4.35%204.34l-1.8%201.8l-4.34-4.35a1%201%200%200%200-.88-.27a1%201%200%200%200-.74.56a7.67%207.67%200%200%200%207%2010.91a7%207%200%200%200%201.4-.14l4.51%204.52a1%201%200%200%200%201.42%200a1%201%200%200%200%200-1.42l-4.9-4.9a1%201%200%200%200-.95-.26a6%206%200%200%201-1.48.2A5.67%205.67%200%200%201%204%209.67a6%206%200%200%201%20.08-1L8%2012.6a1%201%200%200%200%201.42%200l3.18-3.21a1%201%200%200%200%200-1.39L8.71%204.08a6%206%200%200%201%201-.08a5.67%205.67%200%200%201%205.66%205.67a6%206%200%200%201-.2%201.48a1%201%200%200%200%20.26.95l4.9%204.9a1%201%200%200%200%201.42-1.42Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/uil/wrench.svg?color=%231a73e8&size=48
