settings icon
settings-16-filled from Fluent UI System Icons by Microsoft Corporation · 16 Filled · MIT Free for personal and commercial use.
- Name
- settings-16-filled
- Set
- Fluent UI System Icons
- Style
- 16 Filled
- Viewbox
- 16×16
- License
- MIT
12 other variants in Fluent UI System Icons
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
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="M2.267 6.153A6 6 0 0 1 3.53 3.98a.36.36 0 0 1 .382-.095l1.36.484a.71.71 0 0 0 .935-.538l.26-1.416a.35.35 0 0 1 .274-.282a6.1 6.1 0 0 1 2.52 0c.14.03.248.141.274.282l.26 1.416a.708.708 0 0 0 .935.538l1.36-.484a.36.36 0 0 1 .382.095a6 6 0 0 1 1.262 2.173a.35.35 0 0 1-.108.378l-1.102.931a.703.703 0 0 0 0 1.076l1.102.931c.11.093.152.242.108.378a6 6 0 0 1-1.262 2.173a.36.36 0 0 1-.382.095l-1.36-.484a.71.71 0 0 0-.935.538l-.26 1.416a.35.35 0 0 1-.275.282a6.1 6.1 0 0 1-2.519 0a.35.35 0 0 1-.275-.282l-.259-1.416a.708.708 0 0 0-.935-.538l-1.36.484a.36.36 0 0 1-.382-.095a6 6 0 0 1-1.262-2.173a.35.35 0 0 1 .108-.378l1.102-.931a.704.704 0 0 0 0-1.076l-1.102-.931a.35.35 0 0 1-.108-.378M6.25 8a1.75 1.75 0 1 0 3.5 0a1.75 1.75 0 0 0-3.5 0"/></svg>
React
import type { SVGProps } from "react";
export function FluentSettings16Filled(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="M2.267 6.153A6 6 0 0 1 3.53 3.98a.36.36 0 0 1 .382-.095l1.36.484a.71.71 0 0 0 .935-.538l.26-1.416a.35.35 0 0 1 .274-.282a6.1 6.1 0 0 1 2.52 0c.14.03.248.141.274.282l.26 1.416a.708.708 0 0 0 .935.538l1.36-.484a.36.36 0 0 1 .382.095a6 6 0 0 1 1.262 2.173a.35.35 0 0 1-.108.378l-1.102.931a.703.703 0 0 0 0 1.076l1.102.931c.11.093.152.242.108.378a6 6 0 0 1-1.262 2.173a.36.36 0 0 1-.382.095l-1.36-.484a.71.71 0 0 0-.935.538l-.26 1.416a.35.35 0 0 1-.275.282a6.1 6.1 0 0 1-2.519 0a.35.35 0 0 1-.275-.282l-.259-1.416a.708.708 0 0 0-.935-.538l-1.36.484a.36.36 0 0 1-.382-.095a6 6 0 0 1-1.262-2.173a.35.35 0 0 1 .108-.378l1.102-.931a.704.704 0 0 0 0-1.076l-1.102-.931a.35.35 0 0 1-.108-.378M6.25 8a1.75 1.75 0 1 0 3.5 0a1.75 1.75 0 0 0-3.5 0"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="M2.267 6.153A6 6 0 0 1 3.53 3.98a.36.36 0 0 1 .382-.095l1.36.484a.71.71 0 0 0 .935-.538l.26-1.416a.35.35 0 0 1 .274-.282a6.1 6.1 0 0 1 2.52 0c.14.03.248.141.274.282l.26 1.416a.708.708 0 0 0 .935.538l1.36-.484a.36.36 0 0 1 .382.095a6 6 0 0 1 1.262 2.173a.35.35 0 0 1-.108.378l-1.102.931a.703.703 0 0 0 0 1.076l1.102.931c.11.093.152.242.108.378a6 6 0 0 1-1.262 2.173a.36.36 0 0 1-.382.095l-1.36-.484a.71.71 0 0 0-.935.538l-.26 1.416a.35.35 0 0 1-.275.282a6.1 6.1 0 0 1-2.519 0a.35.35 0 0 1-.275-.282l-.259-1.416a.708.708 0 0 0-.935-.538l-1.36.484a.36.36 0 0 1-.382-.095a6 6 0 0 1-1.262-2.173a.35.35 0 0 1 .108-.378l1.102-.931a.704.704 0 0 0 0-1.076l-1.102-.931a.35.35 0 0 1-.108-.378M6.25 8a1.75 1.75 0 1 0 3.5 0a1.75 1.75 0 0 0-3.5 0"/></svg> </template>
CSS
.icon-settings-16-filled {
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%22M2.267%206.153A6%206%200%200%201%203.53%203.98a.36.36%200%200%201%20.382-.095l1.36.484a.71.71%200%200%200%20.935-.538l.26-1.416a.35.35%200%200%201%20.274-.282a6.1%206.1%200%200%201%202.52%200c.14.03.248.141.274.282l.26%201.416a.708.708%200%200%200%20.935.538l1.36-.484a.36.36%200%200%201%20.382.095a6%206%200%200%201%201.262%202.173a.35.35%200%200%201-.108.378l-1.102.931a.703.703%200%200%200%200%201.076l1.102.931c.11.093.152.242.108.378a6%206%200%200%201-1.262%202.173a.36.36%200%200%201-.382.095l-1.36-.484a.71.71%200%200%200-.935.538l-.26%201.416a.35.35%200%200%201-.275.282a6.1%206.1%200%200%201-2.519%200a.35.35%200%200%201-.275-.282l-.259-1.416a.708.708%200%200%200-.935-.538l-1.36.484a.36.36%200%200%201-.382-.095a6%206%200%200%201-1.262-2.173a.35.35%200%200%201%20.108-.378l1.102-.931a.704.704%200%200%200%200-1.076l-1.102-.931a.35.35%200%200%201-.108-.378M6.25%208a1.75%201.75%200%201%200%203.5%200a1.75%201.75%200%200%200-3.5%200%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%22M2.267%206.153A6%206%200%200%201%203.53%203.98a.36.36%200%200%201%20.382-.095l1.36.484a.71.71%200%200%200%20.935-.538l.26-1.416a.35.35%200%200%201%20.274-.282a6.1%206.1%200%200%201%202.52%200c.14.03.248.141.274.282l.26%201.416a.708.708%200%200%200%20.935.538l1.36-.484a.36.36%200%200%201%20.382.095a6%206%200%200%201%201.262%202.173a.35.35%200%200%201-.108.378l-1.102.931a.703.703%200%200%200%200%201.076l1.102.931c.11.093.152.242.108.378a6%206%200%200%201-1.262%202.173a.36.36%200%200%201-.382.095l-1.36-.484a.71.71%200%200%200-.935.538l-.26%201.416a.35.35%200%200%201-.275.282a6.1%206.1%200%200%201-2.519%200a.35.35%200%200%201-.275-.282l-.259-1.416a.708.708%200%200%200-.935-.538l-1.36.484a.36.36%200%200%201-.382-.095a6%206%200%200%201-1.262-2.173a.35.35%200%200%201%20.108-.378l1.102-.931a.704.704%200%200%200%200-1.076l-1.102-.931a.35.35%200%200%201-.108-.378M6.25%208a1.75%201.75%200%201%200%203.5%200a1.75%201.75%200%200%200-3.5%200%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/settings-16-filled.svg?color=%231a73e8&size=48
