cog icon
cog from BoxIcons v2 by Boxicons · Regular · MIT Free for personal and commercial use.
- Name
- cog
- Set
- BoxIcons v2
- Style
- Regular
- Viewbox
- 24×24
- License
- MIT
- Aliases
- bx-cog
The same icon in other sets
Use the cog icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 16c2.206 0 4-1.794 4-4s-1.794-4-4-4s-4 1.794-4 4s1.794 4 4 4m0-6c1.084 0 2 .916 2 2s-.916 2-2 2s-2-.916-2-2s.916-2 2-2"/><path fill="currentColor" d="m2.845 16.136l1 1.73c.531.917 1.809 1.261 2.73.73l.529-.306A8 8 0 0 0 9 19.402V20c0 1.103.897 2 2 2h2c1.103 0 2-.897 2-2v-.598a8 8 0 0 0 1.896-1.111l.529.306c.923.53 2.198.188 2.731-.731l.999-1.729a2 2 0 0 0-.731-2.732l-.505-.292a7.7 7.7 0 0 0 0-2.224l.505-.292a2 2 0 0 0 .731-2.732l-.999-1.729c-.531-.92-1.808-1.265-2.731-.732l-.529.306A8 8 0 0 0 15 4.598V4c0-1.103-.897-2-2-2h-2c-1.103 0-2 .897-2 2v.598a8 8 0 0 0-1.896 1.111l-.529-.306c-.924-.531-2.2-.187-2.731.732l-.999 1.729a2 2 0 0 0 .731 2.732l.505.292a7.7 7.7 0 0 0 0 2.223l-.505.292a2.003 2.003 0 0 0-.731 2.733m3.326-2.758A5.7 5.7 0 0 1 6 12c0-.462.058-.926.17-1.378a1 1 0 0 0-.47-1.108l-1.123-.65l.998-1.729l1.145.662a1 1 0 0 0 1.188-.142a6.1 6.1 0 0 1 2.384-1.399A1 1 0 0 0 11 5.3V4h2v1.3a1 1 0 0 0 .708.956a6.1 6.1 0 0 1 2.384 1.399a1 1 0 0 0 1.188.142l1.144-.661l1 1.729l-1.124.649a1 1 0 0 0-.47 1.108c.112.452.17.916.17 1.378s-.058.925-.171 1.378a1 1 0 0 0 .471 1.108l1.123.649l-.998 1.729l-1.145-.661a1 1 0 0 0-1.188.142a6.1 6.1 0 0 1-2.384 1.399A1 1 0 0 0 13 18.7l.002 1.3H11v-1.3a1 1 0 0 0-.708-.956a6.1 6.1 0 0 1-2.384-1.399a.99.99 0 0 0-1.188-.141l-1.144.662l-1-1.729l1.124-.651a1 1 0 0 0 .471-1.108"/></svg>
React
import type { SVGProps } from "react";
export function BxCog(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 16c2.206 0 4-1.794 4-4s-1.794-4-4-4s-4 1.794-4 4s1.794 4 4 4m0-6c1.084 0 2 .916 2 2s-.916 2-2 2s-2-.916-2-2s.916-2 2-2"/><path fill="currentColor" d="m2.845 16.136l1 1.73c.531.917 1.809 1.261 2.73.73l.529-.306A8 8 0 0 0 9 19.402V20c0 1.103.897 2 2 2h2c1.103 0 2-.897 2-2v-.598a8 8 0 0 0 1.896-1.111l.529.306c.923.53 2.198.188 2.731-.731l.999-1.729a2 2 0 0 0-.731-2.732l-.505-.292a7.7 7.7 0 0 0 0-2.224l.505-.292a2 2 0 0 0 .731-2.732l-.999-1.729c-.531-.92-1.808-1.265-2.731-.732l-.529.306A8 8 0 0 0 15 4.598V4c0-1.103-.897-2-2-2h-2c-1.103 0-2 .897-2 2v.598a8 8 0 0 0-1.896 1.111l-.529-.306c-.924-.531-2.2-.187-2.731.732l-.999 1.729a2 2 0 0 0 .731 2.732l.505.292a7.7 7.7 0 0 0 0 2.223l-.505.292a2.003 2.003 0 0 0-.731 2.733m3.326-2.758A5.7 5.7 0 0 1 6 12c0-.462.058-.926.17-1.378a1 1 0 0 0-.47-1.108l-1.123-.65l.998-1.729l1.145.662a1 1 0 0 0 1.188-.142a6.1 6.1 0 0 1 2.384-1.399A1 1 0 0 0 11 5.3V4h2v1.3a1 1 0 0 0 .708.956a6.1 6.1 0 0 1 2.384 1.399a1 1 0 0 0 1.188.142l1.144-.661l1 1.729l-1.124.649a1 1 0 0 0-.47 1.108c.112.452.17.916.17 1.378s-.058.925-.171 1.378a1 1 0 0 0 .471 1.108l1.123.649l-.998 1.729l-1.145-.661a1 1 0 0 0-1.188.142a6.1 6.1 0 0 1-2.384 1.399A1 1 0 0 0 13 18.7l.002 1.3H11v-1.3a1 1 0 0 0-.708-.956a6.1 6.1 0 0 1-2.384-1.399a.99.99 0 0 0-1.188-.141l-1.144.662l-1-1.729l1.124-.651a1 1 0 0 0 .471-1.108"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 16c2.206 0 4-1.794 4-4s-1.794-4-4-4s-4 1.794-4 4s1.794 4 4 4m0-6c1.084 0 2 .916 2 2s-.916 2-2 2s-2-.916-2-2s.916-2 2-2"/><path fill="currentColor" d="m2.845 16.136l1 1.73c.531.917 1.809 1.261 2.73.73l.529-.306A8 8 0 0 0 9 19.402V20c0 1.103.897 2 2 2h2c1.103 0 2-.897 2-2v-.598a8 8 0 0 0 1.896-1.111l.529.306c.923.53 2.198.188 2.731-.731l.999-1.729a2 2 0 0 0-.731-2.732l-.505-.292a7.7 7.7 0 0 0 0-2.224l.505-.292a2 2 0 0 0 .731-2.732l-.999-1.729c-.531-.92-1.808-1.265-2.731-.732l-.529.306A8 8 0 0 0 15 4.598V4c0-1.103-.897-2-2-2h-2c-1.103 0-2 .897-2 2v.598a8 8 0 0 0-1.896 1.111l-.529-.306c-.924-.531-2.2-.187-2.731.732l-.999 1.729a2 2 0 0 0 .731 2.732l.505.292a7.7 7.7 0 0 0 0 2.223l-.505.292a2.003 2.003 0 0 0-.731 2.733m3.326-2.758A5.7 5.7 0 0 1 6 12c0-.462.058-.926.17-1.378a1 1 0 0 0-.47-1.108l-1.123-.65l.998-1.729l1.145.662a1 1 0 0 0 1.188-.142a6.1 6.1 0 0 1 2.384-1.399A1 1 0 0 0 11 5.3V4h2v1.3a1 1 0 0 0 .708.956a6.1 6.1 0 0 1 2.384 1.399a1 1 0 0 0 1.188.142l1.144-.661l1 1.729l-1.124.649a1 1 0 0 0-.47 1.108c.112.452.17.916.17 1.378s-.058.925-.171 1.378a1 1 0 0 0 .471 1.108l1.123.649l-.998 1.729l-1.145-.661a1 1 0 0 0-1.188.142a6.1 6.1 0 0 1-2.384 1.399A1 1 0 0 0 13 18.7l.002 1.3H11v-1.3a1 1 0 0 0-.708-.956a6.1 6.1 0 0 1-2.384-1.399a.99.99 0 0 0-1.188-.141l-1.144.662l-1-1.729l1.124-.651a1 1 0 0 0 .471-1.108"/></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%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%2016c2.206%200%204-1.794%204-4s-1.794-4-4-4s-4%201.794-4%204s1.794%204%204%204m0-6c1.084%200%202%20.916%202%202s-.916%202-2%202s-2-.916-2-2s.916-2%202-2%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m2.845%2016.136l1%201.73c.531.917%201.809%201.261%202.73.73l.529-.306A8%208%200%200%200%209%2019.402V20c0%201.103.897%202%202%202h2c1.103%200%202-.897%202-2v-.598a8%208%200%200%200%201.896-1.111l.529.306c.923.53%202.198.188%202.731-.731l.999-1.729a2%202%200%200%200-.731-2.732l-.505-.292a7.7%207.7%200%200%200%200-2.224l.505-.292a2%202%200%200%200%20.731-2.732l-.999-1.729c-.531-.92-1.808-1.265-2.731-.732l-.529.306A8%208%200%200%200%2015%204.598V4c0-1.103-.897-2-2-2h-2c-1.103%200-2%20.897-2%202v.598a8%208%200%200%200-1.896%201.111l-.529-.306c-.924-.531-2.2-.187-2.731.732l-.999%201.729a2%202%200%200%200%20.731%202.732l.505.292a7.7%207.7%200%200%200%200%202.223l-.505.292a2.003%202.003%200%200%200-.731%202.733m3.326-2.758A5.7%205.7%200%200%201%206%2012c0-.462.058-.926.17-1.378a1%201%200%200%200-.47-1.108l-1.123-.65l.998-1.729l1.145.662a1%201%200%200%200%201.188-.142a6.1%206.1%200%200%201%202.384-1.399A1%201%200%200%200%2011%205.3V4h2v1.3a1%201%200%200%200%20.708.956a6.1%206.1%200%200%201%202.384%201.399a1%201%200%200%200%201.188.142l1.144-.661l1%201.729l-1.124.649a1%201%200%200%200-.47%201.108c.112.452.17.916.17%201.378s-.058.925-.171%201.378a1%201%200%200%200%20.471%201.108l1.123.649l-.998%201.729l-1.145-.661a1%201%200%200%200-1.188.142a6.1%206.1%200%200%201-2.384%201.399A1%201%200%200%200%2013%2018.7l.002%201.3H11v-1.3a1%201%200%200%200-.708-.956a6.1%206.1%200%200%201-2.384-1.399a.99.99%200%200%200-1.188-.141l-1.144.662l-1-1.729l1.124-.651a1%201%200%200%200%20.471-1.108%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M12%2016c2.206%200%204-1.794%204-4s-1.794-4-4-4s-4%201.794-4%204s1.794%204%204%204m0-6c1.084%200%202%20.916%202%202s-.916%202-2%202s-2-.916-2-2s.916-2%202-2%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m2.845%2016.136l1%201.73c.531.917%201.809%201.261%202.73.73l.529-.306A8%208%200%200%200%209%2019.402V20c0%201.103.897%202%202%202h2c1.103%200%202-.897%202-2v-.598a8%208%200%200%200%201.896-1.111l.529.306c.923.53%202.198.188%202.731-.731l.999-1.729a2%202%200%200%200-.731-2.732l-.505-.292a7.7%207.7%200%200%200%200-2.224l.505-.292a2%202%200%200%200%20.731-2.732l-.999-1.729c-.531-.92-1.808-1.265-2.731-.732l-.529.306A8%208%200%200%200%2015%204.598V4c0-1.103-.897-2-2-2h-2c-1.103%200-2%20.897-2%202v.598a8%208%200%200%200-1.896%201.111l-.529-.306c-.924-.531-2.2-.187-2.731.732l-.999%201.729a2%202%200%200%200%20.731%202.732l.505.292a7.7%207.7%200%200%200%200%202.223l-.505.292a2.003%202.003%200%200%200-.731%202.733m3.326-2.758A5.7%205.7%200%200%201%206%2012c0-.462.058-.926.17-1.378a1%201%200%200%200-.47-1.108l-1.123-.65l.998-1.729l1.145.662a1%201%200%200%200%201.188-.142a6.1%206.1%200%200%201%202.384-1.399A1%201%200%200%200%2011%205.3V4h2v1.3a1%201%200%200%200%20.708.956a6.1%206.1%200%200%201%202.384%201.399a1%201%200%200%200%201.188.142l1.144-.661l1%201.729l-1.124.649a1%201%200%200%200-.47%201.108c.112.452.17.916.17%201.378s-.058.925-.171%201.378a1%201%200%200%200%20.471%201.108l1.123.649l-.998%201.729l-1.145-.661a1%201%200%200%200-1.188.142a6.1%206.1%200%200%201-2.384%201.399A1%201%200%200%200%2013%2018.7l.002%201.3H11v-1.3a1%201%200%200%200-.708-.956a6.1%206.1%200%200%201-2.384-1.399a.99.99%200%200%200-1.188-.141l-1.144.662l-1-1.729l1.124-.651a1%201%200%200%200%20.471-1.108%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/bx/cog.svg?color=%231a73e8&size=48
