cog icon
cog from Jam Icons by Michael Amprimo · Outline · MIT Free for personal and commercial use.
- Name
- cog
- Set
- Jam Icons
- Style
- Outline
- Viewbox
- 24×24
- License
- MIT
1 other variant in Jam Icons
The same icon in other sets
Use the cog icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="-2 -2 24 24"><path fill="currentColor" d="M20 8.163A2.1 2.1 0 0 0 18.926 10c0 .789.433 1.476 1.074 1.837l-.717 2.406a2.105 2.105 0 0 0-2.218 3.058l-2.062 1.602A2.104 2.104 0 0 0 11.633 20l-3.29-.008a2.104 2.104 0 0 0-3.362-1.094l-2.06-1.615A2.105 2.105 0 0 0 .715 14.24L0 11.825A2.1 2.1 0 0 0 1.051 10C1.051 9.22.63 8.54 0 8.175L.715 5.76a2.105 2.105 0 0 0 2.207-3.043L4.98 1.102A2.104 2.104 0 0 0 8.342.008L11.634 0a2.104 2.104 0 0 0 3.37 1.097l2.06 1.603a2.105 2.105 0 0 0 2.218 3.058zM14.823 3.68q0-.094.005-.188l-.08-.062a4.1 4.1 0 0 1-4.308-1.428l-.904.002a4.1 4.1 0 0 1-4.29 1.43l-.095.076A4.11 4.11 0 0 1 2.279 7.6a4.1 4.1 0 0 1 .772 2.399c0 .882-.28 1.715-.772 2.4a4.11 4.11 0 0 1 2.872 4.09l.096.075a4.1 4.1 0 0 1 4.289 1.43l.904.002a4.1 4.1 0 0 1 4.307-1.428l.08-.062A4.11 4.11 0 0 1 17.7 12.4a4.1 4.1 0 0 1-.773-2.4c0-.882.281-1.716.773-2.4a4.11 4.11 0 0 1-2.876-3.919zM10 14a4 4 0 1 1 0-8a4 4 0 0 1 0 8m0-2a2 2 0 1 0 0-4a2 2 0 0 0 0 4"/></svg>
React
import type { SVGProps } from "react";
export function JamCog(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="-2 -2 24 24"><path fill="currentColor" d="M20 8.163A2.1 2.1 0 0 0 18.926 10c0 .789.433 1.476 1.074 1.837l-.717 2.406a2.105 2.105 0 0 0-2.218 3.058l-2.062 1.602A2.104 2.104 0 0 0 11.633 20l-3.29-.008a2.104 2.104 0 0 0-3.362-1.094l-2.06-1.615A2.105 2.105 0 0 0 .715 14.24L0 11.825A2.1 2.1 0 0 0 1.051 10C1.051 9.22.63 8.54 0 8.175L.715 5.76a2.105 2.105 0 0 0 2.207-3.043L4.98 1.102A2.104 2.104 0 0 0 8.342.008L11.634 0a2.104 2.104 0 0 0 3.37 1.097l2.06 1.603a2.105 2.105 0 0 0 2.218 3.058zM14.823 3.68q0-.094.005-.188l-.08-.062a4.1 4.1 0 0 1-4.308-1.428l-.904.002a4.1 4.1 0 0 1-4.29 1.43l-.095.076A4.11 4.11 0 0 1 2.279 7.6a4.1 4.1 0 0 1 .772 2.399c0 .882-.28 1.715-.772 2.4a4.11 4.11 0 0 1 2.872 4.09l.096.075a4.1 4.1 0 0 1 4.289 1.43l.904.002a4.1 4.1 0 0 1 4.307-1.428l.08-.062A4.11 4.11 0 0 1 17.7 12.4a4.1 4.1 0 0 1-.773-2.4c0-.882.281-1.716.773-2.4a4.11 4.11 0 0 1-2.876-3.919zM10 14a4 4 0 1 1 0-8a4 4 0 0 1 0 8m0-2a2 2 0 1 0 0-4a2 2 0 0 0 0 4"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="-2 -2 24 24"><path fill="currentColor" d="M20 8.163A2.1 2.1 0 0 0 18.926 10c0 .789.433 1.476 1.074 1.837l-.717 2.406a2.105 2.105 0 0 0-2.218 3.058l-2.062 1.602A2.104 2.104 0 0 0 11.633 20l-3.29-.008a2.104 2.104 0 0 0-3.362-1.094l-2.06-1.615A2.105 2.105 0 0 0 .715 14.24L0 11.825A2.1 2.1 0 0 0 1.051 10C1.051 9.22.63 8.54 0 8.175L.715 5.76a2.105 2.105 0 0 0 2.207-3.043L4.98 1.102A2.104 2.104 0 0 0 8.342.008L11.634 0a2.104 2.104 0 0 0 3.37 1.097l2.06 1.603a2.105 2.105 0 0 0 2.218 3.058zM14.823 3.68q0-.094.005-.188l-.08-.062a4.1 4.1 0 0 1-4.308-1.428l-.904.002a4.1 4.1 0 0 1-4.29 1.43l-.095.076A4.11 4.11 0 0 1 2.279 7.6a4.1 4.1 0 0 1 .772 2.399c0 .882-.28 1.715-.772 2.4a4.11 4.11 0 0 1 2.872 4.09l.096.075a4.1 4.1 0 0 1 4.289 1.43l.904.002a4.1 4.1 0 0 1 4.307-1.428l.08-.062A4.11 4.11 0 0 1 17.7 12.4a4.1 4.1 0 0 1-.773-2.4c0-.882.281-1.716.773-2.4a4.11 4.11 0 0 1-2.876-3.919zM10 14a4 4 0 1 1 0-8a4 4 0 0 1 0 8m0-2a2 2 0 1 0 0-4a2 2 0 0 0 0 4"/></svg> </template>
CSS
.icon-cog {
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%22-2%20-2%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M20%208.163A2.1%202.1%200%200%200%2018.926%2010c0%20.789.433%201.476%201.074%201.837l-.717%202.406a2.105%202.105%200%200%200-2.218%203.058l-2.062%201.602A2.104%202.104%200%200%200%2011.633%2020l-3.29-.008a2.104%202.104%200%200%200-3.362-1.094l-2.06-1.615A2.105%202.105%200%200%200%20.715%2014.24L0%2011.825A2.1%202.1%200%200%200%201.051%2010C1.051%209.22.63%208.54%200%208.175L.715%205.76a2.105%202.105%200%200%200%202.207-3.043L4.98%201.102A2.104%202.104%200%200%200%208.342.008L11.634%200a2.104%202.104%200%200%200%203.37%201.097l2.06%201.603a2.105%202.105%200%200%200%202.218%203.058zM14.823%203.68q0-.094.005-.188l-.08-.062a4.1%204.1%200%200%201-4.308-1.428l-.904.002a4.1%204.1%200%200%201-4.29%201.43l-.095.076A4.11%204.11%200%200%201%202.279%207.6a4.1%204.1%200%200%201%20.772%202.399c0%20.882-.28%201.715-.772%202.4a4.11%204.11%200%200%201%202.872%204.09l.096.075a4.1%204.1%200%200%201%204.289%201.43l.904.002a4.1%204.1%200%200%201%204.307-1.428l.08-.062A4.11%204.11%200%200%201%2017.7%2012.4a4.1%204.1%200%200%201-.773-2.4c0-.882.281-1.716.773-2.4a4.11%204.11%200%200%201-2.876-3.919zM10%2014a4%204%200%201%201%200-8a4%204%200%200%201%200%208m0-2a2%202%200%201%200%200-4a2%202%200%200%200%200%204%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%22-2%20-2%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M20%208.163A2.1%202.1%200%200%200%2018.926%2010c0%20.789.433%201.476%201.074%201.837l-.717%202.406a2.105%202.105%200%200%200-2.218%203.058l-2.062%201.602A2.104%202.104%200%200%200%2011.633%2020l-3.29-.008a2.104%202.104%200%200%200-3.362-1.094l-2.06-1.615A2.105%202.105%200%200%200%20.715%2014.24L0%2011.825A2.1%202.1%200%200%200%201.051%2010C1.051%209.22.63%208.54%200%208.175L.715%205.76a2.105%202.105%200%200%200%202.207-3.043L4.98%201.102A2.104%202.104%200%200%200%208.342.008L11.634%200a2.104%202.104%200%200%200%203.37%201.097l2.06%201.603a2.105%202.105%200%200%200%202.218%203.058zM14.823%203.68q0-.094.005-.188l-.08-.062a4.1%204.1%200%200%201-4.308-1.428l-.904.002a4.1%204.1%200%200%201-4.29%201.43l-.095.076A4.11%204.11%200%200%201%202.279%207.6a4.1%204.1%200%200%201%20.772%202.399c0%20.882-.28%201.715-.772%202.4a4.11%204.11%200%200%201%202.872%204.09l.096.075a4.1%204.1%200%200%201%204.289%201.43l.904.002a4.1%204.1%200%200%201%204.307-1.428l.08-.062A4.11%204.11%200%200%201%2017.7%2012.4a4.1%204.1%200%200%201-.773-2.4c0-.882.281-1.716.773-2.4a4.11%204.11%200%200%201-2.876-3.919zM10%2014a4%204%200%201%201%200-8a4%204%200%200%201%200%208m0-2a2%202%200%201%200%200-4a2%202%200%200%200%200%204%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/jam/cog.svg?color=%231a73e8&size=48
