Menu

Beta
Sign in
Settings SVG icon, rounded

Settings SVG icon, rounded

A gear-shaped symbol identifies controls for adjusting an app or service. Place it in a website account menu or a mobile app navigation screen to open configuration options.

Free · from Rounded Interface Icons

Similar SVGs

More from Rounded Interface Icons

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/zKFVIGfBfJQ3/amnt.svg" alt="Settings" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><g id="layer-1" data-name="Group 1"><path d="M28 9L36 9L38 16L42 18L49 16L55 26L50 31L50 33L55 38L49 48L42 46L38 48L36 55L28 55L26 48L22 46L15 48L9 38L14 33L14 31L9 26L15 16L22 18L26 16Z" fill="#a8dadc" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M40 32C40 36.42 36.42 40 32 40C27.58 40 24 36.42 24 32C24 27.58 27.58 24 32 24C36.42 24 40 27.58 40 32Z" fill="#a8dadc" stroke="#264653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
CSS background-image
.settings {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/zKFVIGfBfJQ3/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.settings {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/zKFVIGfBfJQ3/amnt.svg") center / contain no-repeat;
}
React
import SettingsSvg from "./settings.jsx"; // from the React tab above

<SettingsSvg width={48} height={48} />

Tags

settingsgearpreferencescontrols

Made with AMNT

AMNT SVG Pro 1.1 drew this from the words Settings. Flat, rounded icons in a consistent set. Use two colours and clean 2 px lines with rounded ends and corners. Keep the shapes simple, balanced, and easy to recognise at small sizes. Use the same proportions, line weight, and colour placement for every icon. as part of the pack Rounded Interface Icons. Want one like it? Make your own in the SVG studio.

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence

Settings