settings icon
settings-outline from IonIcons by Ben Sperry · Outline · MIT Free for personal and commercial use.
- Name
- settings-outline
- Set
- IonIcons
- Style
- Outline
- 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"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M262.29 192.31a64 64 0 1 0 57.4 57.4a64.13 64.13 0 0 0-57.4-57.4M416.39 256a154 154 0 0 1-1.53 20.79l45.21 35.46a10.81 10.81 0 0 1 2.45 13.75l-42.77 74a10.81 10.81 0 0 1-13.14 4.59l-44.9-18.08a16.11 16.11 0 0 0-15.17 1.75A164.5 164.5 0 0 1 325 400.8a15.94 15.94 0 0 0-8.82 12.14l-6.73 47.89a11.08 11.08 0 0 1-10.68 9.17h-85.54a11.11 11.11 0 0 1-10.69-8.87l-6.72-47.82a16.07 16.07 0 0 0-9-12.22a155 155 0 0 1-21.46-12.57a16 16 0 0 0-15.11-1.71l-44.89 18.07a10.81 10.81 0 0 1-13.14-4.58l-42.77-74a10.8 10.8 0 0 1 2.45-13.75l38.21-30a16.05 16.05 0 0 0 6-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 0 0-6.07-13.94l-38.19-30A10.81 10.81 0 0 1 49.48 186l42.77-74a10.81 10.81 0 0 1 13.14-4.59l44.9 18.08a16.11 16.11 0 0 0 15.17-1.75A164.5 164.5 0 0 1 187 111.2a15.94 15.94 0 0 0 8.82-12.14l6.73-47.89A11.08 11.08 0 0 1 213.23 42h85.54a11.11 11.11 0 0 1 10.69 8.87l6.72 47.82a16.07 16.07 0 0 0 9 12.22a155 155 0 0 1 21.46 12.57a16 16 0 0 0 15.11 1.71l44.89-18.07a10.81 10.81 0 0 1 13.14 4.58l42.77 74a10.8 10.8 0 0 1-2.45 13.75l-38.21 30a16.05 16.05 0 0 0-6.05 14.08c.33 4.14.55 8.3.55 12.47"/></svg>
React
import type { SVGProps } from "react";
export function IonSettingsOutline(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="32" d="M262.29 192.31a64 64 0 1 0 57.4 57.4a64.13 64.13 0 0 0-57.4-57.4M416.39 256a154 154 0 0 1-1.53 20.79l45.21 35.46a10.81 10.81 0 0 1 2.45 13.75l-42.77 74a10.81 10.81 0 0 1-13.14 4.59l-44.9-18.08a16.11 16.11 0 0 0-15.17 1.75A164.5 164.5 0 0 1 325 400.8a15.94 15.94 0 0 0-8.82 12.14l-6.73 47.89a11.08 11.08 0 0 1-10.68 9.17h-85.54a11.11 11.11 0 0 1-10.69-8.87l-6.72-47.82a16.07 16.07 0 0 0-9-12.22a155 155 0 0 1-21.46-12.57a16 16 0 0 0-15.11-1.71l-44.89 18.07a10.81 10.81 0 0 1-13.14-4.58l-42.77-74a10.8 10.8 0 0 1 2.45-13.75l38.21-30a16.05 16.05 0 0 0 6-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 0 0-6.07-13.94l-38.19-30A10.81 10.81 0 0 1 49.48 186l42.77-74a10.81 10.81 0 0 1 13.14-4.59l44.9 18.08a16.11 16.11 0 0 0 15.17-1.75A164.5 164.5 0 0 1 187 111.2a15.94 15.94 0 0 0 8.82-12.14l6.73-47.89A11.08 11.08 0 0 1 213.23 42h85.54a11.11 11.11 0 0 1 10.69 8.87l6.72 47.82a16.07 16.07 0 0 0 9 12.22a155 155 0 0 1 21.46 12.57a16 16 0 0 0 15.11 1.71l44.89-18.07a10.81 10.81 0 0 1 13.14 4.58l42.77 74a10.8 10.8 0 0 1-2.45 13.75l-38.21 30a16.05 16.05 0 0 0-6.05 14.08c.33 4.14.55 8.3.55 12.47"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M262.29 192.31a64 64 0 1 0 57.4 57.4a64.13 64.13 0 0 0-57.4-57.4M416.39 256a154 154 0 0 1-1.53 20.79l45.21 35.46a10.81 10.81 0 0 1 2.45 13.75l-42.77 74a10.81 10.81 0 0 1-13.14 4.59l-44.9-18.08a16.11 16.11 0 0 0-15.17 1.75A164.5 164.5 0 0 1 325 400.8a15.94 15.94 0 0 0-8.82 12.14l-6.73 47.89a11.08 11.08 0 0 1-10.68 9.17h-85.54a11.11 11.11 0 0 1-10.69-8.87l-6.72-47.82a16.07 16.07 0 0 0-9-12.22a155 155 0 0 1-21.46-12.57a16 16 0 0 0-15.11-1.71l-44.89 18.07a10.81 10.81 0 0 1-13.14-4.58l-42.77-74a10.8 10.8 0 0 1 2.45-13.75l38.21-30a16.05 16.05 0 0 0 6-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16 16 0 0 0-6.07-13.94l-38.19-30A10.81 10.81 0 0 1 49.48 186l42.77-74a10.81 10.81 0 0 1 13.14-4.59l44.9 18.08a16.11 16.11 0 0 0 15.17-1.75A164.5 164.5 0 0 1 187 111.2a15.94 15.94 0 0 0 8.82-12.14l6.73-47.89A11.08 11.08 0 0 1 213.23 42h85.54a11.11 11.11 0 0 1 10.69 8.87l6.72 47.82a16.07 16.07 0 0 0 9 12.22a155 155 0 0 1 21.46 12.57a16 16 0 0 0 15.11 1.71l44.89-18.07a10.81 10.81 0 0 1 13.14 4.58l42.77 74a10.8 10.8 0 0 1-2.45 13.75l-38.21 30a16.05 16.05 0 0 0-6.05 14.08c.33 4.14.55 8.3.55 12.47"/></svg> </template>
CSS
.icon-settings-outline {
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%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2232%22%20d%3D%22M262.29%20192.31a64%2064%200%201%200%2057.4%2057.4a64.13%2064.13%200%200%200-57.4-57.4M416.39%20256a154%20154%200%200%201-1.53%2020.79l45.21%2035.46a10.81%2010.81%200%200%201%202.45%2013.75l-42.77%2074a10.81%2010.81%200%200%201-13.14%204.59l-44.9-18.08a16.11%2016.11%200%200%200-15.17%201.75A164.5%20164.5%200%200%201%20325%20400.8a15.94%2015.94%200%200%200-8.82%2012.14l-6.73%2047.89a11.08%2011.08%200%200%201-10.68%209.17h-85.54a11.11%2011.11%200%200%201-10.69-8.87l-6.72-47.82a16.07%2016.07%200%200%200-9-12.22a155%20155%200%200%201-21.46-12.57a16%2016%200%200%200-15.11-1.71l-44.89%2018.07a10.81%2010.81%200%200%201-13.14-4.58l-42.77-74a10.8%2010.8%200%200%201%202.45-13.75l38.21-30a16.05%2016.05%200%200%200%206-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16%2016%200%200%200-6.07-13.94l-38.19-30A10.81%2010.81%200%200%201%2049.48%20186l42.77-74a10.81%2010.81%200%200%201%2013.14-4.59l44.9%2018.08a16.11%2016.11%200%200%200%2015.17-1.75A164.5%20164.5%200%200%201%20187%20111.2a15.94%2015.94%200%200%200%208.82-12.14l6.73-47.89A11.08%2011.08%200%200%201%20213.23%2042h85.54a11.11%2011.11%200%200%201%2010.69%208.87l6.72%2047.82a16.07%2016.07%200%200%200%209%2012.22a155%20155%200%200%201%2021.46%2012.57a16%2016%200%200%200%2015.11%201.71l44.89-18.07a10.81%2010.81%200%200%201%2013.14%204.58l42.77%2074a10.8%2010.8%200%200%201-2.45%2013.75l-38.21%2030a16.05%2016.05%200%200%200-6.05%2014.08c.33%204.14.55%208.3.55%2012.47%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%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2232%22%20d%3D%22M262.29%20192.31a64%2064%200%201%200%2057.4%2057.4a64.13%2064.13%200%200%200-57.4-57.4M416.39%20256a154%20154%200%200%201-1.53%2020.79l45.21%2035.46a10.81%2010.81%200%200%201%202.45%2013.75l-42.77%2074a10.81%2010.81%200%200%201-13.14%204.59l-44.9-18.08a16.11%2016.11%200%200%200-15.17%201.75A164.5%20164.5%200%200%201%20325%20400.8a15.94%2015.94%200%200%200-8.82%2012.14l-6.73%2047.89a11.08%2011.08%200%200%201-10.68%209.17h-85.54a11.11%2011.11%200%200%201-10.69-8.87l-6.72-47.82a16.07%2016.07%200%200%200-9-12.22a155%20155%200%200%201-21.46-12.57a16%2016%200%200%200-15.11-1.71l-44.89%2018.07a10.81%2010.81%200%200%201-13.14-4.58l-42.77-74a10.8%2010.8%200%200%201%202.45-13.75l38.21-30a16.05%2016.05%200%200%200%206-14.08c-.36-4.17-.58-8.33-.58-12.5s.21-8.27.58-12.35a16%2016%200%200%200-6.07-13.94l-38.19-30A10.81%2010.81%200%200%201%2049.48%20186l42.77-74a10.81%2010.81%200%200%201%2013.14-4.59l44.9%2018.08a16.11%2016.11%200%200%200%2015.17-1.75A164.5%20164.5%200%200%201%20187%20111.2a15.94%2015.94%200%200%200%208.82-12.14l6.73-47.89A11.08%2011.08%200%200%201%20213.23%2042h85.54a11.11%2011.11%200%200%201%2010.69%208.87l6.72%2047.82a16.07%2016.07%200%200%200%209%2012.22a155%20155%200%200%201%2021.46%2012.57a16%2016%200%200%200%2015.11%201.71l44.89-18.07a10.81%2010.81%200%200%201%2013.14%204.58l42.77%2074a10.8%2010.8%200%200%201-2.45%2013.75l-38.21%2030a16.05%2016.05%200%200%200-6.05%2014.08c.33%204.14.55%208.3.55%2012.47%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/settings-outline.svg?color=%231a73e8&size=48
