settings icon
settings from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.
- Name
- settings
- Set
- IonIcons
- Style
- Regular
- Viewbox
- 512×512
- License
- MIT
2 other variants in IonIcons
The same icon in other sets
settingsCarbonsettingsCodiconssettings-fillEva IconssettingsFeather Iconssettings-16-filledFluent UI System Iconssettings-16Fluent UI System Color IconssettingsIconoirsettingsLucidesettingsMage 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 512 512"><circle cx="256" cy="256" r="48" fill="currentColor"/><path fill="currentColor" d="m470.39 300l-.47-.38l-31.56-24.75a16.11 16.11 0 0 1-6.1-13.33v-11.56a16 16 0 0 1 6.11-13.22L469.92 212l.47-.38a26.68 26.68 0 0 0 5.9-34.06l-42.71-73.9a1.6 1.6 0 0 1-.13-.22A26.86 26.86 0 0 0 401 92.14l-.35.13l-37.1 14.93a15.94 15.94 0 0 1-14.47-1.29q-4.92-3.1-10-5.86a15.94 15.94 0 0 1-8.19-11.82l-5.59-39.59l-.12-.72A27.22 27.22 0 0 0 298.76 26h-85.52a26.92 26.92 0 0 0-26.45 22.39l-.09.56l-5.57 39.67a16 16 0 0 1-8.13 11.82a175 175 0 0 0-10 5.82a15.92 15.92 0 0 1-14.43 1.27l-37.13-15l-.35-.14a26.87 26.87 0 0 0-32.48 11.34l-.13.22l-42.77 73.95a26.71 26.71 0 0 0 5.9 34.1l.47.38l31.56 24.75a16.11 16.11 0 0 1 6.1 13.33v11.56a16 16 0 0 1-6.11 13.22L42.08 300l-.47.38a26.68 26.68 0 0 0-5.9 34.06l42.71 73.9a1.6 1.6 0 0 1 .13.22a26.86 26.86 0 0 0 32.45 11.3l.35-.13l37.07-14.93a15.94 15.94 0 0 1 14.47 1.29q4.92 3.11 10 5.86a15.94 15.94 0 0 1 8.19 11.82l5.56 39.59l.12.72A27.22 27.22 0 0 0 213.24 486h85.52a26.92 26.92 0 0 0 26.45-22.39l.09-.56l5.57-39.67a16 16 0 0 1 8.18-11.82c3.42-1.84 6.76-3.79 10-5.82a15.92 15.92 0 0 1 14.43-1.27l37.13 14.95l.35.14a26.85 26.85 0 0 0 32.48-11.34a3 3 0 0 1 .13-.22l42.71-73.89a26.7 26.7 0 0 0-5.89-34.11m-134.48-40.24a80 80 0 1 1-83.66-83.67a80.21 80.21 0 0 1 83.66 83.67"/></svg>
React
import type { SVGProps } from "react";
export function IonSettings(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><circle cx="256" cy="256" r="48" fill="currentColor"/><path fill="currentColor" d="m470.39 300l-.47-.38l-31.56-24.75a16.11 16.11 0 0 1-6.1-13.33v-11.56a16 16 0 0 1 6.11-13.22L469.92 212l.47-.38a26.68 26.68 0 0 0 5.9-34.06l-42.71-73.9a1.6 1.6 0 0 1-.13-.22A26.86 26.86 0 0 0 401 92.14l-.35.13l-37.1 14.93a15.94 15.94 0 0 1-14.47-1.29q-4.92-3.1-10-5.86a15.94 15.94 0 0 1-8.19-11.82l-5.59-39.59l-.12-.72A27.22 27.22 0 0 0 298.76 26h-85.52a26.92 26.92 0 0 0-26.45 22.39l-.09.56l-5.57 39.67a16 16 0 0 1-8.13 11.82a175 175 0 0 0-10 5.82a15.92 15.92 0 0 1-14.43 1.27l-37.13-15l-.35-.14a26.87 26.87 0 0 0-32.48 11.34l-.13.22l-42.77 73.95a26.71 26.71 0 0 0 5.9 34.1l.47.38l31.56 24.75a16.11 16.11 0 0 1 6.1 13.33v11.56a16 16 0 0 1-6.11 13.22L42.08 300l-.47.38a26.68 26.68 0 0 0-5.9 34.06l42.71 73.9a1.6 1.6 0 0 1 .13.22a26.86 26.86 0 0 0 32.45 11.3l.35-.13l37.07-14.93a15.94 15.94 0 0 1 14.47 1.29q4.92 3.11 10 5.86a15.94 15.94 0 0 1 8.19 11.82l5.56 39.59l.12.72A27.22 27.22 0 0 0 213.24 486h85.52a26.92 26.92 0 0 0 26.45-22.39l.09-.56l5.57-39.67a16 16 0 0 1 8.18-11.82c3.42-1.84 6.76-3.79 10-5.82a15.92 15.92 0 0 1 14.43-1.27l37.13 14.95l.35.14a26.85 26.85 0 0 0 32.48-11.34a3 3 0 0 1 .13-.22l42.71-73.89a26.7 26.7 0 0 0-5.89-34.11m-134.48-40.24a80 80 0 1 1-83.66-83.67a80.21 80.21 0 0 1 83.66 83.67"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><circle cx="256" cy="256" r="48" fill="currentColor"/><path fill="currentColor" d="m470.39 300l-.47-.38l-31.56-24.75a16.11 16.11 0 0 1-6.1-13.33v-11.56a16 16 0 0 1 6.11-13.22L469.92 212l.47-.38a26.68 26.68 0 0 0 5.9-34.06l-42.71-73.9a1.6 1.6 0 0 1-.13-.22A26.86 26.86 0 0 0 401 92.14l-.35.13l-37.1 14.93a15.94 15.94 0 0 1-14.47-1.29q-4.92-3.1-10-5.86a15.94 15.94 0 0 1-8.19-11.82l-5.59-39.59l-.12-.72A27.22 27.22 0 0 0 298.76 26h-85.52a26.92 26.92 0 0 0-26.45 22.39l-.09.56l-5.57 39.67a16 16 0 0 1-8.13 11.82a175 175 0 0 0-10 5.82a15.92 15.92 0 0 1-14.43 1.27l-37.13-15l-.35-.14a26.87 26.87 0 0 0-32.48 11.34l-.13.22l-42.77 73.95a26.71 26.71 0 0 0 5.9 34.1l.47.38l31.56 24.75a16.11 16.11 0 0 1 6.1 13.33v11.56a16 16 0 0 1-6.11 13.22L42.08 300l-.47.38a26.68 26.68 0 0 0-5.9 34.06l42.71 73.9a1.6 1.6 0 0 1 .13.22a26.86 26.86 0 0 0 32.45 11.3l.35-.13l37.07-14.93a15.94 15.94 0 0 1 14.47 1.29q4.92 3.11 10 5.86a15.94 15.94 0 0 1 8.19 11.82l5.56 39.59l.12.72A27.22 27.22 0 0 0 213.24 486h85.52a26.92 26.92 0 0 0 26.45-22.39l.09-.56l5.57-39.67a16 16 0 0 1 8.18-11.82c3.42-1.84 6.76-3.79 10-5.82a15.92 15.92 0 0 1 14.43-1.27l37.13 14.95l.35.14a26.85 26.85 0 0 0 32.48-11.34a3 3 0 0 1 .13-.22l42.71-73.89a26.7 26.7 0 0 0-5.89-34.11m-134.48-40.24a80 80 0 1 1-83.66-83.67a80.21 80.21 0 0 1 83.66 83.67"/></svg> </template>
CSS
.icon-settings {
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%20512%20512%22%3E%3Ccircle%20cx%3D%22256%22%20cy%3D%22256%22%20r%3D%2248%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m470.39%20300l-.47-.38l-31.56-24.75a16.11%2016.11%200%200%201-6.1-13.33v-11.56a16%2016%200%200%201%206.11-13.22L469.92%20212l.47-.38a26.68%2026.68%200%200%200%205.9-34.06l-42.71-73.9a1.6%201.6%200%200%201-.13-.22A26.86%2026.86%200%200%200%20401%2092.14l-.35.13l-37.1%2014.93a15.94%2015.94%200%200%201-14.47-1.29q-4.92-3.1-10-5.86a15.94%2015.94%200%200%201-8.19-11.82l-5.59-39.59l-.12-.72A27.22%2027.22%200%200%200%20298.76%2026h-85.52a26.92%2026.92%200%200%200-26.45%2022.39l-.09.56l-5.57%2039.67a16%2016%200%200%201-8.13%2011.82a175%20175%200%200%200-10%205.82a15.92%2015.92%200%200%201-14.43%201.27l-37.13-15l-.35-.14a26.87%2026.87%200%200%200-32.48%2011.34l-.13.22l-42.77%2073.95a26.71%2026.71%200%200%200%205.9%2034.1l.47.38l31.56%2024.75a16.11%2016.11%200%200%201%206.1%2013.33v11.56a16%2016%200%200%201-6.11%2013.22L42.08%20300l-.47.38a26.68%2026.68%200%200%200-5.9%2034.06l42.71%2073.9a1.6%201.6%200%200%201%20.13.22a26.86%2026.86%200%200%200%2032.45%2011.3l.35-.13l37.07-14.93a15.94%2015.94%200%200%201%2014.47%201.29q4.92%203.11%2010%205.86a15.94%2015.94%200%200%201%208.19%2011.82l5.56%2039.59l.12.72A27.22%2027.22%200%200%200%20213.24%20486h85.52a26.92%2026.92%200%200%200%2026.45-22.39l.09-.56l5.57-39.67a16%2016%200%200%201%208.18-11.82c3.42-1.84%206.76-3.79%2010-5.82a15.92%2015.92%200%200%201%2014.43-1.27l37.13%2014.95l.35.14a26.85%2026.85%200%200%200%2032.48-11.34a3%203%200%200%201%20.13-.22l42.71-73.89a26.7%2026.7%200%200%200-5.89-34.11m-134.48-40.24a80%2080%200%201%201-83.66-83.67a80.21%2080.21%200%200%201%2083.66%2083.67%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%20512%20512%22%3E%3Ccircle%20cx%3D%22256%22%20cy%3D%22256%22%20r%3D%2248%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m470.39%20300l-.47-.38l-31.56-24.75a16.11%2016.11%200%200%201-6.1-13.33v-11.56a16%2016%200%200%201%206.11-13.22L469.92%20212l.47-.38a26.68%2026.68%200%200%200%205.9-34.06l-42.71-73.9a1.6%201.6%200%200%201-.13-.22A26.86%2026.86%200%200%200%20401%2092.14l-.35.13l-37.1%2014.93a15.94%2015.94%200%200%201-14.47-1.29q-4.92-3.1-10-5.86a15.94%2015.94%200%200%201-8.19-11.82l-5.59-39.59l-.12-.72A27.22%2027.22%200%200%200%20298.76%2026h-85.52a26.92%2026.92%200%200%200-26.45%2022.39l-.09.56l-5.57%2039.67a16%2016%200%200%201-8.13%2011.82a175%20175%200%200%200-10%205.82a15.92%2015.92%200%200%201-14.43%201.27l-37.13-15l-.35-.14a26.87%2026.87%200%200%200-32.48%2011.34l-.13.22l-42.77%2073.95a26.71%2026.71%200%200%200%205.9%2034.1l.47.38l31.56%2024.75a16.11%2016.11%200%200%201%206.1%2013.33v11.56a16%2016%200%200%201-6.11%2013.22L42.08%20300l-.47.38a26.68%2026.68%200%200%200-5.9%2034.06l42.71%2073.9a1.6%201.6%200%200%201%20.13.22a26.86%2026.86%200%200%200%2032.45%2011.3l.35-.13l37.07-14.93a15.94%2015.94%200%200%201%2014.47%201.29q4.92%203.11%2010%205.86a15.94%2015.94%200%200%201%208.19%2011.82l5.56%2039.59l.12.72A27.22%2027.22%200%200%200%20213.24%20486h85.52a26.92%2026.92%200%200%200%2026.45-22.39l.09-.56l5.57-39.67a16%2016%200%200%201%208.18-11.82c3.42-1.84%206.76-3.79%2010-5.82a15.92%2015.92%200%200%201%2014.43-1.27l37.13%2014.95l.35.14a26.85%2026.85%200%200%200%2032.48-11.34a3%203%200%200%201%20.13-.22l42.71-73.89a26.7%2026.7%200%200%200-5.89-34.11m-134.48-40.24a80%2080%200%201%201-83.66-83.67a80.21%2080.21%200%200%201%2083.66%2083.67%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/settings.svg?color=%231a73e8&size=48
