settings icon
settings-fill from Mage Icons by MageIcons · Fill · Apache-2.0 Free for personal and commercial use.
- Name
- settings-fill
- Set
- Mage Icons
- Style
- Fill
- Viewbox
- 24×24
- License
- Apache 2.0
1 other variant in Mage Icons
The same icon in other sets
settingsCarbonsettingsCodiconssettings-fillEva IconssettingsFeather Iconssettings-16-filledFluent UI System Iconssettings-16Fluent UI System Color IconssettingsIconoirsettingsIonIconssettingsLucidesettingsMaterial 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 24 24"><path fill="currentColor" d="m21.51 14.59l-1.25-1.32a7.9 7.9 0 0 0-.06-2.9l1.22-1.32a.76.76 0 0 0 .14-.79a10.3 10.3 0 0 0-2.2-3.35a.74.74 0 0 0-.72-.19l-1.84.47a8.5 8.5 0 0 0-1.83-1l-.45-1.72a.73.73 0 0 0-.59-.55a10 10 0 0 0-1.89-.17a9.4 9.4 0 0 0-2.35.31a.73.73 0 0 0-.53.53l-.48 1.77a8.2 8.2 0 0 0-1.52.88l-1.82-.45a.73.73 0 0 0-.72.21a10 10 0 0 0-2.23 3.62a.76.76 0 0 0 .16.77l1.26 1.31q-.096.631-.1 1.27c0 .3 0 .6.05.9l-1.31 1.46a.75.75 0 0 0-.16.73a10 10 0 0 0 2 3.59a.75.75 0 0 0 .76.24l1.72-.44a8 8 0 0 0 2 1.23l.5 1.79a.77.77 0 0 0 .56.53c.721.163 1.459.247 2.2.25q.886-.01 1.76-.17a.75.75 0 0 0 .59-.53l.47-1.69a8.1 8.1 0 0 0 2.38-1.34l1.76.4a.74.74 0 0 0 .73-.24a10.1 10.1 0 0 0 2-3.34a.76.76 0 0 0-.21-.75m-9.39 1.27a3.81 3.81 0 1 1-.021-7.619a3.81 3.81 0 0 1 .02 7.62"/></svg>
React
import type { SVGProps } from "react";
export function MageSettingsFill(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m21.51 14.59l-1.25-1.32a7.9 7.9 0 0 0-.06-2.9l1.22-1.32a.76.76 0 0 0 .14-.79a10.3 10.3 0 0 0-2.2-3.35a.74.74 0 0 0-.72-.19l-1.84.47a8.5 8.5 0 0 0-1.83-1l-.45-1.72a.73.73 0 0 0-.59-.55a10 10 0 0 0-1.89-.17a9.4 9.4 0 0 0-2.35.31a.73.73 0 0 0-.53.53l-.48 1.77a8.2 8.2 0 0 0-1.52.88l-1.82-.45a.73.73 0 0 0-.72.21a10 10 0 0 0-2.23 3.62a.76.76 0 0 0 .16.77l1.26 1.31q-.096.631-.1 1.27c0 .3 0 .6.05.9l-1.31 1.46a.75.75 0 0 0-.16.73a10 10 0 0 0 2 3.59a.75.75 0 0 0 .76.24l1.72-.44a8 8 0 0 0 2 1.23l.5 1.79a.77.77 0 0 0 .56.53c.721.163 1.459.247 2.2.25q.886-.01 1.76-.17a.75.75 0 0 0 .59-.53l.47-1.69a8.1 8.1 0 0 0 2.38-1.34l1.76.4a.74.74 0 0 0 .73-.24a10.1 10.1 0 0 0 2-3.34a.76.76 0 0 0-.21-.75m-9.39 1.27a3.81 3.81 0 1 1-.021-7.619a3.81 3.81 0 0 1 .02 7.62"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m21.51 14.59l-1.25-1.32a7.9 7.9 0 0 0-.06-2.9l1.22-1.32a.76.76 0 0 0 .14-.79a10.3 10.3 0 0 0-2.2-3.35a.74.74 0 0 0-.72-.19l-1.84.47a8.5 8.5 0 0 0-1.83-1l-.45-1.72a.73.73 0 0 0-.59-.55a10 10 0 0 0-1.89-.17a9.4 9.4 0 0 0-2.35.31a.73.73 0 0 0-.53.53l-.48 1.77a8.2 8.2 0 0 0-1.52.88l-1.82-.45a.73.73 0 0 0-.72.21a10 10 0 0 0-2.23 3.62a.76.76 0 0 0 .16.77l1.26 1.31q-.096.631-.1 1.27c0 .3 0 .6.05.9l-1.31 1.46a.75.75 0 0 0-.16.73a10 10 0 0 0 2 3.59a.75.75 0 0 0 .76.24l1.72-.44a8 8 0 0 0 2 1.23l.5 1.79a.77.77 0 0 0 .56.53c.721.163 1.459.247 2.2.25q.886-.01 1.76-.17a.75.75 0 0 0 .59-.53l.47-1.69a8.1 8.1 0 0 0 2.38-1.34l1.76.4a.74.74 0 0 0 .73-.24a10.1 10.1 0 0 0 2-3.34a.76.76 0 0 0-.21-.75m-9.39 1.27a3.81 3.81 0 1 1-.021-7.619a3.81 3.81 0 0 1 .02 7.62"/></svg> </template>
CSS
.icon-settings-fill {
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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m21.51%2014.59l-1.25-1.32a7.9%207.9%200%200%200-.06-2.9l1.22-1.32a.76.76%200%200%200%20.14-.79a10.3%2010.3%200%200%200-2.2-3.35a.74.74%200%200%200-.72-.19l-1.84.47a8.5%208.5%200%200%200-1.83-1l-.45-1.72a.73.73%200%200%200-.59-.55a10%2010%200%200%200-1.89-.17a9.4%209.4%200%200%200-2.35.31a.73.73%200%200%200-.53.53l-.48%201.77a8.2%208.2%200%200%200-1.52.88l-1.82-.45a.73.73%200%200%200-.72.21a10%2010%200%200%200-2.23%203.62a.76.76%200%200%200%20.16.77l1.26%201.31q-.096.631-.1%201.27c0%20.3%200%20.6.05.9l-1.31%201.46a.75.75%200%200%200-.16.73a10%2010%200%200%200%202%203.59a.75.75%200%200%200%20.76.24l1.72-.44a8%208%200%200%200%202%201.23l.5%201.79a.77.77%200%200%200%20.56.53c.721.163%201.459.247%202.2.25q.886-.01%201.76-.17a.75.75%200%200%200%20.59-.53l.47-1.69a8.1%208.1%200%200%200%202.38-1.34l1.76.4a.74.74%200%200%200%20.73-.24a10.1%2010.1%200%200%200%202-3.34a.76.76%200%200%200-.21-.75m-9.39%201.27a3.81%203.81%200%201%201-.021-7.619a3.81%203.81%200%200%201%20.02%207.62%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m21.51%2014.59l-1.25-1.32a7.9%207.9%200%200%200-.06-2.9l1.22-1.32a.76.76%200%200%200%20.14-.79a10.3%2010.3%200%200%200-2.2-3.35a.74.74%200%200%200-.72-.19l-1.84.47a8.5%208.5%200%200%200-1.83-1l-.45-1.72a.73.73%200%200%200-.59-.55a10%2010%200%200%200-1.89-.17a9.4%209.4%200%200%200-2.35.31a.73.73%200%200%200-.53.53l-.48%201.77a8.2%208.2%200%200%200-1.52.88l-1.82-.45a.73.73%200%200%200-.72.21a10%2010%200%200%200-2.23%203.62a.76.76%200%200%200%20.16.77l1.26%201.31q-.096.631-.1%201.27c0%20.3%200%20.6.05.9l-1.31%201.46a.75.75%200%200%200-.16.73a10%2010%200%200%200%202%203.59a.75.75%200%200%200%20.76.24l1.72-.44a8%208%200%200%200%202%201.23l.5%201.79a.77.77%200%200%200%20.56.53c.721.163%201.459.247%202.2.25q.886-.01%201.76-.17a.75.75%200%200%200%20.59-.53l.47-1.69a8.1%208.1%200%200%200%202.38-1.34l1.76.4a.74.74%200%200%200%20.73-.24a10.1%2010.1%200%200%200%202-3.34a.76.76%200%200%200-.21-.75m-9.39%201.27a3.81%203.81%200%201%201-.021-7.619a3.81%203.81%200%200%201%20.02%207.62%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/mage/settings-fill.svg?color=%231a73e8&size=48
