settings icon

Settings: settings, preferences, configuration, config. 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="M10.536 3.875L11.723 3.084C11.834 3.009 11.955 2.983 12.083 3.004C12.211 3.026 12.316 3.09 12.398 3.197C12.896 3.851 13.257 4.573 13.481 5.364C13.511 5.469 13.507 5.573 13.47 5.673C13.433 5.774 13.369 5.855 13.277 5.916L12.061 6.727C12.152 7.242 12.152 7.758 12.061 8.273L13.277 9.084C13.369 9.145 13.433 9.226 13.47 9.327C13.507 9.427 13.511 9.531 13.481 9.636C13.257 10.427 12.896 11.149 12.398 11.803C12.316 11.91 12.211 11.974 12.083 11.996C11.955 12.017 11.834 11.991 11.723 11.916L10.536 11.125C10.075 11.485 9.563 11.743 9 11.898L9 13C9 13.276 8.902 13.512 8.707 13.707C8.512 13.902 8.276 14 8 14L7 14C6.724 14 6.488 13.902 6.293 13.707C6.098 13.512 6 13.276 6 13L6 11.898C5.437 11.743 4.925 11.485 4.464 11.125L3.277 11.916C3.166 11.991 3.045 12.017 2.917 11.996C2.789 11.974 2.684 11.91 2.602 11.803C2.104 11.149 1.743 10.427 1.519 9.636C1.489 9.531 1.493 9.427 1.53 9.327C1.567 9.226 1.631 9.145 1.723 9.084L2.939 8.273C2.848 7.758 2.848 7.242 2.939 6.727L1.723 5.916C1.631 5.855 1.567 5.774 1.53 5.673C1.493 5.573 1.489 5.469 1.519 5.364C1.743 4.573 2.104 3.851 2.602 3.197C2.684 3.09 2.789 3.026 2.917 3.004C3.045 2.983 3.166 3.009 3.277 3.084L4.464 3.875C4.925 3.515 5.437 3.257 6 3.102L6 2C6 1.724 6.098 1.488 6.293 1.293C6.488 1.098 6.724 1 7 1L8 1C8.276 1 8.512 1.098 8.707 1.293C8.902 1.488 9 1.724 9 2L9 3.102C9.563 3.257 10.075 3.515 10.536 3.875ZM6.885 3.821C6.809 3.913 6.71 3.97 6.59 3.992C5.921 4.114 5.338 4.405 4.84 4.867C4.754 4.946 4.654 4.991 4.54 5C4.426 5.009 4.32 4.981 4.223 4.916L3.13 4.187C2.908 4.535 2.728 4.903 2.59 5.293L3.777 6.084C3.867 6.144 3.93 6.223 3.968 6.321C4.006 6.42 4.011 6.521 3.984 6.625C3.834 7.208 3.834 7.792 3.984 8.375C4.011 8.479 4.006 8.58 3.968 8.679C3.93 8.777 3.867 8.856 3.777 8.916L2.59 9.707C2.728 10.097 2.908 10.465 3.13 10.813L4.223 10.084C4.32 10.019 4.426 9.991 4.54 10C4.654 10.009 4.754 10.054 4.84 10.133C5.338 10.595 5.921 10.886 6.59 11.008C6.71 11.03 6.809 11.087 6.885 11.179C6.962 11.27 7 11.377 7 11.5L7 13L8 13L8 11.5C8 11.377 8.038 11.27 8.115 11.179C8.191 11.087 8.29 11.03 8.41 11.008C9.079 10.886 9.662 10.595 10.16 10.133C10.246 10.054 10.346 10.009 10.46 10C10.574 9.991 10.68 10.019 10.777 10.084L11.87 10.813C12.092 10.465 12.272 10.097 12.41 9.707L11.223 8.916C11.133 8.856 11.07 8.777 11.032 8.679C10.994 8.58 10.989 8.479 11.016 8.375C11.166 7.792 11.166 7.208 11.016 6.625C10.989 6.521 10.994 6.42 11.032 6.321C11.07 6.223 11.133 6.144 11.223 6.084L12.41 5.293C12.272 4.903 12.092 4.535 11.87 4.187L10.777 4.916C10.68 4.981 10.574 5.009 10.46 5C10.346 4.991 10.246 4.946 10.16 4.867C9.662 4.405 9.079 4.114 8.41 3.992C8.29 3.97 8.191 3.913 8.115 3.821C8.038 3.73 8 3.623 8 3.5L8 2L7 2L7 3.5C7 3.623 6.962 3.73 6.885 3.821ZM5.176 6.58C5.303 6.259 5.488 5.976 5.732 5.732C5.976 5.488 6.259 5.303 6.58 5.176C6.875 5.059 7.182 5 7.5 5C7.818 5 8.125 5.059 8.42 5.176C8.741 5.303 9.024 5.488 9.268 5.732C9.512 5.976 9.697 6.259 9.824 6.58C9.941 6.875 10 7.182 10 7.5C10 7.818 9.941 8.125 9.824 8.42C9.697 8.741 9.512 9.024 9.268 9.268C9.024 9.512 8.741 9.697 8.42 9.824C8.125 9.941 7.818 10 7.5 10C7.182 10 6.875 9.941 6.58 9.824C6.259 9.697 5.976 9.512 5.732 9.268C5.488 9.024 5.303 8.741 5.176 8.42C5.059 8.125 5 7.818 5 7.5C5 7.182 5.059 6.875 5.176 6.58ZM6.105 8.052C6.182 8.245 6.293 8.414 6.439 8.561C6.586 8.707 6.755 8.818 6.948 8.895C7.125 8.965 7.309 9 7.5 9C7.691 9 7.875 8.965 8.052 8.895C8.245 8.818 8.414 8.707 8.561 8.561C8.707 8.414 8.818 8.245 8.895 8.052C8.965 7.875 9 7.691 9 7.5C9 7.309 8.965 7.125 8.895 6.948C8.818 6.755 8.707 6.586 8.561 6.439C8.414 6.293 8.245 6.182 8.052 6.105C7.875 6.035 7.691 6 7.5 6C7.309 6 7.125 6.035 6.948 6.105C6.755 6.182 6.586 6.293 6.439 6.439C6.293 6.586 6.182 6.755 6.105 6.948C6.035 7.125 6 7.309 6 7.5C6 7.691 6.035 7.875 6.105 8.052Z"/></svg>

React

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

export function SettingsIcon(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="M10.536 3.875L11.723 3.084C11.834 3.009 11.955 2.983 12.083 3.004C12.211 3.026 12.316 3.09 12.398 3.197C12.896 3.851 13.257 4.573 13.481 5.364C13.511 5.469 13.507 5.573 13.47 5.673C13.433 5.774 13.369 5.855 13.277 5.916L12.061 6.727C12.152 7.242 12.152 7.758 12.061 8.273L13.277 9.084C13.369 9.145 13.433 9.226 13.47 9.327C13.507 9.427 13.511 9.531 13.481 9.636C13.257 10.427 12.896 11.149 12.398 11.803C12.316 11.91 12.211 11.974 12.083 11.996C11.955 12.017 11.834 11.991 11.723 11.916L10.536 11.125C10.075 11.485 9.563 11.743 9 11.898L9 13C9 13.276 8.902 13.512 8.707 13.707C8.512 13.902 8.276 14 8 14L7 14C6.724 14 6.488 13.902 6.293 13.707C6.098 13.512 6 13.276 6 13L6 11.898C5.437 11.743 4.925 11.485 4.464 11.125L3.277 11.916C3.166 11.991 3.045 12.017 2.917 11.996C2.789 11.974 2.684 11.91 2.602 11.803C2.104 11.149 1.743 10.427 1.519 9.636C1.489 9.531 1.493 9.427 1.53 9.327C1.567 9.226 1.631 9.145 1.723 9.084L2.939 8.273C2.848 7.758 2.848 7.242 2.939 6.727L1.723 5.916C1.631 5.855 1.567 5.774 1.53 5.673C1.493 5.573 1.489 5.469 1.519 5.364C1.743 4.573 2.104 3.851 2.602 3.197C2.684 3.09 2.789 3.026 2.917 3.004C3.045 2.983 3.166 3.009 3.277 3.084L4.464 3.875C4.925 3.515 5.437 3.257 6 3.102L6 2C6 1.724 6.098 1.488 6.293 1.293C6.488 1.098 6.724 1 7 1L8 1C8.276 1 8.512 1.098 8.707 1.293C8.902 1.488 9 1.724 9 2L9 3.102C9.563 3.257 10.075 3.515 10.536 3.875ZM6.885 3.821C6.809 3.913 6.71 3.97 6.59 3.992C5.921 4.114 5.338 4.405 4.84 4.867C4.754 4.946 4.654 4.991 4.54 5C4.426 5.009 4.32 4.981 4.223 4.916L3.13 4.187C2.908 4.535 2.728 4.903 2.59 5.293L3.777 6.084C3.867 6.144 3.93 6.223 3.968 6.321C4.006 6.42 4.011 6.521 3.984 6.625C3.834 7.208 3.834 7.792 3.984 8.375C4.011 8.479 4.006 8.58 3.968 8.679C3.93 8.777 3.867 8.856 3.777 8.916L2.59 9.707C2.728 10.097 2.908 10.465 3.13 10.813L4.223 10.084C4.32 10.019 4.426 9.991 4.54 10C4.654 10.009 4.754 10.054 4.84 10.133C5.338 10.595 5.921 10.886 6.59 11.008C6.71 11.03 6.809 11.087 6.885 11.179C6.962 11.27 7 11.377 7 11.5L7 13L8 13L8 11.5C8 11.377 8.038 11.27 8.115 11.179C8.191 11.087 8.29 11.03 8.41 11.008C9.079 10.886 9.662 10.595 10.16 10.133C10.246 10.054 10.346 10.009 10.46 10C10.574 9.991 10.68 10.019 10.777 10.084L11.87 10.813C12.092 10.465 12.272 10.097 12.41 9.707L11.223 8.916C11.133 8.856 11.07 8.777 11.032 8.679C10.994 8.58 10.989 8.479 11.016 8.375C11.166 7.792 11.166 7.208 11.016 6.625C10.989 6.521 10.994 6.42 11.032 6.321C11.07 6.223 11.133 6.144 11.223 6.084L12.41 5.293C12.272 4.903 12.092 4.535 11.87 4.187L10.777 4.916C10.68 4.981 10.574 5.009 10.46 5C10.346 4.991 10.246 4.946 10.16 4.867C9.662 4.405 9.079 4.114 8.41 3.992C8.29 3.97 8.191 3.913 8.115 3.821C8.038 3.73 8 3.623 8 3.5L8 2L7 2L7 3.5C7 3.623 6.962 3.73 6.885 3.821ZM5.176 6.58C5.303 6.259 5.488 5.976 5.732 5.732C5.976 5.488 6.259 5.303 6.58 5.176C6.875 5.059 7.182 5 7.5 5C7.818 5 8.125 5.059 8.42 5.176C8.741 5.303 9.024 5.488 9.268 5.732C9.512 5.976 9.697 6.259 9.824 6.58C9.941 6.875 10 7.182 10 7.5C10 7.818 9.941 8.125 9.824 8.42C9.697 8.741 9.512 9.024 9.268 9.268C9.024 9.512 8.741 9.697 8.42 9.824C8.125 9.941 7.818 10 7.5 10C7.182 10 6.875 9.941 6.58 9.824C6.259 9.697 5.976 9.512 5.732 9.268C5.488 9.024 5.303 8.741 5.176 8.42C5.059 8.125 5 7.818 5 7.5C5 7.182 5.059 6.875 5.176 6.58ZM6.105 8.052C6.182 8.245 6.293 8.414 6.439 8.561C6.586 8.707 6.755 8.818 6.948 8.895C7.125 8.965 7.309 9 7.5 9C7.691 9 7.875 8.965 8.052 8.895C8.245 8.818 8.414 8.707 8.561 8.561C8.707 8.414 8.818 8.245 8.895 8.052C8.965 7.875 9 7.691 9 7.5C9 7.309 8.965 7.125 8.895 6.948C8.818 6.755 8.707 6.586 8.561 6.439C8.414 6.293 8.245 6.182 8.052 6.105C7.875 6.035 7.691 6 7.5 6C7.309 6 7.125 6.035 6.948 6.105C6.755 6.182 6.586 6.293 6.439 6.439C6.293 6.586 6.182 6.755 6.105 6.948C6.035 7.125 6 7.309 6 7.5C6 7.691 6.035 7.875 6.105 8.052Z" />
    </svg>
  );
}

Vue

Vue: see /icons/settings.md

Svelte

Svelte: see /icons/settings.md

HTML img

HTML img: see /icons/settings.md

CSS

CSS: see /icons/settings.md

Data URL

Data URL: see /icons/settings.md

Sprite

Sprite: see /icons/settings.md

SwiftUI

SwiftUI: see /icons/settings.md

Compose

Compose: see /icons/settings.md

Android XML

Android XML: see /icons/settings.md

Flutter

Flutter: see /icons/settings.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, configuration, config

Don’t confuse with

sliders: sliders mean adjust or tune, not settings
wrench: a wrench means maintenance or repair

Also fits

account settings: app settings in general

Not for

adjust (use sliders): the gear means settings, not adjust
tools (use tools): the gear means settings or preferences
maintenance (use wrench): the gear means settings, not maintenance

Tags

gear, cog, settings, preferences, options, configuration

Category

Actions

Component name

SettingsIcon

History

2026-10-14 added

Family 5

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/settings.json · Markdown: /icons/settings.md · SVG: https://gentleface.com/svg/{style}/16/settings.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/settings.png

settings icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp