gears icon

Gears: settings, preferences. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M3.562 1.267C3.768 1.188 4.002 1.271 4.112 1.462L4.72 2.516C4.907 2.495 5.093 2.495 5.28 2.516L5.888 1.462C5.998 1.271 6.232 1.188 6.438 1.267C6.83 1.416 7.189 1.623 7.514 1.888C7.686 2.027 7.73 2.271 7.62 2.462L7.012 3.516C7.123 3.667 7.216 3.828 7.291 4L8.146 4C8.382 4 8.583 4.083 8.75 4.25C8.917 4.417 9 4.618 9 4.854L9 5.146C9 5.382 8.917 5.583 8.75 5.75C8.583 5.917 8.382 6 8.146 6L7.291 6C7.216 6.172 7.123 6.333 7.012 6.484L7.62 7.538C7.73 7.729 7.686 7.973 7.514 8.112C7.189 8.377 6.83 8.584 6.438 8.733C6.232 8.812 5.998 8.729 5.888 8.538L5.28 7.484C5.093 7.505 4.907 7.505 4.72 7.484L4.112 8.538C4.002 8.729 3.768 8.812 3.562 8.733C3.17 8.584 2.811 8.377 2.486 8.112C2.314 7.973 2.27 7.729 2.38 7.538L2.988 6.484C2.877 6.333 2.784 6.172 2.709 6L1.854 6C1.618 6 1.417 5.917 1.25 5.75C1.083 5.583 1 5.382 1 5.146L1 4.854C1 4.618 1.083 4.417 1.25 4.25C1.417 4.083 1.618 4 1.854 4L2.709 4C2.784 3.828 2.877 3.667 2.988 3.516L2.38 2.462C2.27 2.271 2.314 2.027 2.486 1.888C2.811 1.623 3.17 1.416 3.562 1.267ZM3.5 5C3.5 5.828 4.172 6.5 5 6.5C5.828 6.5 6.5 5.828 6.5 5C6.5 4.172 5.828 3.5 5 3.5C4.172 3.5 3.5 4.172 3.5 5ZM6.918 10.155C6.937 10.148 6.955 10.141 6.974 10.134C7.515 9.928 8.01 9.642 8.46 9.276C8.475 9.264 8.49 9.251 8.505 9.239C8.626 9.139 8.742 9.034 8.853 8.924C9.236 8.549 9.389 7.997 9.255 7.478C9.974 7.354 10.5 6.73 10.5 6L11 6C11.276 6 11.512 6.098 11.707 6.293C11.902 6.488 12 6.724 12 7L12 8L13.131 7.269C13.309 7.154 13.544 7.179 13.694 7.33C13.967 7.605 14.202 7.911 14.397 8.25C14.596 8.594 14.746 8.957 14.847 9.338C14.9 9.534 14.814 9.741 14.638 9.843L14.212 10.089C14.139 10.131 14.081 10.189 14.038 10.263C13.996 10.336 13.975 10.415 13.975 10.5C13.975 10.585 13.996 10.664 14.038 10.737C14.081 10.811 14.139 10.869 14.212 10.911L14.638 11.157C14.814 11.259 14.9 11.466 14.847 11.662C14.746 12.043 14.596 12.406 14.397 12.75C14.202 13.089 13.967 13.395 13.694 13.67C13.544 13.821 13.309 13.846 13.131 13.731L12 13L12 14C12 14.276 11.902 14.512 11.707 14.707C11.512 14.902 11.276 15 11 15L10 15C9.724 15 9.488 14.902 9.293 14.707C9.098 14.512 9 14.276 9 14L9 13L7.869 13.731C7.691 13.846 7.456 13.821 7.306 13.67C7.033 13.395 6.798 13.089 6.603 12.75C6.404 12.406 6.254 12.043 6.153 11.662C6.1 11.466 6.186 11.259 6.362 11.157L6.788 10.911C6.861 10.869 6.919 10.811 6.962 10.737C7.004 10.664 7.025 10.585 7.025 10.5C7.025 10.415 7.004 10.336 6.962 10.263C6.941 10.227 6.916 10.194 6.888 10.166C6.898 10.162 6.908 10.158 6.918 10.155ZM10.5 12C11.328 12 12 11.328 12 10.5C12 9.672 11.328 9 10.5 9C9.672 9 9 9.672 9 10.5C9 11.328 9.672 12 10.5 12Z"/></svg>

React

// Gentleface "gears" (line-round), MIT. https://gentleface.com/icons/gears
import type { SVGProps } from 'react';

export function GearsIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M3.562 1.267C3.768 1.188 4.002 1.271 4.112 1.462L4.72 2.516C4.907 2.495 5.093 2.495 5.28 2.516L5.888 1.462C5.998 1.271 6.232 1.188 6.438 1.267C6.83 1.416 7.189 1.623 7.514 1.888C7.686 2.027 7.73 2.271 7.62 2.462L7.012 3.516C7.123 3.667 7.216 3.828 7.291 4L8.146 4C8.382 4 8.583 4.083 8.75 4.25C8.917 4.417 9 4.618 9 4.854L9 5.146C9 5.382 8.917 5.583 8.75 5.75C8.583 5.917 8.382 6 8.146 6L7.291 6C7.216 6.172 7.123 6.333 7.012 6.484L7.62 7.538C7.73 7.729 7.686 7.973 7.514 8.112C7.189 8.377 6.83 8.584 6.438 8.733C6.232 8.812 5.998 8.729 5.888 8.538L5.28 7.484C5.093 7.505 4.907 7.505 4.72 7.484L4.112 8.538C4.002 8.729 3.768 8.812 3.562 8.733C3.17 8.584 2.811 8.377 2.486 8.112C2.314 7.973 2.27 7.729 2.38 7.538L2.988 6.484C2.877 6.333 2.784 6.172 2.709 6L1.854 6C1.618 6 1.417 5.917 1.25 5.75C1.083 5.583 1 5.382 1 5.146L1 4.854C1 4.618 1.083 4.417 1.25 4.25C1.417 4.083 1.618 4 1.854 4L2.709 4C2.784 3.828 2.877 3.667 2.988 3.516L2.38 2.462C2.27 2.271 2.314 2.027 2.486 1.888C2.811 1.623 3.17 1.416 3.562 1.267ZM3.5 5C3.5 5.828 4.172 6.5 5 6.5C5.828 6.5 6.5 5.828 6.5 5C6.5 4.172 5.828 3.5 5 3.5C4.172 3.5 3.5 4.172 3.5 5ZM6.918 10.155C6.937 10.148 6.955 10.141 6.974 10.134C7.515 9.928 8.01 9.642 8.46 9.276C8.475 9.264 8.49 9.251 8.505 9.239C8.626 9.139 8.742 9.034 8.853 8.924C9.236 8.549 9.389 7.997 9.255 7.478C9.974 7.354 10.5 6.73 10.5 6L11 6C11.276 6 11.512 6.098 11.707 6.293C11.902 6.488 12 6.724 12 7L12 8L13.131 7.269C13.309 7.154 13.544 7.179 13.694 7.33C13.967 7.605 14.202 7.911 14.397 8.25C14.596 8.594 14.746 8.957 14.847 9.338C14.9 9.534 14.814 9.741 14.638 9.843L14.212 10.089C14.139 10.131 14.081 10.189 14.038 10.263C13.996 10.336 13.975 10.415 13.975 10.5C13.975 10.585 13.996 10.664 14.038 10.737C14.081 10.811 14.139 10.869 14.212 10.911L14.638 11.157C14.814 11.259 14.9 11.466 14.847 11.662C14.746 12.043 14.596 12.406 14.397 12.75C14.202 13.089 13.967 13.395 13.694 13.67C13.544 13.821 13.309 13.846 13.131 13.731L12 13L12 14C12 14.276 11.902 14.512 11.707 14.707C11.512 14.902 11.276 15 11 15L10 15C9.724 15 9.488 14.902 9.293 14.707C9.098 14.512 9 14.276 9 14L9 13L7.869 13.731C7.691 13.846 7.456 13.821 7.306 13.67C7.033 13.395 6.798 13.089 6.603 12.75C6.404 12.406 6.254 12.043 6.153 11.662C6.1 11.466 6.186 11.259 6.362 11.157L6.788 10.911C6.861 10.869 6.919 10.811 6.962 10.737C7.004 10.664 7.025 10.585 7.025 10.5C7.025 10.415 7.004 10.336 6.962 10.263C6.941 10.227 6.916 10.194 6.888 10.166C6.898 10.162 6.908 10.158 6.918 10.155ZM10.5 12C11.328 12 12 11.328 12 10.5C12 9.672 11.328 9 10.5 9C9.672 9 9 9.672 9 10.5C9 11.328 9.672 12 10.5 12Z" />
    </svg>
  );
}

Vue

Vue: see /icons/gears.md

Svelte

Svelte: see /icons/gears.md

HTML img

HTML img: see /icons/gears.md

CSS

CSS: see /icons/gears.md

Data URL

Data URL: see /icons/gears.md

Sprite

Sprite: see /icons/gears.md

SwiftUI

SwiftUI: see /icons/gears.md

Compose

Compose: see /icons/gears.md

Android XML

Android XML: see /icons/gears.md

Flutter

Flutter: see /icons/gears.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

settings, preferences

Built from

variant of settings

Tags

gears, cogs, cogwheels, gear, cog, settings, preferences, options, configuration, machinery, mechanism, engineering, system, setup

Category

Actions

Component name

GearsIcon

History

2026-10-19 added

Family 6

settings settings-alert settings-arrow-down settings-arrow-up settings-lock settings-sync

More actions icons

arrow-down-a-z ban bolt bolt-off check check-double clipboard clipboard-alert clipboard-check clipboard-clock clipboard-list clipboard-off clipboard-pencil clipboard-plus clipboard-search clipboard-user · all actions icons

For agents

Metadata: /icons/gears.json · Markdown: /icons/gears.md · SVG: https://gentleface.com/svg/{style}/16/gears.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/gears.png

gears icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp