settings icon

settings-16-regular from Fluent UI System Icons by Microsoft Corporation · 16 Regular · MIT Free for personal and commercial use.

Name
settings-16-regular
Set
Fluent UI System Icons
Style
16 Regular
Viewbox
16×16
License
MIT

12 other variants in Fluent UI System Icons

settings-16-filledsettings-20-filledsettings-20-regularsettings-24-filledsettings-24-regularsettings-28-filledsettings-28-regularsettings-32-filledsettings-32-lightsettings-32-regularsettings-48-filledsettings-48-regular

The same icon in other sets

settingsCarbonsettingsCodiconssettings-fillEva IconssettingsFeather Iconssettings-16Fluent UI System Color IconssettingsIconoirsettingsIonIconssettingsLucidesettingsMage IconssettingsMaterial Icon ThemesettingsMaterial SymbolssettingsMaterial Symbols LightsettingsOcticonssettings-fillRemix Iconsettings-boldSolarsettingsTabler Icons

Related icons in Fluent UI System Icons

settings-chat-16-filledsettings-cog-multiple-20-filledsettings-sync-20-filled

Use the settings icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M8 6a2 2 0 1 0 0 4a2 2 0 0 0 0-4M7 8a1 1 0 1 1 2 0a1 1 0 0 1-2 0m3.618-3.602a.71.71 0 0 1-.824-.567l-.26-1.416a.35.35 0 0 0-.275-.282a6.1 6.1 0 0 0-2.519 0a.35.35 0 0 0-.275.282l-.259 1.416a.71.71 0 0 1-.936.538l-1.359-.484a.36.36 0 0 0-.382.095a6 6 0 0 0-1.262 2.173a.35.35 0 0 0 .108.378l1.102.931q.045.037.081.081a.704.704 0 0 1-.081.995l-1.102.931a.35.35 0 0 0-.108.378A6 6 0 0 0 3.53 12.02a.36.36 0 0 0 .382.095l1.36-.484a.708.708 0 0 1 .936.538l.258 1.416c.026.14.135.252.275.281a6.1 6.1 0 0 0 2.52 0a.35.35 0 0 0 .274-.281l.26-1.416a.71.71 0 0 1 .936-.538l1.359.484c.135.048.286.01.382-.095a6 6 0 0 0 1.262-2.173a.35.35 0 0 0-.108-.378l-1.102-.931a.703.703 0 0 1 0-1.076l1.102-.931a.35.35 0 0 0 .108-.378A6 6 0 0 0 12.47 3.98a.36.36 0 0 0-.382-.095l-1.36.484a1 1 0 0 1-.111.03m-6.62.58l.937.333a1.71 1.71 0 0 0 2.255-1.3l.177-.97a5 5 0 0 1 1.265 0l.178.97a1.708 1.708 0 0 0 2.255 1.3L12 4.977q.384.503.63 1.084l-.754.637a1.704 1.704 0 0 0 0 2.604l.755.637a5 5 0 0 1-.63 1.084l-.937-.334a1.71 1.71 0 0 0-2.255 1.3l-.178.97a5 5 0 0 1-1.265 0l-.177-.97a1.708 1.708 0 0 0-2.255-1.3L4 11.023a5 5 0 0 1-.63-1.084l.754-.638a1.704 1.704 0 0 0 0-2.603l-.755-.637q.248-.581.63-1.084"/></svg>

React

import type { SVGProps } from "react";

export function FluentSettings16Regular(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M8 6a2 2 0 1 0 0 4a2 2 0 0 0 0-4M7 8a1 1 0 1 1 2 0a1 1 0 0 1-2 0m3.618-3.602a.71.71 0 0 1-.824-.567l-.26-1.416a.35.35 0 0 0-.275-.282a6.1 6.1 0 0 0-2.519 0a.35.35 0 0 0-.275.282l-.259 1.416a.71.71 0 0 1-.936.538l-1.359-.484a.36.36 0 0 0-.382.095a6 6 0 0 0-1.262 2.173a.35.35 0 0 0 .108.378l1.102.931q.045.037.081.081a.704.704 0 0 1-.081.995l-1.102.931a.35.35 0 0 0-.108.378A6 6 0 0 0 3.53 12.02a.36.36 0 0 0 .382.095l1.36-.484a.708.708 0 0 1 .936.538l.258 1.416c.026.14.135.252.275.281a6.1 6.1 0 0 0 2.52 0a.35.35 0 0 0 .274-.281l.26-1.416a.71.71 0 0 1 .936-.538l1.359.484c.135.048.286.01.382-.095a6 6 0 0 0 1.262-2.173a.35.35 0 0 0-.108-.378l-1.102-.931a.703.703 0 0 1 0-1.076l1.102-.931a.35.35 0 0 0 .108-.378A6 6 0 0 0 12.47 3.98a.36.36 0 0 0-.382-.095l-1.36.484a1 1 0 0 1-.111.03m-6.62.58l.937.333a1.71 1.71 0 0 0 2.255-1.3l.177-.97a5 5 0 0 1 1.265 0l.178.97a1.708 1.708 0 0 0 2.255 1.3L12 4.977q.384.503.63 1.084l-.754.637a1.704 1.704 0 0 0 0 2.604l.755.637a5 5 0 0 1-.63 1.084l-.937-.334a1.71 1.71 0 0 0-2.255 1.3l-.178.97a5 5 0 0 1-1.265 0l-.177-.97a1.708 1.708 0 0 0-2.255-1.3L4 11.023a5 5 0 0 1-.63-1.084l.754-.638a1.704 1.704 0 0 0 0-2.603l-.755-.637q.248-.581.63-1.084"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M8 6a2 2 0 1 0 0 4a2 2 0 0 0 0-4M7 8a1 1 0 1 1 2 0a1 1 0 0 1-2 0m3.618-3.602a.71.71 0 0 1-.824-.567l-.26-1.416a.35.35 0 0 0-.275-.282a6.1 6.1 0 0 0-2.519 0a.35.35 0 0 0-.275.282l-.259 1.416a.71.71 0 0 1-.936.538l-1.359-.484a.36.36 0 0 0-.382.095a6 6 0 0 0-1.262 2.173a.35.35 0 0 0 .108.378l1.102.931q.045.037.081.081a.704.704 0 0 1-.081.995l-1.102.931a.35.35 0 0 0-.108.378A6 6 0 0 0 3.53 12.02a.36.36 0 0 0 .382.095l1.36-.484a.708.708 0 0 1 .936.538l.258 1.416c.026.14.135.252.275.281a6.1 6.1 0 0 0 2.52 0a.35.35 0 0 0 .274-.281l.26-1.416a.71.71 0 0 1 .936-.538l1.359.484c.135.048.286.01.382-.095a6 6 0 0 0 1.262-2.173a.35.35 0 0 0-.108-.378l-1.102-.931a.703.703 0 0 1 0-1.076l1.102-.931a.35.35 0 0 0 .108-.378A6 6 0 0 0 12.47 3.98a.36.36 0 0 0-.382-.095l-1.36.484a1 1 0 0 1-.111.03m-6.62.58l.937.333a1.71 1.71 0 0 0 2.255-1.3l.177-.97a5 5 0 0 1 1.265 0l.178.97a1.708 1.708 0 0 0 2.255 1.3L12 4.977q.384.503.63 1.084l-.754.637a1.704 1.704 0 0 0 0 2.604l.755.637a5 5 0 0 1-.63 1.084l-.937-.334a1.71 1.71 0 0 0-2.255 1.3l-.178.97a5 5 0 0 1-1.265 0l-.177-.97a1.708 1.708 0 0 0-2.255-1.3L4 11.023a5 5 0 0 1-.63-1.084l.754-.638a1.704 1.704 0 0 0 0-2.603l-.755-.637q.248-.581.63-1.084"/></svg>
</template>

CSS

.icon-settings-16-regular {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8%206a2%202%200%201%200%200%204a2%202%200%200%200%200-4M7%208a1%201%200%201%201%202%200a1%201%200%200%201-2%200m3.618-3.602a.71.71%200%200%201-.824-.567l-.26-1.416a.35.35%200%200%200-.275-.282a6.1%206.1%200%200%200-2.519%200a.35.35%200%200%200-.275.282l-.259%201.416a.71.71%200%200%201-.936.538l-1.359-.484a.36.36%200%200%200-.382.095a6%206%200%200%200-1.262%202.173a.35.35%200%200%200%20.108.378l1.102.931q.045.037.081.081a.704.704%200%200%201-.081.995l-1.102.931a.35.35%200%200%200-.108.378A6%206%200%200%200%203.53%2012.02a.36.36%200%200%200%20.382.095l1.36-.484a.708.708%200%200%201%20.936.538l.258%201.416c.026.14.135.252.275.281a6.1%206.1%200%200%200%202.52%200a.35.35%200%200%200%20.274-.281l.26-1.416a.71.71%200%200%201%20.936-.538l1.359.484c.135.048.286.01.382-.095a6%206%200%200%200%201.262-2.173a.35.35%200%200%200-.108-.378l-1.102-.931a.703.703%200%200%201%200-1.076l1.102-.931a.35.35%200%200%200%20.108-.378A6%206%200%200%200%2012.47%203.98a.36.36%200%200%200-.382-.095l-1.36.484a1%201%200%200%201-.111.03m-6.62.58l.937.333a1.71%201.71%200%200%200%202.255-1.3l.177-.97a5%205%200%200%201%201.265%200l.178.97a1.708%201.708%200%200%200%202.255%201.3L12%204.977q.384.503.63%201.084l-.754.637a1.704%201.704%200%200%200%200%202.604l.755.637a5%205%200%200%201-.63%201.084l-.937-.334a1.71%201.71%200%200%200-2.255%201.3l-.178.97a5%205%200%200%201-1.265%200l-.177-.97a1.708%201.708%200%200%200-2.255-1.3L4%2011.023a5%205%200%200%201-.63-1.084l.754-.638a1.704%201.704%200%200%200%200-2.603l-.755-.637q.248-.581.63-1.084%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8%206a2%202%200%201%200%200%204a2%202%200%200%200%200-4M7%208a1%201%200%201%201%202%200a1%201%200%200%201-2%200m3.618-3.602a.71.71%200%200%201-.824-.567l-.26-1.416a.35.35%200%200%200-.275-.282a6.1%206.1%200%200%200-2.519%200a.35.35%200%200%200-.275.282l-.259%201.416a.71.71%200%200%201-.936.538l-1.359-.484a.36.36%200%200%200-.382.095a6%206%200%200%200-1.262%202.173a.35.35%200%200%200%20.108.378l1.102.931q.045.037.081.081a.704.704%200%200%201-.081.995l-1.102.931a.35.35%200%200%200-.108.378A6%206%200%200%200%203.53%2012.02a.36.36%200%200%200%20.382.095l1.36-.484a.708.708%200%200%201%20.936.538l.258%201.416c.026.14.135.252.275.281a6.1%206.1%200%200%200%202.52%200a.35.35%200%200%200%20.274-.281l.26-1.416a.71.71%200%200%201%20.936-.538l1.359.484c.135.048.286.01.382-.095a6%206%200%200%200%201.262-2.173a.35.35%200%200%200-.108-.378l-1.102-.931a.703.703%200%200%201%200-1.076l1.102-.931a.35.35%200%200%200%20.108-.378A6%206%200%200%200%2012.47%203.98a.36.36%200%200%200-.382-.095l-1.36.484a1%201%200%200%201-.111.03m-6.62.58l.937.333a1.71%201.71%200%200%200%202.255-1.3l.177-.97a5%205%200%200%201%201.265%200l.178.97a1.708%201.708%200%200%200%202.255%201.3L12%204.977q.384.503.63%201.084l-.754.637a1.704%201.704%200%200%200%200%202.604l.755.637a5%205%200%200%201-.63%201.084l-.937-.334a1.71%201.71%200%200%200-2.255%201.3l-.178.97a5%205%200%200%201-1.265%200l-.177-.97a1.708%201.708%200%200%200-2.255-1.3L4%2011.023a5%205%200%200%201-.63-1.084l.754-.638a1.704%201.704%200%200%200%200-2.603l-.755-.637q.248-.581.63-1.084%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/settings-16-regular.svg?color=%231a73e8&size=48