Home/Libraries/Fluent Emoji Flat (Iconify)/control-knobs

Fluent Emoji Flat (Iconify)

ControlKnobs

License: MITCommercial 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 32 32"><g fill="none"><path fill="#818cf8" d="M26.27 2H5.75C3.68 2 2 3.68 2 5.75v20.48c0 2.07 1.68 3.75 3.75 3.75h20.52c2.07 0 3.75-1.68 3.75-3.75V5.75c0-2.07-1.68-3.75-3.75-3.75"/><path fill="#818cf8" fill-rule="evenodd" d="M18.17 11.09c0 2.49 2.03 4.52 4.52 4.52s4.52-2.03 4.52-4.52s-2.03-4.52-4.52-4.52s-4.52 2.03-4.52 4.52M6.22 14.28c.88.88 2.04 1.32 3.2 1.32s2.31-.44 3.19-1.32a4.527 4.527 0 0 0 0-6.39a4.527 4.527 0 0 0-6.39 0a4.527 4.527 0 0 0 0 6.39m3.2 13.22c-2.49 0-4.52-2.03-4.52-4.52s2.03-4.52 4.52-4.52s4.52 2.03 4.52 4.52s-2.03 4.52-4.52 4.52m10.07-1.32c.88.88 2.04 1.32 3.2 1.32c1.15 0 2.31-.44 3.19-1.32a4.527 4.527 0 0 0 0-6.39a4.527 4.527 0 0 0-6.39 0a4.527 4.527 0 0 0 0 6.39" clip-rule="evenodd"/><path fill="#818cf8" fill-rule="evenodd" d="M12.83 11.09a3.41 3.41 0 1 1-6.82 0a3.41 3.41 0 0 1 6.82 0m13.27 0a3.41 3.41 0 1 1-6.82 0a3.41 3.41 0 0 1 6.82 0M9.42 26.39a3.41 3.41 0 1 0 0-6.82a3.41 3.41 0 0 0 0 6.82m16.68-3.41a3.41 3.41 0 1 1-6.82 0a3.41 3.41 0 0 1 6.82 0" clip-rule="evenodd"/><path fill="#818cf8" d="M9.42 4.23a.56.56 0 0 0-.56.56v.93c0 .308.252.56.56.56s.56-.252.56-.56v-.93a.56.56 0 0 0-.56-.56M6.757 5.356a.56.56 0 1 0-.965.567l.466.809l.004.007A.58.58 0 0 0 6.74 7a.53.53 0 0 0 .276-.074a.566.566 0 0 0 .205-.754zm5.315.012a.55.55 0 0 1 .762-.206c.276.152.36.5.202.764l-.458.797A.56.56 0 0 1 12.1 7a.564.564 0 0 1-.487-.834zM22.69 4.24a.56.56 0 0 0-.56.56v.92c0 .308.252.56.56.56a.566.566 0 0 0 .56-.534V4.8a.56.56 0 0 0-.56-.56m-3.426.924a.557.557 0 0 1 .763.202l.464.806c.138.259.06.6-.204.754A.53.53 0 0 1 20.01 7a.58.58 0 0 1-.478-.261l-.004-.007l-.468-.814a.566.566 0 0 1 .204-.754m6.088.204a.55.55 0 0 1 .761-.206c.277.152.36.5.203.764l-.463.806l-.005.007A.6.6 0 0 1 25.37 7a.5.5 0 0 1-.282-.078a.55.55 0 0 1-.194-.758zM9.42 16.12a.56.56 0 0 0-.56.56v.93c0 .308.252.56.56.56s.56-.252.56-.56v-.93a.56.56 0 0 0-.56-.56m-3.417.93a.565.565 0 0 1 .754.206l.464.806c.138.259.06.6-.205.754a.53.53 0 0 1-.276.074a.58.58 0 0 1-.478-.261l-.004-.007l-.468-.814a.566.566 0 0 1 .206-.755zm6.079.208a.55.55 0 0 1 .761-.206c.277.152.36.5.203.764l-.462.803a.567.567 0 0 1-.766.193a.55.55 0 0 1-.194-.758zM22.69 16.12a.56.56 0 0 0-.56.56v.93c0 .308.252.56.56.56c.32 0 .543-.262.56-.545v-.945a.56.56 0 0 0-.56-.56m-3.417.93a.565.565 0 0 1 .754.206l.464.806c.138.259.06.6-.204.754a.53.53 0 0 1-.277.074a.58.58 0 0 1-.478-.261l-.004-.007l-.468-.814a.565.565 0 0 1 .206-.755zm6.079.208a.55.55 0 0 1 .761-.206c.277.152.36.5.203.764l-.463.806l-.005.007a.6.6 0 0 1-.478.261a.5.5 0 0 1-.282-.078a.55.55 0 0 1-.194-.758z"/><path fill="#818cf8" fill-rule="evenodd" d="M11.554 9.664a.5.5 0 0 0-.708-.707l-1.78 1.78a.5.5 0 1 0 .707.707zm8.616.926a.5.5 0 1 0 0 1h2.52a.5.5 0 1 0 0-1zM9.42 22.48h2.51a.5.5 0 1 1 0 1H9.42a.5.5 0 0 1 0-1m11.844-1.634a.5.5 0 0 0-.708.708l1.78 1.78a.5.5 0 1 0 .708-.707z" clip-rule="evenodd"/></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. ControlKnobsIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **MIT** 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.