wrench icon
wrench from HeroIcons by Refactoring UI Inc · Outline 24x24 · MIT Free for personal and commercial use.
- Name
- wrench
- Set
- HeroIcons
- Style
- Outline 24x24
- Viewbox
- 24×24
- License
- MIT
3 other variants in HeroIcons
The same icon in other sets
All wrench icons →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 EmojiwrenchIconoirwrenchIonIconswrenchJam IconswrenchKeyline IconswrenchLine AwesomewrenchLucidewrenchMage IconswrenchMaterial Design IconswrenchMyna UI IconswrenchNoto EmojiwrenchOpenMoji
Related icons in HeroIcons
Use the wrench icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M21.75 6.75a4.5 4.5 0 0 1-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 1 1-3.586-3.586l8.684-7.151c.833-.687.995-1.875.904-2.95a4.5 4.5 0 0 1 6.336-4.486l-3.276 3.275a3 3 0 0 0 2.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852"/><path d="M4.867 19.125h.008v.008h-.008z"/></g></svg>
React
import type { SVGProps } from "react";
export function HeroiconsWrench(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5"><path d="M21.75 6.75a4.5 4.5 0 0 1-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 1 1-3.586-3.586l8.684-7.151c.833-.687.995-1.875.904-2.95a4.5 4.5 0 0 1 6.336-4.486l-3.276 3.275a3 3 0 0 0 2.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852"/><path d="M4.867 19.125h.008v.008h-.008z"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M21.75 6.75a4.5 4.5 0 0 1-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 1 1-3.586-3.586l8.684-7.151c.833-.687.995-1.875.904-2.95a4.5 4.5 0 0 1 6.336-4.486l-3.276 3.275a3 3 0 0 0 2.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852"/><path d="M4.867 19.125h.008v.008h-.008z"/></g></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%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M21.75%206.75a4.5%204.5%200%200%201-4.884%204.484c-1.076-.091-2.264.071-2.95.904l-7.152%208.684a2.548%202.548%200%201%201-3.586-3.586l8.684-7.151c.833-.687.995-1.875.904-2.95a4.5%204.5%200%200%201%206.336-4.486l-3.276%203.275a3%203%200%200%200%202.25%202.25l3.276-3.276c.256.565.398%201.192.398%201.852%22%2F%3E%3Cpath%20d%3D%22M4.867%2019.125h.008v.008h-.008z%22%2F%3E%3C%2Fg%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%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M21.75%206.75a4.5%204.5%200%200%201-4.884%204.484c-1.076-.091-2.264.071-2.95.904l-7.152%208.684a2.548%202.548%200%201%201-3.586-3.586l8.684-7.151c.833-.687.995-1.875.904-2.95a4.5%204.5%200%200%201%206.336-4.486l-3.276%203.275a3%203%200%200%200%202.25%202.25l3.276-3.276c.256.565.398%201.192.398%201.852%22%2F%3E%3Cpath%20d%3D%22M4.867%2019.125h.008v.008h-.008z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/heroicons/wrench.svg?color=%231a73e8&size=48
