wrench screwdriver icon
wrench-screwdriver-20 from Fluent UI System Color Icons by Microsoft Corporation · 20 · MIT Free for personal and commercial use.
- Name
- wrench-screwdriver-20
- Set
- Fluent UI System Color Icons
- Style
- 20
- Viewbox
- 20×20
- License
- MIT
2 other variants in Fluent UI System Color Icons
The same icon in other sets
Use the wrench screwdriver icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="none"><path fill="url(#SVGPftDHeRF1)" d="M16 5.117V10.5h-3V5.117a20 20 0 0 1-.29-.554a8 8 0 0 1-.148-.313A.6.6 0 0 1 12.5 4q0-.086.07-.312q.071-.228.157-.493t.171-.5q.087-.234.125-.351a.46.46 0 0 1 .18-.242A.55.55 0 0 1 13.5 2h2q.164 0 .29.094a.57.57 0 0 1 .187.25q.03.109.117.344l.18.5q.093.265.156.492q.062.225.07.32a.7.7 0 0 1-.062.242q-.063.15-.141.32a3 3 0 0 1-.164.313a2 2 0 0 0-.133.242"/><path fill="url(#SVGBGOkQeOY1)" d="M17 11.5h-5v4.055q0 .507.203.953t.547.781A2.5 2.5 0 0 0 14.5 18q.5 0 .953-.195a2.7 2.7 0 0 0 .797-.524q.345-.327.547-.773a2.3 2.3 0 0 0 .203-.953z"/><path fill="url(#SVG58viBcga1)" d="M17 12v-1.5a.6.6 0 0 0-.07-.273a.37.37 0 0 0-.172-.149a1 1 0 0 0-.235-.062a2 2 0 0 0-.257-.016h-3.532q-.14 0-.265.016a.7.7 0 0 0-.235.07a.44.44 0 0 0-.171.148a.5.5 0 0 0-.063.266V12z"/><path fill="url(#SVGFNnBvbYS1)" d="M5.78 2.126a.5.5 0 0 1 .22.415v3.457a1 1 0 0 0 2 0V2.541a.5.5 0 0 1 .688-.463A4.501 4.501 0 0 1 9 10.282v5.716a2 2 0 1 1-4 0v-5.716a4.5 4.5 0 0 1 .312-8.204a.5.5 0 0 1 .467.048"/><defs><linearGradient id="SVGPftDHeRF1" x1="15.833" x2="12.81" y1=".38" y2="16.965" gradientUnits="userSpaceOnUse"><stop stop-color="#2bdabe"/><stop offset=".853" stop-color="#0067bf"/></linearGradient><linearGradient id="SVGBGOkQeOY1" x1="16.999" x2="10.446" y1="18.145" y2="13.592" gradientUnits="userSpaceOnUse"><stop stop-color="#ff6f47"/><stop offset="1" stop-color="#ffcd0f"/></linearGradient><linearGradient id="SVG58viBcga1" x1="13.376" x2="14.043" y1="10.484" y2="12.151" gradientUnits="userSpaceOnUse"><stop stop-color="#ffa43d"/><stop offset="1" stop-color="#fb5937"/></linearGradient><linearGradient id="SVGFNnBvbYS1" x1="10" x2="4.8" y1="-1" y2="18.48" gradientUnits="userSpaceOnUse"><stop stop-color="#2bdabe"/><stop offset="1" stop-color="#0067bf"/></linearGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorWrenchScrewdriver20(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="none"><path fill="url(#SVGPftDHeRF1)" d="M16 5.117V10.5h-3V5.117a20 20 0 0 1-.29-.554a8 8 0 0 1-.148-.313A.6.6 0 0 1 12.5 4q0-.086.07-.312q.071-.228.157-.493t.171-.5q.087-.234.125-.351a.46.46 0 0 1 .18-.242A.55.55 0 0 1 13.5 2h2q.164 0 .29.094a.57.57 0 0 1 .187.25q.03.109.117.344l.18.5q.093.265.156.492q.062.225.07.32a.7.7 0 0 1-.062.242q-.063.15-.141.32a3 3 0 0 1-.164.313a2 2 0 0 0-.133.242"/><path fill="url(#SVGBGOkQeOY1)" d="M17 11.5h-5v4.055q0 .507.203.953t.547.781A2.5 2.5 0 0 0 14.5 18q.5 0 .953-.195a2.7 2.7 0 0 0 .797-.524q.345-.327.547-.773a2.3 2.3 0 0 0 .203-.953z"/><path fill="url(#SVG58viBcga1)" d="M17 12v-1.5a.6.6 0 0 0-.07-.273a.37.37 0 0 0-.172-.149a1 1 0 0 0-.235-.062a2 2 0 0 0-.257-.016h-3.532q-.14 0-.265.016a.7.7 0 0 0-.235.07a.44.44 0 0 0-.171.148a.5.5 0 0 0-.063.266V12z"/><path fill="url(#SVGFNnBvbYS1)" d="M5.78 2.126a.5.5 0 0 1 .22.415v3.457a1 1 0 0 0 2 0V2.541a.5.5 0 0 1 .688-.463A4.501 4.501 0 0 1 9 10.282v5.716a2 2 0 1 1-4 0v-5.716a4.5 4.5 0 0 1 .312-8.204a.5.5 0 0 1 .467.048"/><defs><linearGradient id="SVGPftDHeRF1" x1="15.833" x2="12.81" y1=".38" y2="16.965" gradientUnits="userSpaceOnUse"><stop stopColor="#2bdabe"/><stop offset=".853" stopColor="#0067bf"/></linearGradient><linearGradient id="SVGBGOkQeOY1" x1="16.999" x2="10.446" y1="18.145" y2="13.592" gradientUnits="userSpaceOnUse"><stop stopColor="#ff6f47"/><stop offset="1" stopColor="#ffcd0f"/></linearGradient><linearGradient id="SVG58viBcga1" x1="13.376" x2="14.043" y1="10.484" y2="12.151" gradientUnits="userSpaceOnUse"><stop stopColor="#ffa43d"/><stop offset="1" stopColor="#fb5937"/></linearGradient><linearGradient id="SVGFNnBvbYS1" x1="10" x2="4.8" y1="-1" y2="18.48" gradientUnits="userSpaceOnUse"><stop stopColor="#2bdabe"/><stop offset="1" stopColor="#0067bf"/></linearGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><g fill="none"><path fill="url(#SVGPftDHeRF1)" d="M16 5.117V10.5h-3V5.117a20 20 0 0 1-.29-.554a8 8 0 0 1-.148-.313A.6.6 0 0 1 12.5 4q0-.086.07-.312q.071-.228.157-.493t.171-.5q.087-.234.125-.351a.46.46 0 0 1 .18-.242A.55.55 0 0 1 13.5 2h2q.164 0 .29.094a.57.57 0 0 1 .187.25q.03.109.117.344l.18.5q.093.265.156.492q.062.225.07.32a.7.7 0 0 1-.062.242q-.063.15-.141.32a3 3 0 0 1-.164.313a2 2 0 0 0-.133.242"/><path fill="url(#SVGBGOkQeOY1)" d="M17 11.5h-5v4.055q0 .507.203.953t.547.781A2.5 2.5 0 0 0 14.5 18q.5 0 .953-.195a2.7 2.7 0 0 0 .797-.524q.345-.327.547-.773a2.3 2.3 0 0 0 .203-.953z"/><path fill="url(#SVG58viBcga1)" d="M17 12v-1.5a.6.6 0 0 0-.07-.273a.37.37 0 0 0-.172-.149a1 1 0 0 0-.235-.062a2 2 0 0 0-.257-.016h-3.532q-.14 0-.265.016a.7.7 0 0 0-.235.07a.44.44 0 0 0-.171.148a.5.5 0 0 0-.063.266V12z"/><path fill="url(#SVGFNnBvbYS1)" d="M5.78 2.126a.5.5 0 0 1 .22.415v3.457a1 1 0 0 0 2 0V2.541a.5.5 0 0 1 .688-.463A4.501 4.501 0 0 1 9 10.282v5.716a2 2 0 1 1-4 0v-5.716a4.5 4.5 0 0 1 .312-8.204a.5.5 0 0 1 .467.048"/><defs><linearGradient id="SVGPftDHeRF1" x1="15.833" x2="12.81" y1=".38" y2="16.965" gradientUnits="userSpaceOnUse"><stop stop-color="#2bdabe"/><stop offset=".853" stop-color="#0067bf"/></linearGradient><linearGradient id="SVGBGOkQeOY1" x1="16.999" x2="10.446" y1="18.145" y2="13.592" gradientUnits="userSpaceOnUse"><stop stop-color="#ff6f47"/><stop offset="1" stop-color="#ffcd0f"/></linearGradient><linearGradient id="SVG58viBcga1" x1="13.376" x2="14.043" y1="10.484" y2="12.151" gradientUnits="userSpaceOnUse"><stop stop-color="#ffa43d"/><stop offset="1" stop-color="#fb5937"/></linearGradient><linearGradient id="SVGFNnBvbYS1" x1="10" x2="4.8" y1="-1" y2="18.48" gradientUnits="userSpaceOnUse"><stop stop-color="#2bdabe"/><stop offset="1" stop-color="#0067bf"/></linearGradient></defs></g></svg> </template>
CSS
.icon-wrench-screwdriver-20 {
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%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGPftDHeRF1)%22%20d%3D%22M16%205.117V10.5h-3V5.117a20%2020%200%200%201-.29-.554a8%208%200%200%201-.148-.313A.6.6%200%200%201%2012.5%204q0-.086.07-.312q.071-.228.157-.493t.171-.5q.087-.234.125-.351a.46.46%200%200%201%20.18-.242A.55.55%200%200%201%2013.5%202h2q.164%200%20.29.094a.57.57%200%200%201%20.187.25q.03.109.117.344l.18.5q.093.265.156.492q.062.225.07.32a.7.7%200%200%201-.062.242q-.063.15-.141.32a3%203%200%200%201-.164.313a2%202%200%200%200-.133.242%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGBGOkQeOY1)%22%20d%3D%22M17%2011.5h-5v4.055q0%20.507.203.953t.547.781A2.5%202.5%200%200%200%2014.5%2018q.5%200%20.953-.195a2.7%202.7%200%200%200%20.797-.524q.345-.327.547-.773a2.3%202.3%200%200%200%20.203-.953z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG58viBcga1)%22%20d%3D%22M17%2012v-1.5a.6.6%200%200%200-.07-.273a.37.37%200%200%200-.172-.149a1%201%200%200%200-.235-.062a2%202%200%200%200-.257-.016h-3.532q-.14%200-.265.016a.7.7%200%200%200-.235.07a.44.44%200%200%200-.171.148a.5.5%200%200%200-.063.266V12z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGFNnBvbYS1)%22%20d%3D%22M5.78%202.126a.5.5%200%200%201%20.22.415v3.457a1%201%200%200%200%202%200V2.541a.5.5%200%200%201%20.688-.463A4.501%204.501%200%200%201%209%2010.282v5.716a2%202%200%201%201-4%200v-5.716a4.5%204.5%200%200%201%20.312-8.204a.5.5%200%200%201%20.467.048%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGPftDHeRF1%22%20x1%3D%2215.833%22%20x2%3D%2212.81%22%20y1%3D%22.38%22%20y2%3D%2216.965%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%232bdabe%22%2F%3E%3Cstop%20offset%3D%22.853%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGBGOkQeOY1%22%20x1%3D%2216.999%22%20x2%3D%2210.446%22%20y1%3D%2218.145%22%20y2%3D%2213.592%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ff6f47%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffcd0f%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG58viBcga1%22%20x1%3D%2213.376%22%20x2%3D%2214.043%22%20y1%3D%2210.484%22%20y2%3D%2212.151%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ffa43d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fb5937%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGFNnBvbYS1%22%20x1%3D%2210%22%20x2%3D%224.8%22%20y1%3D%22-1%22%20y2%3D%2218.48%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%232bdabe%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%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%2020%2020%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGPftDHeRF1)%22%20d%3D%22M16%205.117V10.5h-3V5.117a20%2020%200%200%201-.29-.554a8%208%200%200%201-.148-.313A.6.6%200%200%201%2012.5%204q0-.086.07-.312q.071-.228.157-.493t.171-.5q.087-.234.125-.351a.46.46%200%200%201%20.18-.242A.55.55%200%200%201%2013.5%202h2q.164%200%20.29.094a.57.57%200%200%201%20.187.25q.03.109.117.344l.18.5q.093.265.156.492q.062.225.07.32a.7.7%200%200%201-.062.242q-.063.15-.141.32a3%203%200%200%201-.164.313a2%202%200%200%200-.133.242%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGBGOkQeOY1)%22%20d%3D%22M17%2011.5h-5v4.055q0%20.507.203.953t.547.781A2.5%202.5%200%200%200%2014.5%2018q.5%200%20.953-.195a2.7%202.7%200%200%200%20.797-.524q.345-.327.547-.773a2.3%202.3%200%200%200%20.203-.953z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG58viBcga1)%22%20d%3D%22M17%2012v-1.5a.6.6%200%200%200-.07-.273a.37.37%200%200%200-.172-.149a1%201%200%200%200-.235-.062a2%202%200%200%200-.257-.016h-3.532q-.14%200-.265.016a.7.7%200%200%200-.235.07a.44.44%200%200%200-.171.148a.5.5%200%200%200-.063.266V12z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGFNnBvbYS1)%22%20d%3D%22M5.78%202.126a.5.5%200%200%201%20.22.415v3.457a1%201%200%200%200%202%200V2.541a.5.5%200%200%201%20.688-.463A4.501%204.501%200%200%201%209%2010.282v5.716a2%202%200%201%201-4%200v-5.716a4.5%204.5%200%200%201%20.312-8.204a.5.5%200%200%201%20.467.048%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGPftDHeRF1%22%20x1%3D%2215.833%22%20x2%3D%2212.81%22%20y1%3D%22.38%22%20y2%3D%2216.965%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%232bdabe%22%2F%3E%3Cstop%20offset%3D%22.853%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGBGOkQeOY1%22%20x1%3D%2216.999%22%20x2%3D%2210.446%22%20y1%3D%2218.145%22%20y2%3D%2213.592%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ff6f47%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffcd0f%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVG58viBcga1%22%20x1%3D%2213.376%22%20x2%3D%2214.043%22%20y1%3D%2210.484%22%20y2%3D%2212.151%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23ffa43d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fb5937%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22SVGFNnBvbYS1%22%20x1%3D%2210%22%20x2%3D%224.8%22%20y1%3D%22-1%22%20y2%3D%2218.48%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%232bdabe%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230067bf%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/wrench-screwdriver-20.svg?color=%231a73e8&size=48
