Home/Libraries/Cuida Icons (Iconify)/settings-outline

Cuida Icons (Iconify)

SettingsOutline

License: Apache-2.0Commercial Safe

ICON SIZE

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 24 24"><g class="settings-outline"><g fill="#818cf8" fill-rule="evenodd" class="Vector" clip-rule="evenodd"><path d="M8.882 4.086C8.882 2.934 9.816 2 10.968 2h2.261c1.19 0 2.153.964 2.153 2.153v.028a2.09 2.09 0 0 1 2.949.008l1.6 1.6c.776.776.834 2 .17 2.844A2.154 2.154 0 0 1 22 10.77v2.26a2.086 2.086 0 0 1-2.086 2.087h-.089a.12.12 0 0 0-.034.077l.114.114a2.184 2.184 0 0 1 0 3.088l-1.508 1.508c-.83.83-2.161.852-3.018.067A2.153 2.153 0 0 1 13.229 22h-2.261a2.085 2.085 0 0 1-2.086-2.085v-.041l-.056.057a2.15 2.15 0 0 1-3.038 0l-1.6-1.6a2.09 2.09 0 0 1 0-2.956l.042-.041l.003-.004l.005-.02a.2.2 0 0 0-.014-.096a.2.2 0 0 0-.064-.085l-.019-.01l-.001-.001h-.055A2.085 2.085 0 0 1 2 13.032v-2.261c0-1.15.902-2.09 2.036-2.15a2.053 2.053 0 0 1 .126-2.766l1.693-1.693a2.053 2.053 0 0 1 2.904 0l.046.047h.01a.12.12 0 0 0 .068-.034zM10.968 4a.086.086 0 0 0-.086.086v.108c0 .88-.58 1.574-1.288 1.86c-.705.286-1.583.189-2.191-.419l-.059-.058a.053.053 0 0 0-.074 0L5.577 7.27a.053.053 0 0 0 0 .074l.147.148c.554.553.646 1.357.372 2.002c-.267.629-.893 1.124-1.667 1.124h-.276A.153.153 0 0 0 4 10.77v2.262c0 .047.038.086.085.086h.055c.913 0 1.63.603 1.932 1.332c.304.734.211 1.659-.428 2.298l-.041.041a.09.09 0 0 0 0 .128l1.6 1.6a.15.15 0 0 0 .208 0l.143-.143c.577-.577 1.41-.678 2.084-.41c.686.271 1.244.942 1.244 1.788v.163c0 .047.039.085.086.085h2.261a.153.153 0 0 0 .153-.153v-.277c0-.774.495-1.399 1.124-1.666c.645-.274 1.448-.182 2.002.372l.215.215a.184.184 0 0 0 .26 0l1.508-1.508a.184.184 0 0 0 0-.26l-.126-.126c-.608-.608-.705-1.486-.42-2.19c.287-.708.981-1.29 1.86-1.29h.11a.086.086 0 0 0 .085-.085V10.77a.153.153 0 0 0-.153-.153h-.332c-.74 0-1.34-.473-1.593-1.08a1.73 1.73 0 0 1 .362-1.894l.232-.232a.15.15 0 0 0 0-.21l-1.6-1.599a.09.09 0 0 0-.127 0l-.13.131c-.586.585-1.435.674-2.11.38c-.65-.281-1.167-.93-1.167-1.738v-.223A.153.153 0 0 0 13.23 4h-2.261Z"/><path d="M15.059 12a3.059 3.059 0 1 1-6.118 0a3.059 3.059 0 0 1 6.118 0m-3.06 1.059a1.059 1.059 0 1 0 0-2.118a1.059 1.059 0 0 0 0 2.118"/></g></g></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. SettingsOutlineIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **Apache-2.0** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.