Home/Libraries/Material Symbols (Iconify)/auto-mode

Material Symbols (Iconify)

AutoMode

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"><path fill="#818cf8" d="m12 17l-1.55-3.45L7 12l3.45-1.575L12 7l1.575 3.425L17 12l-3.425 1.55L12 17Zm0 6q-2.7 0-5.063-1.238T3 18.3V21H1v-6h6v2H4.55q1.275 1.875 3.238 2.938T12 21q2.875 0 5.213-1.65t3.287-4.375l1.95.45q-1.125 3.4-4 5.488T12 23ZM1.05 11q.175-1.675.8-3.213T3.575 4.95L5 6.375Q4.2 7.4 3.7 8.563T3.075 11H1.05ZM6.4 4.975L4.975 3.55q1.325-1.1 2.85-1.738T11 1.05v2q-1.275.125-2.425.625T6.4 4.975Zm11.225 0q-1.025-.8-2.187-1.3T13 3.05v-2q1.675.15 3.213.775T19.05 3.55l-1.425 1.425ZM20.95 11q-.125-1.275-.625-2.438t-1.3-2.187L20.45 4.95q1.1 1.3 1.725 2.838T22.95 11h-2Z"/></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. AutoModeIcon.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.