wrench screwdriver icon
wrench-screwdriver-32-light from Fluent UI System Icons by Microsoft Corporation · 32 Light · MIT Free for personal and commercial use.
- Name
- wrench-screwdriver-32-light
- Set
- Fluent UI System Icons
- Style
- 32 Light
- Viewbox
- 32×32
- License
- MIT
8 other variants in Fluent UI System Icons
The same icon in other sets
Related icons in Fluent UI System Icons
Use the wrench screwdriver icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M21.5 3h4a.5.5 0 0 1 .447.276l1.5 3a.5.5 0 0 1 0 .448L26 9.618V16h2.5a.5.5 0 0 1 .5.5v7a5.5 5.5 0 1 1-11 0v-7a.5.5 0 0 1 .5-.5H21V9.618l-1.447-2.894a.5.5 0 0 1 0-.448l1.5-3A.5.5 0 0 1 21.5 3M25 16V9.5a.5.5 0 0 1 .053-.224L26.44 6.5L25.191 4h-3.382l-1.25 2.5l1.388 2.776A.5.5 0 0 1 22 9.5V16zm-6 1v3h9v-3zm0 4v2.5a4.5 4.5 0 1 0 9 0V21zM7.777 3.582A.5.5 0 0 1 8 3.998V9a2 2 0 1 0 4 0V3.998a.5.5 0 0 1 .692-.461A7.002 7.002 0 0 1 13 16.327V26a3 3 0 1 1-6 0v-9.674a7.002 7.002 0 0 1 .308-12.79a.5.5 0 0 1 .47.046M7 4.802a6.002 6.002 0 0 0 .692 10.738a.5.5 0 0 1 .308.462V26a2 2 0 1 0 4 0v-9.998a.5.5 0 0 1 .308-.462A6.002 6.002 0 0 0 13 4.803V9a3 3 0 1 1-6 0z"/></svg>
React
import type { SVGProps } from "react";
export function FluentWrenchScrewdriver32Light(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.5 3h4a.5.5 0 0 1 .447.276l1.5 3a.5.5 0 0 1 0 .448L26 9.618V16h2.5a.5.5 0 0 1 .5.5v7a5.5 5.5 0 1 1-11 0v-7a.5.5 0 0 1 .5-.5H21V9.618l-1.447-2.894a.5.5 0 0 1 0-.448l1.5-3A.5.5 0 0 1 21.5 3M25 16V9.5a.5.5 0 0 1 .053-.224L26.44 6.5L25.191 4h-3.382l-1.25 2.5l1.388 2.776A.5.5 0 0 1 22 9.5V16zm-6 1v3h9v-3zm0 4v2.5a4.5 4.5 0 1 0 9 0V21zM7.777 3.582A.5.5 0 0 1 8 3.998V9a2 2 0 1 0 4 0V3.998a.5.5 0 0 1 .692-.461A7.002 7.002 0 0 1 13 16.327V26a3 3 0 1 1-6 0v-9.674a7.002 7.002 0 0 1 .308-12.79a.5.5 0 0 1 .47.046M7 4.802a6.002 6.002 0 0 0 .692 10.738a.5.5 0 0 1 .308.462V26a2 2 0 1 0 4 0v-9.998a.5.5 0 0 1 .308-.462A6.002 6.002 0 0 0 13 4.803V9a3 3 0 1 1-6 0z"/></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.5 3h4a.5.5 0 0 1 .447.276l1.5 3a.5.5 0 0 1 0 .448L26 9.618V16h2.5a.5.5 0 0 1 .5.5v7a5.5 5.5 0 1 1-11 0v-7a.5.5 0 0 1 .5-.5H21V9.618l-1.447-2.894a.5.5 0 0 1 0-.448l1.5-3A.5.5 0 0 1 21.5 3M25 16V9.5a.5.5 0 0 1 .053-.224L26.44 6.5L25.191 4h-3.382l-1.25 2.5l1.388 2.776A.5.5 0 0 1 22 9.5V16zm-6 1v3h9v-3zm0 4v2.5a4.5 4.5 0 1 0 9 0V21zM7.777 3.582A.5.5 0 0 1 8 3.998V9a2 2 0 1 0 4 0V3.998a.5.5 0 0 1 .692-.461A7.002 7.002 0 0 1 13 16.327V26a3 3 0 1 1-6 0v-9.674a7.002 7.002 0 0 1 .308-12.79a.5.5 0 0 1 .47.046M7 4.802a6.002 6.002 0 0 0 .692 10.738a.5.5 0 0 1 .308.462V26a2 2 0 1 0 4 0v-9.998a.5.5 0 0 1 .308-.462A6.002 6.002 0 0 0 13 4.803V9a3 3 0 1 1-6 0z"/></svg> </template>
CSS
.icon-wrench-screwdriver-32-light {
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.5%203h4a.5.5%200%200%201%20.447.276l1.5%203a.5.5%200%200%201%200%20.448L26%209.618V16h2.5a.5.5%200%200%201%20.5.5v7a5.5%205.5%200%201%201-11%200v-7a.5.5%200%200%201%20.5-.5H21V9.618l-1.447-2.894a.5.5%200%200%201%200-.448l1.5-3A.5.5%200%200%201%2021.5%203M25%2016V9.5a.5.5%200%200%201%20.053-.224L26.44%206.5L25.191%204h-3.382l-1.25%202.5l1.388%202.776A.5.5%200%200%201%2022%209.5V16zm-6%201v3h9v-3zm0%204v2.5a4.5%204.5%200%201%200%209%200V21zM7.777%203.582A.5.5%200%200%201%208%203.998V9a2%202%200%201%200%204%200V3.998a.5.5%200%200%201%20.692-.461A7.002%207.002%200%200%201%2013%2016.327V26a3%203%200%201%201-6%200v-9.674a7.002%207.002%200%200%201%20.308-12.79a.5.5%200%200%201%20.47.046M7%204.802a6.002%206.002%200%200%200%20.692%2010.738a.5.5%200%200%201%20.308.462V26a2%202%200%201%200%204%200v-9.998a.5.5%200%200%201%20.308-.462A6.002%206.002%200%200%200%2013%204.803V9a3%203%200%201%201-6%200z%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.5%203h4a.5.5%200%200%201%20.447.276l1.5%203a.5.5%200%200%201%200%20.448L26%209.618V16h2.5a.5.5%200%200%201%20.5.5v7a5.5%205.5%200%201%201-11%200v-7a.5.5%200%200%201%20.5-.5H21V9.618l-1.447-2.894a.5.5%200%200%201%200-.448l1.5-3A.5.5%200%200%201%2021.5%203M25%2016V9.5a.5.5%200%200%201%20.053-.224L26.44%206.5L25.191%204h-3.382l-1.25%202.5l1.388%202.776A.5.5%200%200%201%2022%209.5V16zm-6%201v3h9v-3zm0%204v2.5a4.5%204.5%200%201%200%209%200V21zM7.777%203.582A.5.5%200%200%201%208%203.998V9a2%202%200%201%200%204%200V3.998a.5.5%200%200%201%20.692-.461A7.002%207.002%200%200%201%2013%2016.327V26a3%203%200%201%201-6%200v-9.674a7.002%207.002%200%200%201%20.308-12.79a.5.5%200%200%201%20.47.046M7%204.802a6.002%206.002%200%200%200%20.692%2010.738a.5.5%200%200%201%20.308.462V26a2%202%200%201%200%204%200v-9.998a.5.5%200%200%201%20.308-.462A6.002%206.002%200%200%200%2013%204.803V9a3%203%200%201%201-6%200z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/wrench-screwdriver-32-light.svg?color=%231a73e8&size=48
