settings icon
settings-28 from Fluent UI System Color Icons by Microsoft Corporation · 28 · MIT Free for personal and commercial use.
- Name
- settings-28
- Set
- Fluent UI System Color Icons
- Style
- 28
- Viewbox
- 28×28
- License
- MIT
5 other variants in Fluent UI System Color Icons
The same icon in other sets
settingsCarbonsettingsCodiconssettings-fillEva IconssettingsFeather Iconssettings-16-filledFluent UI System IconssettingsIconoirsettingsIonIconssettingsLucidesettingsMage IconssettingsMaterial Icon ThemesettingsMaterial SymbolssettingsMaterial Symbols LightsettingsOcticonssettings-fillRemix Iconsettings-boldSolarsettingsTabler Icons
Use the settings icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><g fill="none"><path fill="url(#SVGIZXTVzQH)" d="M16.693 2.311A13 13 0 0 0 14.013 2q-1.384.016-2.704.311a.92.92 0 0 0-.716.8l-.209 1.877a1.707 1.707 0 0 1-2.371 1.376l-1.72-.757a.92.92 0 0 0-1.043.214a12.06 12.06 0 0 0-2.709 4.667a.92.92 0 0 0 .334 1.017l1.527 1.125a1.7 1.7 0 0 1 0 2.74l-1.527 1.128a.92.92 0 0 0-.334 1.016a12.1 12.1 0 0 0 2.707 4.672a.92.92 0 0 0 1.043.215l1.728-.759a1.7 1.7 0 0 1 1.526.086c.466.27.777.745.838 1.281l.208 1.877a.92.92 0 0 0 .702.796a11.7 11.7 0 0 0 5.413 0a.92.92 0 0 0 .702-.796l.208-1.88a1.693 1.693 0 0 1 2.366-1.37l1.727.759a.92.92 0 0 0 1.043-.215a12.1 12.1 0 0 0 2.707-4.667a.92.92 0 0 0-.334-1.017L23.6 15.37a1.7 1.7 0 0 1-.001-2.74l1.525-1.127a.92.92 0 0 0 .333-1.016a12.06 12.06 0 0 0-2.708-4.667a.92.92 0 0 0-1.043-.214l-1.72.757a1.7 1.7 0 0 1-.68.144a1.7 1.7 0 0 1-1.688-1.518l-.21-1.879a.92.92 0 0 0-.714-.799M14 18a4 4 0 1 1 0-8a4 4 0 0 1 0 8"/><defs><linearGradient id="SVGIZXTVzQH" x1="19.749" x2="6.326" y1="25.071" y2="4.173" gradientUnits="userSpaceOnUse"><stop stop-color="#70777d"/><stop offset="1" stop-color="#b9c0c7"/></linearGradient></defs></g></svg>
React
import type { SVGProps } from "react";
export function FluentColorSettings28(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><g fill="none"><path fill="url(#SVGIZXTVzQH)" d="M16.693 2.311A13 13 0 0 0 14.013 2q-1.384.016-2.704.311a.92.92 0 0 0-.716.8l-.209 1.877a1.707 1.707 0 0 1-2.371 1.376l-1.72-.757a.92.92 0 0 0-1.043.214a12.06 12.06 0 0 0-2.709 4.667a.92.92 0 0 0 .334 1.017l1.527 1.125a1.7 1.7 0 0 1 0 2.74l-1.527 1.128a.92.92 0 0 0-.334 1.016a12.1 12.1 0 0 0 2.707 4.672a.92.92 0 0 0 1.043.215l1.728-.759a1.7 1.7 0 0 1 1.526.086c.466.27.777.745.838 1.281l.208 1.877a.92.92 0 0 0 .702.796a11.7 11.7 0 0 0 5.413 0a.92.92 0 0 0 .702-.796l.208-1.88a1.693 1.693 0 0 1 2.366-1.37l1.727.759a.92.92 0 0 0 1.043-.215a12.1 12.1 0 0 0 2.707-4.667a.92.92 0 0 0-.334-1.017L23.6 15.37a1.7 1.7 0 0 1-.001-2.74l1.525-1.127a.92.92 0 0 0 .333-1.016a12.06 12.06 0 0 0-2.708-4.667a.92.92 0 0 0-1.043-.214l-1.72.757a1.7 1.7 0 0 1-.68.144a1.7 1.7 0 0 1-1.688-1.518l-.21-1.879a.92.92 0 0 0-.714-.799M14 18a4 4 0 1 1 0-8a4 4 0 0 1 0 8"/><defs><linearGradient id="SVGIZXTVzQH" x1="19.749" x2="6.326" y1="25.071" y2="4.173" gradientUnits="userSpaceOnUse"><stop stopColor="#70777d"/><stop offset="1" stopColor="#b9c0c7"/></linearGradient></defs></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><g fill="none"><path fill="url(#SVGIZXTVzQH)" d="M16.693 2.311A13 13 0 0 0 14.013 2q-1.384.016-2.704.311a.92.92 0 0 0-.716.8l-.209 1.877a1.707 1.707 0 0 1-2.371 1.376l-1.72-.757a.92.92 0 0 0-1.043.214a12.06 12.06 0 0 0-2.709 4.667a.92.92 0 0 0 .334 1.017l1.527 1.125a1.7 1.7 0 0 1 0 2.74l-1.527 1.128a.92.92 0 0 0-.334 1.016a12.1 12.1 0 0 0 2.707 4.672a.92.92 0 0 0 1.043.215l1.728-.759a1.7 1.7 0 0 1 1.526.086c.466.27.777.745.838 1.281l.208 1.877a.92.92 0 0 0 .702.796a11.7 11.7 0 0 0 5.413 0a.92.92 0 0 0 .702-.796l.208-1.88a1.693 1.693 0 0 1 2.366-1.37l1.727.759a.92.92 0 0 0 1.043-.215a12.1 12.1 0 0 0 2.707-4.667a.92.92 0 0 0-.334-1.017L23.6 15.37a1.7 1.7 0 0 1-.001-2.74l1.525-1.127a.92.92 0 0 0 .333-1.016a12.06 12.06 0 0 0-2.708-4.667a.92.92 0 0 0-1.043-.214l-1.72.757a1.7 1.7 0 0 1-.68.144a1.7 1.7 0 0 1-1.688-1.518l-.21-1.879a.92.92 0 0 0-.714-.799M14 18a4 4 0 1 1 0-8a4 4 0 0 1 0 8"/><defs><linearGradient id="SVGIZXTVzQH" x1="19.749" x2="6.326" y1="25.071" y2="4.173" gradientUnits="userSpaceOnUse"><stop stop-color="#70777d"/><stop offset="1" stop-color="#b9c0c7"/></linearGradient></defs></g></svg> </template>
CSS
.icon-settings-28 {
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%2028%2028%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGIZXTVzQH)%22%20d%3D%22M16.693%202.311A13%2013%200%200%200%2014.013%202q-1.384.016-2.704.311a.92.92%200%200%200-.716.8l-.209%201.877a1.707%201.707%200%200%201-2.371%201.376l-1.72-.757a.92.92%200%200%200-1.043.214a12.06%2012.06%200%200%200-2.709%204.667a.92.92%200%200%200%20.334%201.017l1.527%201.125a1.7%201.7%200%200%201%200%202.74l-1.527%201.128a.92.92%200%200%200-.334%201.016a12.1%2012.1%200%200%200%202.707%204.672a.92.92%200%200%200%201.043.215l1.728-.759a1.7%201.7%200%200%201%201.526.086c.466.27.777.745.838%201.281l.208%201.877a.92.92%200%200%200%20.702.796a11.7%2011.7%200%200%200%205.413%200a.92.92%200%200%200%20.702-.796l.208-1.88a1.693%201.693%200%200%201%202.366-1.37l1.727.759a.92.92%200%200%200%201.043-.215a12.1%2012.1%200%200%200%202.707-4.667a.92.92%200%200%200-.334-1.017L23.6%2015.37a1.7%201.7%200%200%201-.001-2.74l1.525-1.127a.92.92%200%200%200%20.333-1.016a12.06%2012.06%200%200%200-2.708-4.667a.92.92%200%200%200-1.043-.214l-1.72.757a1.7%201.7%200%200%201-.68.144a1.7%201.7%200%200%201-1.688-1.518l-.21-1.879a.92.92%200%200%200-.714-.799M14%2018a4%204%200%201%201%200-8a4%204%200%200%201%200%208%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGIZXTVzQH%22%20x1%3D%2219.749%22%20x2%3D%226.326%22%20y1%3D%2225.071%22%20y2%3D%224.173%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2370777d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23b9c0c7%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%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%2028%2028%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22url(%23SVGIZXTVzQH)%22%20d%3D%22M16.693%202.311A13%2013%200%200%200%2014.013%202q-1.384.016-2.704.311a.92.92%200%200%200-.716.8l-.209%201.877a1.707%201.707%200%200%201-2.371%201.376l-1.72-.757a.92.92%200%200%200-1.043.214a12.06%2012.06%200%200%200-2.709%204.667a.92.92%200%200%200%20.334%201.017l1.527%201.125a1.7%201.7%200%200%201%200%202.74l-1.527%201.128a.92.92%200%200%200-.334%201.016a12.1%2012.1%200%200%200%202.707%204.672a.92.92%200%200%200%201.043.215l1.728-.759a1.7%201.7%200%200%201%201.526.086c.466.27.777.745.838%201.281l.208%201.877a.92.92%200%200%200%20.702.796a11.7%2011.7%200%200%200%205.413%200a.92.92%200%200%200%20.702-.796l.208-1.88a1.693%201.693%200%200%201%202.366-1.37l1.727.759a.92.92%200%200%200%201.043-.215a12.1%2012.1%200%200%200%202.707-4.667a.92.92%200%200%200-.334-1.017L23.6%2015.37a1.7%201.7%200%200%201-.001-2.74l1.525-1.127a.92.92%200%200%200%20.333-1.016a12.06%2012.06%200%200%200-2.708-4.667a.92.92%200%200%200-1.043-.214l-1.72.757a1.7%201.7%200%200%201-.68.144a1.7%201.7%200%200%201-1.688-1.518l-.21-1.879a.92.92%200%200%200-.714-.799M14%2018a4%204%200%201%201%200-8a4%204%200%200%201%200%208%22%2F%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22SVGIZXTVzQH%22%20x1%3D%2219.749%22%20x2%3D%226.326%22%20y1%3D%2225.071%22%20y2%3D%224.173%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2370777d%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23b9c0c7%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent-color/settings-28.svg?color=%231a73e8&size=48
