gear icon
gear from Codicons by Microsoft Corporation · Regular · CC-BY-4.0 Attribution required.
- Name
- gear
- Set
- Codicons
- Style
- Regular
- Viewbox
- 16×16
- License
- CC BY 4.0
The same icon in other sets
Related icons in Codicons
Use the gear icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M8 6a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 6m0 3a1 1 0 1 1 0-2a1 1 0 0 1 0 2m6.565.715l-1.286-1.087a.82.82 0 0 1 0-1.256l1.286-1.087a.41.41 0 0 0 .126-.441a7 7 0 0 0-1.472-2.536a.42.42 0 0 0-.446-.112l-1.587.565a.8.8 0 0 1-.279.049a.826.826 0 0 1-.813-.676l-.303-1.652a.41.41 0 0 0-.321-.329a7.1 7.1 0 0 0-2.939 0a.41.41 0 0 0-.321.329l-.302 1.652a.827.827 0 0 1-1.092.628l-1.587-.565a.42.42 0 0 0-.446.112A7 7 0 0 0 1.31 5.845a.41.41 0 0 0 .126.441l1.286 1.087a.82.82 0 0 1 0 1.256L1.436 9.716a.41.41 0 0 0-.126.441a7 7 0 0 0 1.473 2.536a.42.42 0 0 0 .446.112l1.587-.565a.8.8 0 0 1 .279-.048c.392 0 .74.278.813.676l.302 1.652c.03.164.157.294.321.329q.722.153 1.47.153q.749 0 1.469-.153a.41.41 0 0 0 .321-.329l.303-1.652a.827.827 0 0 1 1.092-.628l1.586.565a.42.42 0 0 0 .446-.112a7 7 0 0 0 1.472-2.536a.41.41 0 0 0-.126-.441zm-1.837 2.011l-1.207-.43a1.83 1.83 0 0 0-2.41 1.39l-.23 1.251a6.2 6.2 0 0 1-1.761-.001l-.229-1.251a1.825 1.825 0 0 0-2.411-1.39l-1.207.43a6 6 0 0 1-.879-1.511l.974-.823c.373-.315.6-.757.64-1.243a1.81 1.81 0 0 0-.64-1.54l-.974-.823a6 6 0 0 1 .879-1.511l1.207.43q.298.106.614.106a1.83 1.83 0 0 0 1.797-1.496l.229-1.251a6.2 6.2 0 0 1 1.761-.001l.229 1.251a1.825 1.825 0 0 0 2.411 1.39l1.207-.43q.553.692.879 1.511l-.973.823a1.8 1.8 0 0 0-.64 1.243a1.8 1.8 0 0 0 .641 1.54l.974.823a6 6 0 0 1-.879 1.511z"/></svg>
React
import type { SVGProps } from "react";
export function CodiconGear(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M8 6a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 6m0 3a1 1 0 1 1 0-2a1 1 0 0 1 0 2m6.565.715l-1.286-1.087a.82.82 0 0 1 0-1.256l1.286-1.087a.41.41 0 0 0 .126-.441a7 7 0 0 0-1.472-2.536a.42.42 0 0 0-.446-.112l-1.587.565a.8.8 0 0 1-.279.049a.826.826 0 0 1-.813-.676l-.303-1.652a.41.41 0 0 0-.321-.329a7.1 7.1 0 0 0-2.939 0a.41.41 0 0 0-.321.329l-.302 1.652a.827.827 0 0 1-1.092.628l-1.587-.565a.42.42 0 0 0-.446.112A7 7 0 0 0 1.31 5.845a.41.41 0 0 0 .126.441l1.286 1.087a.82.82 0 0 1 0 1.256L1.436 9.716a.41.41 0 0 0-.126.441a7 7 0 0 0 1.473 2.536a.42.42 0 0 0 .446.112l1.587-.565a.8.8 0 0 1 .279-.048c.392 0 .74.278.813.676l.302 1.652c.03.164.157.294.321.329q.722.153 1.47.153q.749 0 1.469-.153a.41.41 0 0 0 .321-.329l.303-1.652a.827.827 0 0 1 1.092-.628l1.586.565a.42.42 0 0 0 .446-.112a7 7 0 0 0 1.472-2.536a.41.41 0 0 0-.126-.441zm-1.837 2.011l-1.207-.43a1.83 1.83 0 0 0-2.41 1.39l-.23 1.251a6.2 6.2 0 0 1-1.761-.001l-.229-1.251a1.825 1.825 0 0 0-2.411-1.39l-1.207.43a6 6 0 0 1-.879-1.511l.974-.823c.373-.315.6-.757.64-1.243a1.81 1.81 0 0 0-.64-1.54l-.974-.823a6 6 0 0 1 .879-1.511l1.207.43q.298.106.614.106a1.83 1.83 0 0 0 1.797-1.496l.229-1.251a6.2 6.2 0 0 1 1.761-.001l.229 1.251a1.825 1.825 0 0 0 2.411 1.39l1.207-.43q.553.692.879 1.511l-.973.823a1.8 1.8 0 0 0-.64 1.243a1.8 1.8 0 0 0 .641 1.54l.974.823a6 6 0 0 1-.879 1.511z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M8 6a2 2 0 1 0-.001 3.999A2 2 0 0 0 8 6m0 3a1 1 0 1 1 0-2a1 1 0 0 1 0 2m6.565.715l-1.286-1.087a.82.82 0 0 1 0-1.256l1.286-1.087a.41.41 0 0 0 .126-.441a7 7 0 0 0-1.472-2.536a.42.42 0 0 0-.446-.112l-1.587.565a.8.8 0 0 1-.279.049a.826.826 0 0 1-.813-.676l-.303-1.652a.41.41 0 0 0-.321-.329a7.1 7.1 0 0 0-2.939 0a.41.41 0 0 0-.321.329l-.302 1.652a.827.827 0 0 1-1.092.628l-1.587-.565a.42.42 0 0 0-.446.112A7 7 0 0 0 1.31 5.845a.41.41 0 0 0 .126.441l1.286 1.087a.82.82 0 0 1 0 1.256L1.436 9.716a.41.41 0 0 0-.126.441a7 7 0 0 0 1.473 2.536a.42.42 0 0 0 .446.112l1.587-.565a.8.8 0 0 1 .279-.048c.392 0 .74.278.813.676l.302 1.652c.03.164.157.294.321.329q.722.153 1.47.153q.749 0 1.469-.153a.41.41 0 0 0 .321-.329l.303-1.652a.827.827 0 0 1 1.092-.628l1.586.565a.42.42 0 0 0 .446-.112a7 7 0 0 0 1.472-2.536a.41.41 0 0 0-.126-.441zm-1.837 2.011l-1.207-.43a1.83 1.83 0 0 0-2.41 1.39l-.23 1.251a6.2 6.2 0 0 1-1.761-.001l-.229-1.251a1.825 1.825 0 0 0-2.411-1.39l-1.207.43a6 6 0 0 1-.879-1.511l.974-.823c.373-.315.6-.757.64-1.243a1.81 1.81 0 0 0-.64-1.54l-.974-.823a6 6 0 0 1 .879-1.511l1.207.43q.298.106.614.106a1.83 1.83 0 0 0 1.797-1.496l.229-1.251a6.2 6.2 0 0 1 1.761-.001l.229 1.251a1.825 1.825 0 0 0 2.411 1.39l1.207-.43q.553.692.879 1.511l-.973.823a1.8 1.8 0 0 0-.64 1.243a1.8 1.8 0 0 0 .641 1.54l.974.823a6 6 0 0 1-.879 1.511z"/></svg> </template>
CSS
.icon-gear {
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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8%206a2%202%200%201%200-.001%203.999A2%202%200%200%200%208%206m0%203a1%201%200%201%201%200-2a1%201%200%200%201%200%202m6.565.715l-1.286-1.087a.82.82%200%200%201%200-1.256l1.286-1.087a.41.41%200%200%200%20.126-.441a7%207%200%200%200-1.472-2.536a.42.42%200%200%200-.446-.112l-1.587.565a.8.8%200%200%201-.279.049a.826.826%200%200%201-.813-.676l-.303-1.652a.41.41%200%200%200-.321-.329a7.1%207.1%200%200%200-2.939%200a.41.41%200%200%200-.321.329l-.302%201.652a.827.827%200%200%201-1.092.628l-1.587-.565a.42.42%200%200%200-.446.112A7%207%200%200%200%201.31%205.845a.41.41%200%200%200%20.126.441l1.286%201.087a.82.82%200%200%201%200%201.256L1.436%209.716a.41.41%200%200%200-.126.441a7%207%200%200%200%201.473%202.536a.42.42%200%200%200%20.446.112l1.587-.565a.8.8%200%200%201%20.279-.048c.392%200%20.74.278.813.676l.302%201.652c.03.164.157.294.321.329q.722.153%201.47.153q.749%200%201.469-.153a.41.41%200%200%200%20.321-.329l.303-1.652a.827.827%200%200%201%201.092-.628l1.586.565a.42.42%200%200%200%20.446-.112a7%207%200%200%200%201.472-2.536a.41.41%200%200%200-.126-.441zm-1.837%202.011l-1.207-.43a1.83%201.83%200%200%200-2.41%201.39l-.23%201.251a6.2%206.2%200%200%201-1.761-.001l-.229-1.251a1.825%201.825%200%200%200-2.411-1.39l-1.207.43a6%206%200%200%201-.879-1.511l.974-.823c.373-.315.6-.757.64-1.243a1.81%201.81%200%200%200-.64-1.54l-.974-.823a6%206%200%200%201%20.879-1.511l1.207.43q.298.106.614.106a1.83%201.83%200%200%200%201.797-1.496l.229-1.251a6.2%206.2%200%200%201%201.761-.001l.229%201.251a1.825%201.825%200%200%200%202.411%201.39l1.207-.43q.553.692.879%201.511l-.973.823a1.8%201.8%200%200%200-.64%201.243a1.8%201.8%200%200%200%20.641%201.54l.974.823a6%206%200%200%201-.879%201.511z%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%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8%206a2%202%200%201%200-.001%203.999A2%202%200%200%200%208%206m0%203a1%201%200%201%201%200-2a1%201%200%200%201%200%202m6.565.715l-1.286-1.087a.82.82%200%200%201%200-1.256l1.286-1.087a.41.41%200%200%200%20.126-.441a7%207%200%200%200-1.472-2.536a.42.42%200%200%200-.446-.112l-1.587.565a.8.8%200%200%201-.279.049a.826.826%200%200%201-.813-.676l-.303-1.652a.41.41%200%200%200-.321-.329a7.1%207.1%200%200%200-2.939%200a.41.41%200%200%200-.321.329l-.302%201.652a.827.827%200%200%201-1.092.628l-1.587-.565a.42.42%200%200%200-.446.112A7%207%200%200%200%201.31%205.845a.41.41%200%200%200%20.126.441l1.286%201.087a.82.82%200%200%201%200%201.256L1.436%209.716a.41.41%200%200%200-.126.441a7%207%200%200%200%201.473%202.536a.42.42%200%200%200%20.446.112l1.587-.565a.8.8%200%200%201%20.279-.048c.392%200%20.74.278.813.676l.302%201.652c.03.164.157.294.321.329q.722.153%201.47.153q.749%200%201.469-.153a.41.41%200%200%200%20.321-.329l.303-1.652a.827.827%200%200%201%201.092-.628l1.586.565a.42.42%200%200%200%20.446-.112a7%207%200%200%200%201.472-2.536a.41.41%200%200%200-.126-.441zm-1.837%202.011l-1.207-.43a1.83%201.83%200%200%200-2.41%201.39l-.23%201.251a6.2%206.2%200%200%201-1.761-.001l-.229-1.251a1.825%201.825%200%200%200-2.411-1.39l-1.207.43a6%206%200%200%201-.879-1.511l.974-.823c.373-.315.6-.757.64-1.243a1.81%201.81%200%200%200-.64-1.54l-.974-.823a6%206%200%200%201%20.879-1.511l1.207.43q.298.106.614.106a1.83%201.83%200%200%200%201.797-1.496l.229-1.251a6.2%206.2%200%200%201%201.761-.001l.229%201.251a1.825%201.825%200%200%200%202.411%201.39l1.207-.43q.553.692.879%201.511l-.973.823a1.8%201.8%200%200%200-.64%201.243a1.8%201.8%200%200%200%20.641%201.54l.974.823a6%206%200%200%201-.879%201.511z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/codicon/gear.svg?color=%231a73e8&size=48
