settings icon

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

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

12 other variants in Fluent UI System Icons

settings-16-filledsettings-16-regularsettings-20-filledsettings-20-regularsettings-24-filledsettings-24-regularsettings-28-filledsettings-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 28 28"><path fill="currentColor" d="M14 9.5a4.5 4.5 0 1 0 0 9a4.5 4.5 0 0 0 0-9M11 14a3 3 0 1 1 6 0a3 3 0 0 1-6 0m10.71 8.395l-1.728-.759a1.72 1.72 0 0 0-1.542.086c-.467.27-.765.747-.824 1.284l-.208 1.88a.92.92 0 0 1-.703.796a11.7 11.7 0 0 1-5.412 0a.92.92 0 0 1-.702-.796l-.208-1.877a1.7 1.7 0 0 0-.838-1.281a1.7 1.7 0 0 0-1.526-.086l-1.728.759a.92.92 0 0 1-1.043-.215a12.1 12.1 0 0 1-2.707-4.672a.92.92 0 0 1 .334-1.016l1.527-1.128a1.7 1.7 0 0 0 0-2.74l-1.527-1.125a.92.92 0 0 1-.334-1.017A12.06 12.06 0 0 1 5.25 5.821a.92.92 0 0 1 1.043-.214l1.72.757a1.707 1.707 0 0 0 2.371-1.376l.21-1.878a.92.92 0 0 1 .715-.799q1.32-.294 2.704-.311c.902.01 1.8.115 2.68.311a.92.92 0 0 1 .715.8l.209 1.878a1.7 1.7 0 0 0 1.688 1.518c.233 0 .464-.049.68-.144l1.72-.757a.92.92 0 0 1 1.043.214a12.06 12.06 0 0 1 2.708 4.667a.92.92 0 0 1-.333 1.016l-1.525 1.127c-.435.32-.698.829-.698 1.37c0 .54.263 1.049.699 1.37l1.526 1.126c.316.234.45.642.334 1.017a12.1 12.1 0 0 1-2.707 4.667a.92.92 0 0 1-1.043.215m-5.447-.198a3.16 3.16 0 0 1 1.425-1.773a3.22 3.22 0 0 1 2.896-.161l1.344.59a10.6 10.6 0 0 0 1.97-3.398l-1.189-.877v-.001a3.2 3.2 0 0 1-1.309-2.578c0-1.027.497-1.98 1.307-2.576l.002-.001l1.187-.877a10.6 10.6 0 0 0-1.971-3.397l-1.333.586l-.002.001c-.406.18-.843.272-1.286.272a3.2 3.2 0 0 1-3.178-2.852v-.002l-.163-1.46a11.5 11.5 0 0 0-1.95-.193q-1.01.014-1.975.193l-.163 1.461A3.207 3.207 0 0 1 7.41 7.737l-1.336-.588a10.6 10.6 0 0 0-1.971 3.397l1.19.877a3.2 3.2 0 0 1 0 5.155l-1.19.878a10.6 10.6 0 0 0 1.97 3.403l1.345-.59a3.2 3.2 0 0 1 2.878.16a3.2 3.2 0 0 1 1.579 2.411v.005l.162 1.464c1.297.255 2.63.255 3.927 0l.162-1.467q.036-.332.138-.645"/></svg>

React

import type { SVGProps } from "react";

export function FluentSettings28Regular(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><path fill="currentColor" d="M14 9.5a4.5 4.5 0 1 0 0 9a4.5 4.5 0 0 0 0-9M11 14a3 3 0 1 1 6 0a3 3 0 0 1-6 0m10.71 8.395l-1.728-.759a1.72 1.72 0 0 0-1.542.086c-.467.27-.765.747-.824 1.284l-.208 1.88a.92.92 0 0 1-.703.796a11.7 11.7 0 0 1-5.412 0a.92.92 0 0 1-.702-.796l-.208-1.877a1.7 1.7 0 0 0-.838-1.281a1.7 1.7 0 0 0-1.526-.086l-1.728.759a.92.92 0 0 1-1.043-.215a12.1 12.1 0 0 1-2.707-4.672a.92.92 0 0 1 .334-1.016l1.527-1.128a1.7 1.7 0 0 0 0-2.74l-1.527-1.125a.92.92 0 0 1-.334-1.017A12.06 12.06 0 0 1 5.25 5.821a.92.92 0 0 1 1.043-.214l1.72.757a1.707 1.707 0 0 0 2.371-1.376l.21-1.878a.92.92 0 0 1 .715-.799q1.32-.294 2.704-.311c.902.01 1.8.115 2.68.311a.92.92 0 0 1 .715.8l.209 1.878a1.7 1.7 0 0 0 1.688 1.518c.233 0 .464-.049.68-.144l1.72-.757a.92.92 0 0 1 1.043.214a12.06 12.06 0 0 1 2.708 4.667a.92.92 0 0 1-.333 1.016l-1.525 1.127c-.435.32-.698.829-.698 1.37c0 .54.263 1.049.699 1.37l1.526 1.126c.316.234.45.642.334 1.017a12.1 12.1 0 0 1-2.707 4.667a.92.92 0 0 1-1.043.215m-5.447-.198a3.16 3.16 0 0 1 1.425-1.773a3.22 3.22 0 0 1 2.896-.161l1.344.59a10.6 10.6 0 0 0 1.97-3.398l-1.189-.877v-.001a3.2 3.2 0 0 1-1.309-2.578c0-1.027.497-1.98 1.307-2.576l.002-.001l1.187-.877a10.6 10.6 0 0 0-1.971-3.397l-1.333.586l-.002.001c-.406.18-.843.272-1.286.272a3.2 3.2 0 0 1-3.178-2.852v-.002l-.163-1.46a11.5 11.5 0 0 0-1.95-.193q-1.01.014-1.975.193l-.163 1.461A3.207 3.207 0 0 1 7.41 7.737l-1.336-.588a10.6 10.6 0 0 0-1.971 3.397l1.19.877a3.2 3.2 0 0 1 0 5.155l-1.19.878a10.6 10.6 0 0 0 1.97 3.403l1.345-.59a3.2 3.2 0 0 1 2.878.16a3.2 3.2 0 0 1 1.579 2.411v.005l.162 1.464c1.297.255 2.63.255 3.927 0l.162-1.467q.036-.332.138-.645"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><path fill="currentColor" d="M14 9.5a4.5 4.5 0 1 0 0 9a4.5 4.5 0 0 0 0-9M11 14a3 3 0 1 1 6 0a3 3 0 0 1-6 0m10.71 8.395l-1.728-.759a1.72 1.72 0 0 0-1.542.086c-.467.27-.765.747-.824 1.284l-.208 1.88a.92.92 0 0 1-.703.796a11.7 11.7 0 0 1-5.412 0a.92.92 0 0 1-.702-.796l-.208-1.877a1.7 1.7 0 0 0-.838-1.281a1.7 1.7 0 0 0-1.526-.086l-1.728.759a.92.92 0 0 1-1.043-.215a12.1 12.1 0 0 1-2.707-4.672a.92.92 0 0 1 .334-1.016l1.527-1.128a1.7 1.7 0 0 0 0-2.74l-1.527-1.125a.92.92 0 0 1-.334-1.017A12.06 12.06 0 0 1 5.25 5.821a.92.92 0 0 1 1.043-.214l1.72.757a1.707 1.707 0 0 0 2.371-1.376l.21-1.878a.92.92 0 0 1 .715-.799q1.32-.294 2.704-.311c.902.01 1.8.115 2.68.311a.92.92 0 0 1 .715.8l.209 1.878a1.7 1.7 0 0 0 1.688 1.518c.233 0 .464-.049.68-.144l1.72-.757a.92.92 0 0 1 1.043.214a12.06 12.06 0 0 1 2.708 4.667a.92.92 0 0 1-.333 1.016l-1.525 1.127c-.435.32-.698.829-.698 1.37c0 .54.263 1.049.699 1.37l1.526 1.126c.316.234.45.642.334 1.017a12.1 12.1 0 0 1-2.707 4.667a.92.92 0 0 1-1.043.215m-5.447-.198a3.16 3.16 0 0 1 1.425-1.773a3.22 3.22 0 0 1 2.896-.161l1.344.59a10.6 10.6 0 0 0 1.97-3.398l-1.189-.877v-.001a3.2 3.2 0 0 1-1.309-2.578c0-1.027.497-1.98 1.307-2.576l.002-.001l1.187-.877a10.6 10.6 0 0 0-1.971-3.397l-1.333.586l-.002.001c-.406.18-.843.272-1.286.272a3.2 3.2 0 0 1-3.178-2.852v-.002l-.163-1.46a11.5 11.5 0 0 0-1.95-.193q-1.01.014-1.975.193l-.163 1.461A3.207 3.207 0 0 1 7.41 7.737l-1.336-.588a10.6 10.6 0 0 0-1.971 3.397l1.19.877a3.2 3.2 0 0 1 0 5.155l-1.19.878a10.6 10.6 0 0 0 1.97 3.403l1.345-.59a3.2 3.2 0 0 1 2.878.16a3.2 3.2 0 0 1 1.579 2.411v.005l.162 1.464c1.297.255 2.63.255 3.927 0l.162-1.467q.036-.332.138-.645"/></svg>
</template>

CSS

.icon-settings-28-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%2028%2028%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M14%209.5a4.5%204.5%200%201%200%200%209a4.5%204.5%200%200%200%200-9M11%2014a3%203%200%201%201%206%200a3%203%200%200%201-6%200m10.71%208.395l-1.728-.759a1.72%201.72%200%200%200-1.542.086c-.467.27-.765.747-.824%201.284l-.208%201.88a.92.92%200%200%201-.703.796a11.7%2011.7%200%200%201-5.412%200a.92.92%200%200%201-.702-.796l-.208-1.877a1.7%201.7%200%200%200-.838-1.281a1.7%201.7%200%200%200-1.526-.086l-1.728.759a.92.92%200%200%201-1.043-.215a12.1%2012.1%200%200%201-2.707-4.672a.92.92%200%200%201%20.334-1.016l1.527-1.128a1.7%201.7%200%200%200%200-2.74l-1.527-1.125a.92.92%200%200%201-.334-1.017A12.06%2012.06%200%200%201%205.25%205.821a.92.92%200%200%201%201.043-.214l1.72.757a1.707%201.707%200%200%200%202.371-1.376l.21-1.878a.92.92%200%200%201%20.715-.799q1.32-.294%202.704-.311c.902.01%201.8.115%202.68.311a.92.92%200%200%201%20.715.8l.209%201.878a1.7%201.7%200%200%200%201.688%201.518c.233%200%20.464-.049.68-.144l1.72-.757a.92.92%200%200%201%201.043.214a12.06%2012.06%200%200%201%202.708%204.667a.92.92%200%200%201-.333%201.016l-1.525%201.127c-.435.32-.698.829-.698%201.37c0%20.54.263%201.049.699%201.37l1.526%201.126c.316.234.45.642.334%201.017a12.1%2012.1%200%200%201-2.707%204.667a.92.92%200%200%201-1.043.215m-5.447-.198a3.16%203.16%200%200%201%201.425-1.773a3.22%203.22%200%200%201%202.896-.161l1.344.59a10.6%2010.6%200%200%200%201.97-3.398l-1.189-.877v-.001a3.2%203.2%200%200%201-1.309-2.578c0-1.027.497-1.98%201.307-2.576l.002-.001l1.187-.877a10.6%2010.6%200%200%200-1.971-3.397l-1.333.586l-.002.001c-.406.18-.843.272-1.286.272a3.2%203.2%200%200%201-3.178-2.852v-.002l-.163-1.46a11.5%2011.5%200%200%200-1.95-.193q-1.01.014-1.975.193l-.163%201.461A3.207%203.207%200%200%201%207.41%207.737l-1.336-.588a10.6%2010.6%200%200%200-1.971%203.397l1.19.877a3.2%203.2%200%200%201%200%205.155l-1.19.878a10.6%2010.6%200%200%200%201.97%203.403l1.345-.59a3.2%203.2%200%200%201%202.878.16a3.2%203.2%200%200%201%201.579%202.411v.005l.162%201.464c1.297.255%202.63.255%203.927%200l.162-1.467q.036-.332.138-.645%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%2028%2028%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M14%209.5a4.5%204.5%200%201%200%200%209a4.5%204.5%200%200%200%200-9M11%2014a3%203%200%201%201%206%200a3%203%200%200%201-6%200m10.71%208.395l-1.728-.759a1.72%201.72%200%200%200-1.542.086c-.467.27-.765.747-.824%201.284l-.208%201.88a.92.92%200%200%201-.703.796a11.7%2011.7%200%200%201-5.412%200a.92.92%200%200%201-.702-.796l-.208-1.877a1.7%201.7%200%200%200-.838-1.281a1.7%201.7%200%200%200-1.526-.086l-1.728.759a.92.92%200%200%201-1.043-.215a12.1%2012.1%200%200%201-2.707-4.672a.92.92%200%200%201%20.334-1.016l1.527-1.128a1.7%201.7%200%200%200%200-2.74l-1.527-1.125a.92.92%200%200%201-.334-1.017A12.06%2012.06%200%200%201%205.25%205.821a.92.92%200%200%201%201.043-.214l1.72.757a1.707%201.707%200%200%200%202.371-1.376l.21-1.878a.92.92%200%200%201%20.715-.799q1.32-.294%202.704-.311c.902.01%201.8.115%202.68.311a.92.92%200%200%201%20.715.8l.209%201.878a1.7%201.7%200%200%200%201.688%201.518c.233%200%20.464-.049.68-.144l1.72-.757a.92.92%200%200%201%201.043.214a12.06%2012.06%200%200%201%202.708%204.667a.92.92%200%200%201-.333%201.016l-1.525%201.127c-.435.32-.698.829-.698%201.37c0%20.54.263%201.049.699%201.37l1.526%201.126c.316.234.45.642.334%201.017a12.1%2012.1%200%200%201-2.707%204.667a.92.92%200%200%201-1.043.215m-5.447-.198a3.16%203.16%200%200%201%201.425-1.773a3.22%203.22%200%200%201%202.896-.161l1.344.59a10.6%2010.6%200%200%200%201.97-3.398l-1.189-.877v-.001a3.2%203.2%200%200%201-1.309-2.578c0-1.027.497-1.98%201.307-2.576l.002-.001l1.187-.877a10.6%2010.6%200%200%200-1.971-3.397l-1.333.586l-.002.001c-.406.18-.843.272-1.286.272a3.2%203.2%200%200%201-3.178-2.852v-.002l-.163-1.46a11.5%2011.5%200%200%200-1.95-.193q-1.01.014-1.975.193l-.163%201.461A3.207%203.207%200%200%201%207.41%207.737l-1.336-.588a10.6%2010.6%200%200%200-1.971%203.397l1.19.877a3.2%203.2%200%200%201%200%205.155l-1.19.878a10.6%2010.6%200%200%200%201.97%203.403l1.345-.59a3.2%203.2%200%200%201%202.878.16a3.2%203.2%200%200%201%201.579%202.411v.005l.162%201.464c1.297.255%202.63.255%203.927%200l.162-1.467q.036-.332.138-.645%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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