wrench icon
wrench-20-solid from HeroIcons by Refactoring UI Inc · Solid 20x20 · MIT Free for personal and commercial use.
- Name
- wrench-20-solid
- Set
- HeroIcons
- Style
- Solid 20x20
- Viewbox
- 20×20
- 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 20 20"><path fill="currentColor" fill-rule="evenodd" d="M19 5.5a4.5 4.5 0 0 1-4.791 4.49c-.873-.055-1.808.128-2.368.8l-6.024 7.23a2.724 2.724 0 1 1-3.837-3.837L9.21 8.16c.672-.56.855-1.495.8-2.368a4.5 4.5 0 0 1 5.873-4.575c.324.105.39.51.15.752L13.34 4.66a.455.455 0 0 0-.11.494a3 3 0 0 0 1.617 1.617c.17.07.363.02.493-.111l2.692-2.692c.241-.241.647-.174.752.15c.14.435.216.9.216 1.382M4 17a1 1 0 1 0 0-2a1 1 0 0 0 0 2" clip-rule="evenodd"/></svg>
React
import type { SVGProps } from "react";
export function HeroiconsWrench20Solid(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" fillRule="evenodd" d="M19 5.5a4.5 4.5 0 0 1-4.791 4.49c-.873-.055-1.808.128-2.368.8l-6.024 7.23a2.724 2.724 0 1 1-3.837-3.837L9.21 8.16c.672-.56.855-1.495.8-2.368a4.5 4.5 0 0 1 5.873-4.575c.324.105.39.51.15.752L13.34 4.66a.455.455 0 0 0-.11.494a3 3 0 0 0 1.617 1.617c.17.07.363.02.493-.111l2.692-2.692c.241-.241.647-.174.752.15c.14.435.216.9.216 1.382M4 17a1 1 0 1 0 0-2a1 1 0 0 0 0 2" clipRule="evenodd"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M19 5.5a4.5 4.5 0 0 1-4.791 4.49c-.873-.055-1.808.128-2.368.8l-6.024 7.23a2.724 2.724 0 1 1-3.837-3.837L9.21 8.16c.672-.56.855-1.495.8-2.368a4.5 4.5 0 0 1 5.873-4.575c.324.105.39.51.15.752L13.34 4.66a.455.455 0 0 0-.11.494a3 3 0 0 0 1.617 1.617c.17.07.363.02.493-.111l2.692-2.692c.241-.241.647-.174.752.15c.14.435.216.9.216 1.382M4 17a1 1 0 1 0 0-2a1 1 0 0 0 0 2" clip-rule="evenodd"/></svg> </template>
CSS
.icon-wrench-20-solid {
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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M19%205.5a4.5%204.5%200%200%201-4.791%204.49c-.873-.055-1.808.128-2.368.8l-6.024%207.23a2.724%202.724%200%201%201-3.837-3.837L9.21%208.16c.672-.56.855-1.495.8-2.368a4.5%204.5%200%200%201%205.873-4.575c.324.105.39.51.15.752L13.34%204.66a.455.455%200%200%200-.11.494a3%203%200%200%200%201.617%201.617c.17.07.363.02.493-.111l2.692-2.692c.241-.241.647-.174.752.15c.14.435.216.9.216%201.382M4%2017a1%201%200%201%200%200-2a1%201%200%200%200%200%202%22%20clip-rule%3D%22evenodd%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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M19%205.5a4.5%204.5%200%200%201-4.791%204.49c-.873-.055-1.808.128-2.368.8l-6.024%207.23a2.724%202.724%200%201%201-3.837-3.837L9.21%208.16c.672-.56.855-1.495.8-2.368a4.5%204.5%200%200%201%205.873-4.575c.324.105.39.51.15.752L13.34%204.66a.455.455%200%200%200-.11.494a3%203%200%200%200%201.617%201.617c.17.07.363.02.493-.111l2.692-2.692c.241-.241.647-.174.752.15c.14.435.216.9.216%201.382M4%2017a1%201%200%201%200%200-2a1%201%200%200%200%200%202%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/heroicons/wrench-20-solid.svg?color=%231a73e8&size=48
