gear icon
gear from Akar Icons by Arturo Wibawa · Outline · MIT Free for personal and commercial use.
- Name
- gear
- Set
- Akar Icons
- Style
- Outline
- Viewbox
- 24×24
- License
- MIT
The same icon in other sets
Use the gear 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-width="2"><path d="M14 3.269C14 2.568 13.432 2 12.731 2H11.27C10.568 2 10 2.568 10 3.269c0 .578-.396 1.074-.935 1.286q-.128.052-.253.106c-.531.23-1.162.16-1.572-.249a1.27 1.27 0 0 0-1.794 0L4.412 5.446a1.27 1.27 0 0 0 0 1.794c.41.41.48 1.04.248 1.572a8 8 0 0 0-.105.253c-.212.539-.708.935-1.286.935C2.568 10 2 10.568 2 11.269v1.462C2 13.432 2.568 14 3.269 14c.578 0 1.074.396 1.286.935q.052.128.105.253c.231.531.161 1.162-.248 1.572a1.27 1.27 0 0 0 0 1.794l1.034 1.034a1.27 1.27 0 0 0 1.794 0c.41-.41 1.04-.48 1.572-.249q.125.055.253.106c.539.212.935.708.935 1.286c0 .701.568 1.269 1.269 1.269h1.462c.701 0 1.269-.568 1.269-1.269c0-.578.396-1.074.935-1.287q.128-.05.253-.104c.531-.232 1.162-.161 1.571.248a1.27 1.27 0 0 0 1.795 0l1.034-1.034a1.27 1.27 0 0 0 0-1.794c-.41-.41-.48-1.04-.249-1.572q.055-.125.106-.253c.212-.539.708-.935 1.286-.935c.701 0 1.269-.568 1.269-1.269V11.27c0-.701-.568-1.269-1.269-1.269c-.578 0-1.074-.396-1.287-.935a8 8 0 0 0-.105-.253c-.23-.531-.16-1.162.249-1.572a1.27 1.27 0 0 0 0-1.794l-1.034-1.034a1.27 1.27 0 0 0-1.794 0c-.41.41-1.04.48-1.572.249a8 8 0 0 0-.253-.106C14.396 4.343 14 3.847 14 3.27Z"/><path d="M16 12a4 4 0 1 1-8 0a4 4 0 0 1 8 0Z"/></g></svg>
React
import type { SVGProps } from "react";
export function AkarIconsGear(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" strokeWidth="2"><path d="M14 3.269C14 2.568 13.432 2 12.731 2H11.27C10.568 2 10 2.568 10 3.269c0 .578-.396 1.074-.935 1.286q-.128.052-.253.106c-.531.23-1.162.16-1.572-.249a1.27 1.27 0 0 0-1.794 0L4.412 5.446a1.27 1.27 0 0 0 0 1.794c.41.41.48 1.04.248 1.572a8 8 0 0 0-.105.253c-.212.539-.708.935-1.286.935C2.568 10 2 10.568 2 11.269v1.462C2 13.432 2.568 14 3.269 14c.578 0 1.074.396 1.286.935q.052.128.105.253c.231.531.161 1.162-.248 1.572a1.27 1.27 0 0 0 0 1.794l1.034 1.034a1.27 1.27 0 0 0 1.794 0c.41-.41 1.04-.48 1.572-.249q.125.055.253.106c.539.212.935.708.935 1.286c0 .701.568 1.269 1.269 1.269h1.462c.701 0 1.269-.568 1.269-1.269c0-.578.396-1.074.935-1.287q.128-.05.253-.104c.531-.232 1.162-.161 1.571.248a1.27 1.27 0 0 0 1.795 0l1.034-1.034a1.27 1.27 0 0 0 0-1.794c-.41-.41-.48-1.04-.249-1.572q.055-.125.106-.253c.212-.539.708-.935 1.286-.935c.701 0 1.269-.568 1.269-1.269V11.27c0-.701-.568-1.269-1.269-1.269c-.578 0-1.074-.396-1.287-.935a8 8 0 0 0-.105-.253c-.23-.531-.16-1.162.249-1.572a1.27 1.27 0 0 0 0-1.794l-1.034-1.034a1.27 1.27 0 0 0-1.794 0c-.41.41-1.04.48-1.572.249a8 8 0 0 0-.253-.106C14.396 4.343 14 3.847 14 3.27Z"/><path d="M16 12a4 4 0 1 1-8 0a4 4 0 0 1 8 0Z"/></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-width="2"><path d="M14 3.269C14 2.568 13.432 2 12.731 2H11.27C10.568 2 10 2.568 10 3.269c0 .578-.396 1.074-.935 1.286q-.128.052-.253.106c-.531.23-1.162.16-1.572-.249a1.27 1.27 0 0 0-1.794 0L4.412 5.446a1.27 1.27 0 0 0 0 1.794c.41.41.48 1.04.248 1.572a8 8 0 0 0-.105.253c-.212.539-.708.935-1.286.935C2.568 10 2 10.568 2 11.269v1.462C2 13.432 2.568 14 3.269 14c.578 0 1.074.396 1.286.935q.052.128.105.253c.231.531.161 1.162-.248 1.572a1.27 1.27 0 0 0 0 1.794l1.034 1.034a1.27 1.27 0 0 0 1.794 0c.41-.41 1.04-.48 1.572-.249q.125.055.253.106c.539.212.935.708.935 1.286c0 .701.568 1.269 1.269 1.269h1.462c.701 0 1.269-.568 1.269-1.269c0-.578.396-1.074.935-1.287q.128-.05.253-.104c.531-.232 1.162-.161 1.571.248a1.27 1.27 0 0 0 1.795 0l1.034-1.034a1.27 1.27 0 0 0 0-1.794c-.41-.41-.48-1.04-.249-1.572q.055-.125.106-.253c.212-.539.708-.935 1.286-.935c.701 0 1.269-.568 1.269-1.269V11.27c0-.701-.568-1.269-1.269-1.269c-.578 0-1.074-.396-1.287-.935a8 8 0 0 0-.105-.253c-.23-.531-.16-1.162.249-1.572a1.27 1.27 0 0 0 0-1.794l-1.034-1.034a1.27 1.27 0 0 0-1.794 0c-.41.41-1.04.48-1.572.249a8 8 0 0 0-.253-.106C14.396 4.343 14 3.847 14 3.27Z"/><path d="M16 12a4 4 0 1 1-8 0a4 4 0 0 1 8 0Z"/></g></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%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M14%203.269C14%202.568%2013.432%202%2012.731%202H11.27C10.568%202%2010%202.568%2010%203.269c0%20.578-.396%201.074-.935%201.286q-.128.052-.253.106c-.531.23-1.162.16-1.572-.249a1.27%201.27%200%200%200-1.794%200L4.412%205.446a1.27%201.27%200%200%200%200%201.794c.41.41.48%201.04.248%201.572a8%208%200%200%200-.105.253c-.212.539-.708.935-1.286.935C2.568%2010%202%2010.568%202%2011.269v1.462C2%2013.432%202.568%2014%203.269%2014c.578%200%201.074.396%201.286.935q.052.128.105.253c.231.531.161%201.162-.248%201.572a1.27%201.27%200%200%200%200%201.794l1.034%201.034a1.27%201.27%200%200%200%201.794%200c.41-.41%201.04-.48%201.572-.249q.125.055.253.106c.539.212.935.708.935%201.286c0%20.701.568%201.269%201.269%201.269h1.462c.701%200%201.269-.568%201.269-1.269c0-.578.396-1.074.935-1.287q.128-.05.253-.104c.531-.232%201.162-.161%201.571.248a1.27%201.27%200%200%200%201.795%200l1.034-1.034a1.27%201.27%200%200%200%200-1.794c-.41-.41-.48-1.04-.249-1.572q.055-.125.106-.253c.212-.539.708-.935%201.286-.935c.701%200%201.269-.568%201.269-1.269V11.27c0-.701-.568-1.269-1.269-1.269c-.578%200-1.074-.396-1.287-.935a8%208%200%200%200-.105-.253c-.23-.531-.16-1.162.249-1.572a1.27%201.27%200%200%200%200-1.794l-1.034-1.034a1.27%201.27%200%200%200-1.794%200c-.41.41-1.04.48-1.572.249a8%208%200%200%200-.253-.106C14.396%204.343%2014%203.847%2014%203.27Z%22%2F%3E%3Cpath%20d%3D%22M16%2012a4%204%200%201%201-8%200a4%204%200%200%201%208%200Z%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-width%3D%222%22%3E%3Cpath%20d%3D%22M14%203.269C14%202.568%2013.432%202%2012.731%202H11.27C10.568%202%2010%202.568%2010%203.269c0%20.578-.396%201.074-.935%201.286q-.128.052-.253.106c-.531.23-1.162.16-1.572-.249a1.27%201.27%200%200%200-1.794%200L4.412%205.446a1.27%201.27%200%200%200%200%201.794c.41.41.48%201.04.248%201.572a8%208%200%200%200-.105.253c-.212.539-.708.935-1.286.935C2.568%2010%202%2010.568%202%2011.269v1.462C2%2013.432%202.568%2014%203.269%2014c.578%200%201.074.396%201.286.935q.052.128.105.253c.231.531.161%201.162-.248%201.572a1.27%201.27%200%200%200%200%201.794l1.034%201.034a1.27%201.27%200%200%200%201.794%200c.41-.41%201.04-.48%201.572-.249q.125.055.253.106c.539.212.935.708.935%201.286c0%20.701.568%201.269%201.269%201.269h1.462c.701%200%201.269-.568%201.269-1.269c0-.578.396-1.074.935-1.287q.128-.05.253-.104c.531-.232%201.162-.161%201.571.248a1.27%201.27%200%200%200%201.795%200l1.034-1.034a1.27%201.27%200%200%200%200-1.794c-.41-.41-.48-1.04-.249-1.572q.055-.125.106-.253c.212-.539.708-.935%201.286-.935c.701%200%201.269-.568%201.269-1.269V11.27c0-.701-.568-1.269-1.269-1.269c-.578%200-1.074-.396-1.287-.935a8%208%200%200%200-.105-.253c-.23-.531-.16-1.162.249-1.572a1.27%201.27%200%200%200%200-1.794l-1.034-1.034a1.27%201.27%200%200%200-1.794%200c-.41.41-1.04.48-1.572.249a8%208%200%200%200-.253-.106C14.396%204.343%2014%203.847%2014%203.27Z%22%2F%3E%3Cpath%20d%3D%22M16%2012a4%204%200%201%201-8%200a4%204%200%200%201%208%200Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/akar-icons/gear.svg?color=%231a73e8&size=48
