Cogs icon

el:cogs

The Cogs icon (el:cogs) is a free SVG icon from the Elusive Icons set by Team Redux. It is drawn on a 1200 × 1200 grid. Elusive Icons are released under the Open Font License, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.

Icon set: Elusive Icons
Author: Team Redux
License: OFL-1.1
Size: 1200 × 1200
Tags: cog

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" viewBox="0 0 1200 1200"><path fill="currentColor" d="m910.143 91.119l-16.916 81.053a196.3 196.3 0 0 0-49.691 14.743l-58.229-58.825l-66.309 53.661l45.354 69.303c-10.104 13.862-18.357 29.104-24.623 45.503l-82.85-.374l-8.906 84.87l81.055 16.914c2.723 17.329 7.746 33.897 14.742 49.545l-58.824 58.376l53.66 66.31l69.303-45.43a196 196 0 0 0 45.504 24.698l-.375 82.774l84.871 8.904l16.838-81.053c17.346-2.722 34.035-7.666 49.695-14.669l58.301 58.825l66.309-53.735l-45.428-69.229a195.8 195.8 0 0 0 24.697-45.503l82.773.3l8.906-84.87l-81.053-16.765c-2.725-17.354-7.66-34.103-14.67-49.77l58.824-58.227l-53.734-66.309l-69.229 45.354c-13.869-10.111-29.17-18.428-45.578-24.697l.373-82.774zm14.068 197.131c2.668.009 5.373.09 8.084.374c43.355 4.555 74.756 43.384 70.201 86.741c-4.555 43.355-43.385 74.83-86.742 70.274c-43.355-4.555-74.83-43.384-70.275-86.739c4.269-40.647 38.724-70.789 78.732-70.65m-608.981 6.96l-11.375 112.711c-23.205 6.187-45.185 15.324-65.486 27.092l-87.714-71.696l-82.55 82.55l71.698 87.788c-11.768 20.308-20.91 42.272-27.092 65.484L0 610.44v116.751l112.71 11.376a268 268 0 0 0 27.092 65.41l-71.698 87.789l82.55 82.55l87.789-71.697a268 268 0 0 0 65.411 27.093l11.375 112.71h116.752l11.301-112.71c23.212-6.183 45.178-15.325 65.484-27.093l87.788 71.697l82.55-82.55l-71.697-87.714c11.768-20.302 20.906-42.281 27.092-65.485l112.711-11.376V610.44L634.5 599.138c-6.186-23.225-15.314-45.243-27.092-65.561l71.697-87.714l-82.55-82.549l-87.713 71.696c-20.316-11.775-42.336-20.905-65.562-27.093l-11.301-112.71H315.23zm58.376 265.61c59.649 0 107.996 48.348 107.996 107.996S433.255 776.81 373.606 776.81S265.61 728.463 265.61 668.816c0-59.648 48.348-107.996 107.996-107.996m495.673 144.219l-11.9 59.273c-12.188 1.993-23.873 5.653-34.877 10.776l-41.012-43.033l-46.553 39.292l31.883 50.667c-7.102 10.143-12.959 21.308-17.363 33.306l-58.15-.301l-6.287 62.118l56.955 12.35a147.7 147.7 0 0 0 10.328 36.298l-41.312 42.659l37.721 48.497l48.721-33.229a136 136 0 0 0 31.957 18.037l-.225 60.621l59.648 6.511l11.824-59.349c12.189-1.991 23.869-5.579 34.875-10.702l41.014 43.033l46.625-39.291l-31.957-50.668c7.104-10.139 12.959-21.312 17.363-33.306l58.229.226l6.211-62.043l-56.953-12.35c-1.914-12.695-5.402-24.911-10.328-36.372l41.311-42.585l-37.719-48.572l-48.646 33.229c-9.746-7.396-20.498-13.449-32.031-18.036l.299-60.546zm9.879 144.144c1.873.009 3.783.092 5.688.301c30.473 3.331 52.521 31.745 49.32 63.465c-3.201 31.719-30.449 54.748-60.922 51.416s-52.596-31.746-49.395-63.466c3.001-29.738 27.19-51.818 55.309-51.716"/></svg>

How to use the Cogs icon

React

import { Icon } from "@iconify/react";

<Icon icon="el:cogs" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="el:cogs" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="el:cogs" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[el--cogs]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/el -->
<div class="i-el:cogs"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="el:cogs"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/el/cogs.svg" alt="Cogs icon" width="24" height="24">

Cogs icon in other icon sets

Cogs icon FAQ

Is the Cogs icon free for commercial use?

Yes. Elusive Icons are released under the Open Font License, which allows use in personal and commercial projects.

How do I use the Cogs icon in React?

Install @iconify/react and render <Icon icon="el:cogs" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Cogs icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/el/cogs.svg" alt="Cogs icon">, or paste the SVG code inline to style it with CSS.

Browse all Elusive Icons →