settings icon
settings-32-light from Fluent UI System Icons by Microsoft Corporation · 32 Light · MIT Free for personal and commercial use.
- Name
- settings-32-light
- Set
- Fluent UI System Icons
- Style
- 32 Light
- Viewbox
- 32×32
- License
- MIT
12 other variants in Fluent UI System Icons
The same icon in other sets
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 32 32"><path fill="currentColor" d="M21 16a5 5 0 1 1-10 0a5 5 0 0 1 10 0m-1 0a4 4 0 1 0-8 0a4 4 0 0 0 8 0M5.9 6.304a.96.96 0 0 1 1.095-.193l1.8.83a2 2 0 0 0 2.82-1.546l.297-2.176a.96.96 0 0 1 .71-.809A14 14 0 0 1 15.999 2c1.165 0 2.296.142 3.378.41a.96.96 0 0 1 .71.809l.297 2.176a2 2 0 0 0 2.819 1.546l1.8-.83a.96.96 0 0 1 1.095.193a14 14 0 0 1 3.35 5.795a.96.96 0 0 1-.382 1.045l-1.736 1.22a2 2 0 0 0 0 3.273l1.736 1.22a.96.96 0 0 1 .382 1.044a14 14 0 0 1-3.35 5.795a.96.96 0 0 1-1.094.193l-1.802-.83a2 2 0 0 0-2.818 1.546l-.297 2.176a.96.96 0 0 1-.71.809a14 14 0 0 1-3.378.41a14 14 0 0 1-3.378-.41a.96.96 0 0 1-.71-.809l-.296-2.176a2 2 0 0 0-2.82-1.546l-1.8.83a.96.96 0 0 1-1.095-.193A14 14 0 0 1 2.55 19.9a.96.96 0 0 1 .382-1.045l1.737-1.22a2 2 0 0 0 0-3.273l-1.737-1.22a.96.96 0 0 1-.382-1.045A14 14 0 0 1 5.9 6.305m-2.378 6.032l1.721 1.209c1.701 1.195 1.701 3.715 0 4.91l-1.72 1.209a13 13 0 0 0 3.07 5.31l1.784-.823a3 3 0 0 1 4.228 2.318l.295 2.16c.992.242 2.03.371 3.1.371a13 13 0 0 0 3.098-.371l.295-2.16a3 3 0 0 1 4.228-2.318l1.785.822a13 13 0 0 0 3.07-5.31l-1.72-1.208a3 3 0 0 1 0-4.91l1.72-1.209a13 13 0 0 0-3.07-5.31l-1.785.823a3 3 0 0 1-4.228-2.318l-.295-2.16A13 13 0 0 0 15.999 3c-1.069 0-2.107.129-3.099.371l-.295 2.16a3 3 0 0 1-4.228 2.318l-1.784-.822a13 13 0 0 0-3.07 5.31"/></svg>
React
import type { SVGProps } from "react";
export function FluentSettings32Light(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M21 16a5 5 0 1 1-10 0a5 5 0 0 1 10 0m-1 0a4 4 0 1 0-8 0a4 4 0 0 0 8 0M5.9 6.304a.96.96 0 0 1 1.095-.193l1.8.83a2 2 0 0 0 2.82-1.546l.297-2.176a.96.96 0 0 1 .71-.809A14 14 0 0 1 15.999 2c1.165 0 2.296.142 3.378.41a.96.96 0 0 1 .71.809l.297 2.176a2 2 0 0 0 2.819 1.546l1.8-.83a.96.96 0 0 1 1.095.193a14 14 0 0 1 3.35 5.795a.96.96 0 0 1-.382 1.045l-1.736 1.22a2 2 0 0 0 0 3.273l1.736 1.22a.96.96 0 0 1 .382 1.044a14 14 0 0 1-3.35 5.795a.96.96 0 0 1-1.094.193l-1.802-.83a2 2 0 0 0-2.818 1.546l-.297 2.176a.96.96 0 0 1-.71.809a14 14 0 0 1-3.378.41a14 14 0 0 1-3.378-.41a.96.96 0 0 1-.71-.809l-.296-2.176a2 2 0 0 0-2.82-1.546l-1.8.83a.96.96 0 0 1-1.095-.193A14 14 0 0 1 2.55 19.9a.96.96 0 0 1 .382-1.045l1.737-1.22a2 2 0 0 0 0-3.273l-1.737-1.22a.96.96 0 0 1-.382-1.045A14 14 0 0 1 5.9 6.305m-2.378 6.032l1.721 1.209c1.701 1.195 1.701 3.715 0 4.91l-1.72 1.209a13 13 0 0 0 3.07 5.31l1.784-.823a3 3 0 0 1 4.228 2.318l.295 2.16c.992.242 2.03.371 3.1.371a13 13 0 0 0 3.098-.371l.295-2.16a3 3 0 0 1 4.228-2.318l1.785.822a13 13 0 0 0 3.07-5.31l-1.72-1.208a3 3 0 0 1 0-4.91l1.72-1.209a13 13 0 0 0-3.07-5.31l-1.785.823a3 3 0 0 1-4.228-2.318l-.295-2.16A13 13 0 0 0 15.999 3c-1.069 0-2.107.129-3.099.371l-.295 2.16a3 3 0 0 1-4.228 2.318l-1.784-.822a13 13 0 0 0-3.07 5.31"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M21 16a5 5 0 1 1-10 0a5 5 0 0 1 10 0m-1 0a4 4 0 1 0-8 0a4 4 0 0 0 8 0M5.9 6.304a.96.96 0 0 1 1.095-.193l1.8.83a2 2 0 0 0 2.82-1.546l.297-2.176a.96.96 0 0 1 .71-.809A14 14 0 0 1 15.999 2c1.165 0 2.296.142 3.378.41a.96.96 0 0 1 .71.809l.297 2.176a2 2 0 0 0 2.819 1.546l1.8-.83a.96.96 0 0 1 1.095.193a14 14 0 0 1 3.35 5.795a.96.96 0 0 1-.382 1.045l-1.736 1.22a2 2 0 0 0 0 3.273l1.736 1.22a.96.96 0 0 1 .382 1.044a14 14 0 0 1-3.35 5.795a.96.96 0 0 1-1.094.193l-1.802-.83a2 2 0 0 0-2.818 1.546l-.297 2.176a.96.96 0 0 1-.71.809a14 14 0 0 1-3.378.41a14 14 0 0 1-3.378-.41a.96.96 0 0 1-.71-.809l-.296-2.176a2 2 0 0 0-2.82-1.546l-1.8.83a.96.96 0 0 1-1.095-.193A14 14 0 0 1 2.55 19.9a.96.96 0 0 1 .382-1.045l1.737-1.22a2 2 0 0 0 0-3.273l-1.737-1.22a.96.96 0 0 1-.382-1.045A14 14 0 0 1 5.9 6.305m-2.378 6.032l1.721 1.209c1.701 1.195 1.701 3.715 0 4.91l-1.72 1.209a13 13 0 0 0 3.07 5.31l1.784-.823a3 3 0 0 1 4.228 2.318l.295 2.16c.992.242 2.03.371 3.1.371a13 13 0 0 0 3.098-.371l.295-2.16a3 3 0 0 1 4.228-2.318l1.785.822a13 13 0 0 0 3.07-5.31l-1.72-1.208a3 3 0 0 1 0-4.91l1.72-1.209a13 13 0 0 0-3.07-5.31l-1.785.823a3 3 0 0 1-4.228-2.318l-.295-2.16A13 13 0 0 0 15.999 3c-1.069 0-2.107.129-3.099.371l-.295 2.16a3 3 0 0 1-4.228 2.318l-1.784-.822a13 13 0 0 0-3.07 5.31"/></svg> </template>
CSS
.icon-settings-32-light {
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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21%2016a5%205%200%201%201-10%200a5%205%200%200%201%2010%200m-1%200a4%204%200%201%200-8%200a4%204%200%200%200%208%200M5.9%206.304a.96.96%200%200%201%201.095-.193l1.8.83a2%202%200%200%200%202.82-1.546l.297-2.176a.96.96%200%200%201%20.71-.809A14%2014%200%200%201%2015.999%202c1.165%200%202.296.142%203.378.41a.96.96%200%200%201%20.71.809l.297%202.176a2%202%200%200%200%202.819%201.546l1.8-.83a.96.96%200%200%201%201.095.193a14%2014%200%200%201%203.35%205.795a.96.96%200%200%201-.382%201.045l-1.736%201.22a2%202%200%200%200%200%203.273l1.736%201.22a.96.96%200%200%201%20.382%201.044a14%2014%200%200%201-3.35%205.795a.96.96%200%200%201-1.094.193l-1.802-.83a2%202%200%200%200-2.818%201.546l-.297%202.176a.96.96%200%200%201-.71.809a14%2014%200%200%201-3.378.41a14%2014%200%200%201-3.378-.41a.96.96%200%200%201-.71-.809l-.296-2.176a2%202%200%200%200-2.82-1.546l-1.8.83a.96.96%200%200%201-1.095-.193A14%2014%200%200%201%202.55%2019.9a.96.96%200%200%201%20.382-1.045l1.737-1.22a2%202%200%200%200%200-3.273l-1.737-1.22a.96.96%200%200%201-.382-1.045A14%2014%200%200%201%205.9%206.305m-2.378%206.032l1.721%201.209c1.701%201.195%201.701%203.715%200%204.91l-1.72%201.209a13%2013%200%200%200%203.07%205.31l1.784-.823a3%203%200%200%201%204.228%202.318l.295%202.16c.992.242%202.03.371%203.1.371a13%2013%200%200%200%203.098-.371l.295-2.16a3%203%200%200%201%204.228-2.318l1.785.822a13%2013%200%200%200%203.07-5.31l-1.72-1.208a3%203%200%200%201%200-4.91l1.72-1.209a13%2013%200%200%200-3.07-5.31l-1.785.823a3%203%200%200%201-4.228-2.318l-.295-2.16A13%2013%200%200%200%2015.999%203c-1.069%200-2.107.129-3.099.371l-.295%202.16a3%203%200%200%201-4.228%202.318l-1.784-.822a13%2013%200%200%200-3.07%205.31%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M21%2016a5%205%200%201%201-10%200a5%205%200%200%201%2010%200m-1%200a4%204%200%201%200-8%200a4%204%200%200%200%208%200M5.9%206.304a.96.96%200%200%201%201.095-.193l1.8.83a2%202%200%200%200%202.82-1.546l.297-2.176a.96.96%200%200%201%20.71-.809A14%2014%200%200%201%2015.999%202c1.165%200%202.296.142%203.378.41a.96.96%200%200%201%20.71.809l.297%202.176a2%202%200%200%200%202.819%201.546l1.8-.83a.96.96%200%200%201%201.095.193a14%2014%200%200%201%203.35%205.795a.96.96%200%200%201-.382%201.045l-1.736%201.22a2%202%200%200%200%200%203.273l1.736%201.22a.96.96%200%200%201%20.382%201.044a14%2014%200%200%201-3.35%205.795a.96.96%200%200%201-1.094.193l-1.802-.83a2%202%200%200%200-2.818%201.546l-.297%202.176a.96.96%200%200%201-.71.809a14%2014%200%200%201-3.378.41a14%2014%200%200%201-3.378-.41a.96.96%200%200%201-.71-.809l-.296-2.176a2%202%200%200%200-2.82-1.546l-1.8.83a.96.96%200%200%201-1.095-.193A14%2014%200%200%201%202.55%2019.9a.96.96%200%200%201%20.382-1.045l1.737-1.22a2%202%200%200%200%200-3.273l-1.737-1.22a.96.96%200%200%201-.382-1.045A14%2014%200%200%201%205.9%206.305m-2.378%206.032l1.721%201.209c1.701%201.195%201.701%203.715%200%204.91l-1.72%201.209a13%2013%200%200%200%203.07%205.31l1.784-.823a3%203%200%200%201%204.228%202.318l.295%202.16c.992.242%202.03.371%203.1.371a13%2013%200%200%200%203.098-.371l.295-2.16a3%203%200%200%201%204.228-2.318l1.785.822a13%2013%200%200%200%203.07-5.31l-1.72-1.208a3%203%200%200%201%200-4.91l1.72-1.209a13%2013%200%200%200-3.07-5.31l-1.785.823a3%203%200%200%201-4.228-2.318l-.295-2.16A13%2013%200%200%200%2015.999%203c-1.069%200-2.107.129-3.099.371l-.295%202.16a3%203%200%200%201-4.228%202.318l-1.784-.822a13%2013%200%200%200-3.07%205.31%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/settings-32-light.svg?color=%231a73e8&size=48
