A cog, for preferences, options and configuration screens. On a 24×24 grid in stroke, duotone and fill, free under MIT.
Webv0.1.0Added Updated
16
20
24 px
32
24px
2px
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M13.5 4.8845C13.5 5.3482 13.8221 5.7434 14.2571 5.9041C14.4124 5.9615 14.5649 6.0247 14.7143 6.0933C15.1356 6.2869 15.6427 6.2353 15.9706 5.9076L16.5966 5.2819C16.9872 4.8916 17.6202 4.8917 18.0106 5.2821L18.7175 5.989C19.1081 6.3796 19.108 7.0129 18.7173 7.4034L18.0922 8.0283C17.7641 8.3562 17.7124 8.8636 17.9062 9.2851C17.975 9.4347 18.0383 9.5874 18.0958 9.7429C18.2566 10.1779 18.6518 10.5 19.1155 10.5L20 10.5C20.5523 10.5 21 10.9477 21 11.5L21 12.5C21 13.0523 20.5523 13.5 20 13.5L19.1155 13.5C18.6518 13.5 18.2566 13.8221 18.0956 14.257C18.0381 14.4123 17.9749 14.5648 17.9061 14.7143C17.7123 15.1355 17.7639 15.6428 18.0918 15.9707L18.7177 16.5966C19.1082 16.9871 19.1082 17.6203 18.7177 18.0108L18.0108 18.7177C17.6203 19.1082 16.9871 19.1082 16.5966 18.7177L15.9707 18.0918C15.6428 17.7639 15.1355 17.7123 14.7141 17.9058C14.5647 17.9745 14.4123 18.0376 14.2571 18.0949C13.8221 18.2556 13.5 18.6508 13.5 19.1145L13.5 20C13.5 20.5523 13.0523 21 12.5 21L11.5 21C10.9477 21 10.5 20.5523 10.5 20L10.5 19.1145C10.5 18.6508 10.1779 18.2556 9.7429 18.0951C9.5874 18.0377 9.4348 17.9746 9.2852 17.9059C8.8636 17.7124 8.3562 17.7641 8.0283 18.0922L7.4034 18.7173C7.0129 19.108 6.3796 19.1081 5.989 18.7175L5.2821 18.0106C4.8917 17.6202 4.8916 16.9872 5.2819 16.5966L5.9076 15.9706C6.2353 15.6427 6.2869 15.1356 6.0933 14.7143C6.0247 14.5649 5.9615 14.4124 5.9041 14.2571C5.7434 13.8221 5.3482 13.5 4.8845 13.5L4 13.5C3.4477 13.5 3 13.0523 3 12.5L3 11.5C3 10.9477 3.4477 10.5 4 10.5L4.8845 10.5C5.3482 10.5 5.7434 10.1779 5.904 9.7429C5.9614 9.5874 6.0245 9.4346 6.0933 9.285C6.2867 8.8635 6.2351 8.3562 5.9072 8.0283L5.2823 7.4034C4.8918 7.0129 4.8918 6.3797 5.2823 5.9892L5.9892 5.2823C6.3797 4.8918 7.0129 4.8918 7.4034 5.2823L8.0283 5.9072C8.3562 6.2351 8.8635 6.2867 9.285 6.0933C9.4346 6.0245 9.5874 5.9614 9.7429 5.904C10.1779 5.7434 10.5 5.3482 10.5 4.8845L10.5 4C10.5 3.4477 10.9477 3 11.5 3L12.5 3C13.0523 3 13.5 3.4477 13.5 4L13.5 4.8845ZM12 9.5C13.3807 9.5 14.5 10.6193 14.5 12C14.5 13.3807 13.3807 14.5 12 14.5C10.6193 14.5 9.5 13.3807 9.5 12C9.5 10.6193 10.6193 9.5 12 9.5Z"/>
</svg>Also called
What someone searching for this drawing would have typed instead. These are the words the browser's search matches on.
- gear
- cog
- preferences
- options
- configure
- config
Related icons
The rest of the settings family first, then the Web shelf.
FAQ
Answered from settings's own facts: its shelf, the weights it was drawn in, its siblings and its dates.
- What is the settings icon for?
- A cog, for preferences, options and configuration screens. It is filed under Web in Keyline Icons, drawn on the same 24×24 grid as the rest of the set. People look for it as gear, cog, preferences, options, configure and config, and the browser's search matches all of those.
- What styles does the settings icon come in?
- All three: stroke, duotone and fill. They are drawn from the same geometry, so swapping weight never moves anything.
- Is there a square or circle version of settings?
- No. settings is drawn as a bare glyph, and the set has no boxed variant of it.
- What other icons go with settings?
- bookmark, circle-navigation, globe, globe-check, globe-cursor and globe-off, and 12 more, all shown below. They are the Web shelf: nothing else in the set is named after settings.
- How do I import settings in React?
- <Settings /> is the component, and the weight decides the module: stroke from "@keyline-icons/react", duotone from "@keyline-icons/react/duotone" and fill from "@keyline-icons/react/fill". It takes the usual SVG props plus a size, so <Settings size={16} /> and className="size-4" both work, and there is no provider or theme to set up.
- Where is the settings SVG?
- icons/stroke/settings.svg, icons/duotone/settings.svg and icons/fill/settings.svg in the repository, normalised: no wrapper, no ids and no classes to strip out. The tabs above hand you the same drawing as SVG or JSX without the download, and neither needs an install.
- When was settings added to the set?
- Added 9 Aug 2026, and last redrawn 9 Aug 2026. It ships in v0.1.0, so an install at that version or later has it.
Questions about the set rather than about this drawing are answered where they belong. The home page covers what the set is, how the three styles differ, why some icons come boxed and where the Figma file is; installing the set in a shadcn/ui project covers the React package, the CLI and using an icon without React. The MIT licence is stated in the footer of every page.