toolbox-two-tone from Keyline Icons by Keyline Icons · Two Tone · MIT Free for personal and commercial use.

Name
toolbox-two-tone
Set
Keyline Icons
Style
Two Tone
Viewbox
24×24
License
MIT

7 other variants in Keyline Icons

The same icon in other sets

Use the toolbox 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="2"><path fill="currentColor" fill-opacity=".4" d="M3.7071 7.8787C4.2697 7.3161 5.0328 7 5.8284 7L18.1716 7C18.9672 7 19.7303 7.3161 20.2929 7.8787L22.1213 9.7071C22.6839 10.2697 23 11.0328 23 11.8284L23 18C23 20.2091 21.2091 22 19 22L5 22C2.7909 22 1 20.2091 1 18L1 11.8284C1 11.0328 1.3161 10.2697 1.8787 9.7071L3.7071 7.8787Z" stroke="none"/><path d="M4.4142 8.5858C4.7893 8.2107 5.298 8 5.8284 8L18.1716 8C18.702 8 19.2107 8.2107 19.5858 8.5858L21.4142 10.4142C21.7893 10.7893 22 11.298 22 11.8284L22 18C22 19.6569 20.6569 21 19 21L5 21C3.3431 21 2 19.6569 2 18L2 11.8284C2 11.298 2.2107 10.7893 2.5858 10.4142L4.4142 8.5858ZM2 14H22M8 12V16M16 12V16M8 8V5C8 3.8954 8.8954 3 10 3H14C15.1046 3 16 3.8954 16 5V8"/></g></svg>

React

import type { SVGProps } from "react";

export function KeylineIconsToolboxTwoTone(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="2"><path fill="currentColor" fillOpacity=".4" d="M3.7071 7.8787C4.2697 7.3161 5.0328 7 5.8284 7L18.1716 7C18.9672 7 19.7303 7.3161 20.2929 7.8787L22.1213 9.7071C22.6839 10.2697 23 11.0328 23 11.8284L23 18C23 20.2091 21.2091 22 19 22L5 22C2.7909 22 1 20.2091 1 18L1 11.8284C1 11.0328 1.3161 10.2697 1.8787 9.7071L3.7071 7.8787Z" stroke="none"/><path d="M4.4142 8.5858C4.7893 8.2107 5.298 8 5.8284 8L18.1716 8C18.702 8 19.2107 8.2107 19.5858 8.5858L21.4142 10.4142C21.7893 10.7893 22 11.298 22 11.8284L22 18C22 19.6569 20.6569 21 19 21L5 21C3.3431 21 2 19.6569 2 18L2 11.8284C2 11.298 2.2107 10.7893 2.5858 10.4142L4.4142 8.5858ZM2 14H22M8 12V16M16 12V16M8 8V5C8 3.8954 8.8954 3 10 3H14C15.1046 3 16 3.8954 16 5V8"/></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="2"><path fill="currentColor" fill-opacity=".4" d="M3.7071 7.8787C4.2697 7.3161 5.0328 7 5.8284 7L18.1716 7C18.9672 7 19.7303 7.3161 20.2929 7.8787L22.1213 9.7071C22.6839 10.2697 23 11.0328 23 11.8284L23 18C23 20.2091 21.2091 22 19 22L5 22C2.7909 22 1 20.2091 1 18L1 11.8284C1 11.0328 1.3161 10.2697 1.8787 9.7071L3.7071 7.8787Z" stroke="none"/><path d="M4.4142 8.5858C4.7893 8.2107 5.298 8 5.8284 8L18.1716 8C18.702 8 19.2107 8.2107 19.5858 8.5858L21.4142 10.4142C21.7893 10.7893 22 11.298 22 11.8284L22 18C22 19.6569 20.6569 21 19 21L5 21C3.3431 21 2 19.6569 2 18L2 11.8284C2 11.298 2.2107 10.7893 2.5858 10.4142L4.4142 8.5858ZM2 14H22M8 12V16M16 12V16M8 8V5C8 3.8954 8.8954 3 10 3H14C15.1046 3 16 3.8954 16 5V8"/></g></svg>
</template>

CSS

.icon-toolbox-two-tone {
  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%222%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-opacity%3D%22.4%22%20d%3D%22M3.7071%207.8787C4.2697%207.3161%205.0328%207%205.8284%207L18.1716%207C18.9672%207%2019.7303%207.3161%2020.2929%207.8787L22.1213%209.7071C22.6839%2010.2697%2023%2011.0328%2023%2011.8284L23%2018C23%2020.2091%2021.2091%2022%2019%2022L5%2022C2.7909%2022%201%2020.2091%201%2018L1%2011.8284C1%2011.0328%201.3161%2010.2697%201.8787%209.7071L3.7071%207.8787Z%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M4.4142%208.5858C4.7893%208.2107%205.298%208%205.8284%208L18.1716%208C18.702%208%2019.2107%208.2107%2019.5858%208.5858L21.4142%2010.4142C21.7893%2010.7893%2022%2011.298%2022%2011.8284L22%2018C22%2019.6569%2020.6569%2021%2019%2021L5%2021C3.3431%2021%202%2019.6569%202%2018L2%2011.8284C2%2011.298%202.2107%2010.7893%202.5858%2010.4142L4.4142%208.5858ZM2%2014H22M8%2012V16M16%2012V16M8%208V5C8%203.8954%208.8954%203%2010%203H14C15.1046%203%2016%203.8954%2016%205V8%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%222%22%3E%3Cpath%20fill%3D%22currentColor%22%20fill-opacity%3D%22.4%22%20d%3D%22M3.7071%207.8787C4.2697%207.3161%205.0328%207%205.8284%207L18.1716%207C18.9672%207%2019.7303%207.3161%2020.2929%207.8787L22.1213%209.7071C22.6839%2010.2697%2023%2011.0328%2023%2011.8284L23%2018C23%2020.2091%2021.2091%2022%2019%2022L5%2022C2.7909%2022%201%2020.2091%201%2018L1%2011.8284C1%2011.0328%201.3161%2010.2697%201.8787%209.7071L3.7071%207.8787Z%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M4.4142%208.5858C4.7893%208.2107%205.298%208%205.8284%208L18.1716%208C18.702%208%2019.2107%208.2107%2019.5858%208.5858L21.4142%2010.4142C21.7893%2010.7893%2022%2011.298%2022%2011.8284L22%2018C22%2019.6569%2020.6569%2021%2019%2021L5%2021C3.3431%2021%202%2019.6569%202%2018L2%2011.8284C2%2011.298%202.2107%2010.7893%202.5858%2010.4142L4.4142%208.5858ZM2%2014H22M8%2012V16M16%2012V16M8%208V5C8%203.8954%208.8954%203%2010%203H14C15.1046%203%2016%203.8954%2016%205V8%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/keyline-icons/toolbox-two-tone.svg?color=%231a73e8&size=48