Home/Libraries/Freehand free icons (Iconify)/modern-music-mix-touch

Freehand free icons (Iconify)

ModernMusicMixTouch

License: CC-BY-4.0

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="M23.977 18.235a22 22 0 0 0-1.059-2.448a3.3 3.3 0 0 0-.81-.999a1.41 1.41 0 0 0-1.168-.33a3.4 3.4 0 0 0-.9.35a1 1 0 0 1-.819.21l-.759-1a9 9 0 0 0-2.198-1.698a2.62 2.62 0 0 0-3.067.44a1.3 1.3 0 0 0-.4.89a1.37 1.37 0 0 0 .5.998q.694.52 1.449.95c.734.53 1.404 1.144 1.998 1.828q.605.739 1.129 1.538q-.195-.15-.41-.27a2 2 0 0 0-1.069-.27c-.939.06-1.199.69-1.119 1.44a3.75 3.75 0 0 0 1.15 2.097q.533.392 1.138.66c.425.18.878.284 1.339.31q.255.03.51 0a7.6 7.6 0 0 1 1.568-.23q.265.024.51.13q.41.19.789.439a.324.324 0 0 0 .36-.54a6 6 0 0 0-.84-.569a2.4 2.4 0 0 0-.71-.25a3 3 0 0 0-.509 0a10 10 0 0 1-1.618.13a3.2 3.2 0 0 1-1-.31a5 5 0 0 1-.928-.55a2.63 2.63 0 0 1-.82-1.358c0-.21 0-.42.24-.46c.224-.034.453-.003.66.09a8 8 0 0 1 1.109.64a.3.3 0 0 0 .4-.06a.4.4 0 0 0 .05-.17a.29.29 0 0 0 .099-.39a18.4 18.4 0 0 0-1.489-2.397a13.3 13.3 0 0 0-1.998-2.088c-.26-.22-.789-.5-1.179-.83c-.14-.12-.29-.23-.29-.369a.36.36 0 0 1 .17-.23a2 2 0 0 1 .5-.26a1.64 1.64 0 0 1 1.279.13a8.3 8.3 0 0 1 1.938 1.469c.18.16.49.61.76.86q.191.179.439.269c.383.099.788.053 1.139-.13q.473-.307.999-.51a.61.61 0 0 1 .5.12c.347.27.633.61.839 1c.38.659.639 1.408.949 1.997a.32.32 0 0 0 .43.15a.31.31 0 0 0 .219-.42"/><path fill="#818cf8" d="M14.097 22.041c-2.778-.22-5.615.16-8.402-.11a12.8 12.8 0 0 1-3.407-.76a1.2 1.2 0 0 1-.57-.598a6 6 0 0 1-.48-1.5l-.09-.539h1.999l1.678-.1l.17 2.698a.33.33 0 0 0 .65 0c0-.93 0-1.848.06-2.777h.679c.7-.05 1.399-.07 2.108-.1H9.59c.05.869.11 1.728.2 2.587a.33.33 0 0 0 .35.31a.33.33 0 0 0 .299-.35v-2.577h2.997a.32.32 0 0 0 .34-.31a.31.31 0 0 0-.3-.34q-1.499-.165-2.997-.27v-2.757h1.369a.33.33 0 0 0 0-.66a34 34 0 0 0-1.389-.119v-2.498h2.937a.32.32 0 0 0 .35-.3a.32.32 0 0 0-.3-.349c-.999-.12-1.998-.21-2.997-.26c0-.699 0-1.398-.07-2.088h1.838c1 0 1.928-.06 2.897-.1c-.07.25-.14.49-.19.75q-.015.23 0 .46a2.3 2.3 0 0 0 0 .459c.05.37.12.72.2 1.089a.31.31 0 0 0 .33.31a.32.32 0 0 0 .32-.33c.06-.36.14-.7.19-1v-.459q.015-.225 0-.45q.045-.498.02-.998h3.606c0 .849.12 1.998.15 2.937a10.5 10.5 0 0 1 0 1.538a.32.32 0 0 0 .28.36a.33.33 0 0 0 .37-.28q.075-.812.06-1.628c0-1.299-.13-2.868-.12-3.687a23.4 23.4 0 0 0 0-4.056a3 3 0 0 0-.84-1.778a2.15 2.15 0 0 0-.999-.48a11 11 0 0 0-2.228 0H9.171C7.703.911 5.365.481 3.507.781a4.1 4.1 0 0 0-2.448 1.23a2.3 2.3 0 0 0-.51.998A12.5 12.5 0 0 0 .5 5.187l-.4 6.654C.07 13.3 0 14.788 0 16.267c.018 1.007.131 2.01.34 2.997c.14.603.361 1.185.659 1.728a2 2 0 0 0 1 1c1.174.398 2.397.64 3.636.718c2.797.21 5.624-.22 8.422-.06a.29.29 0 0 0 0-.579zM1.998 17.855l-.919.14a16 16 0 0 1-.08-1.748v-1.28l3.686-.159v2.628c-.819.15-1.748.3-2.687.42m2.697-4.086c-1.228.15-2.437.38-3.656.6c0-.84.1-1.669.13-2.488v-.37h3.586v.93c0 .309-.05.868-.06 1.328m.12-3.297l-3.606.42c.06-1 .15-1.918.23-2.867c.689-.02 1.378-.02 2.068-.02h1.488c-.08.829-.13 1.648-.18 2.467m4.406 6.694c-.999 0-1.938 0-2.897.06l-.57.07v-2.548l1.759-.11c.66-.05 1.319-.1 1.998-.13v2.708zm.37-4.836v1.28H6.424c-.2 0-.4 0-.59.06V11.4h.16c.85 0 1.689-.09 2.538-.13l1.179-.07c-.06.4-.1.8-.12 1.13m.16-2.088H8.46c-.928 0-1.847.07-2.776.15c0-.779-.07-1.558-.1-2.347c1.178.06 2.357.13 3.556.16h.78c-.05.669-.11 1.348-.17 2.037M1.588 3.48c.014-.282.111-.553.28-.78a3.62 3.62 0 0 1 2.558-.918c1.658-.12 3.566.17 4.765.13l7.073-.15a17 17 0 0 1 1.789-.06c.336-.007.664.102.929.31c.436.504.67 1.151.66 1.818c.109 1.198-.05 2.567 0 3.386v.09q-2.52-.15-5.066-.18H9.211c-1.618.05-3.227 0-4.825.08c-.95 0-1.888.11-2.827.23c0-.28.05-.57.06-.85c0-.449.05-.908.06-1.358s-.15-1.169-.09-1.748"/><path fill="#818cf8" d="M4.815 6.006a1.61 1.61 0 0 0 1.18-2.997a.33.33 0 0 0-.32 0h-.06a2 2 0 0 0-1.998 1.419c-.1.58.19 1.219 1.198 1.578m-.17-1.638a1.39 1.39 0 0 1 1-.81a.85.85 0 0 1 .35 1.07c-.12.28-.46.4-.92.26s-.53-.28-.43-.52M9.43 6.006a1.64 1.64 0 0 0 2.069-.999a1.63 1.63 0 0 0-.85-1.998a.35.35 0 0 0-.329 0h-.08a2 2 0 0 0-1.998 1.419c-.1.58.19 1.219 1.189 1.578m-.159-1.638a1.37 1.37 0 0 1 1-.81a.84.84 0 0 1 .309 1.07c-.13.28-.46.4-.92.26c-.459-.14-.489-.28-.389-.52m4.785 1.638a1.63 1.63 0 0 0 2.057-.999a1.63 1.63 0 0 0-.849-1.998a.33.33 0 0 0-.28 0h-.09a2 2 0 0 0-1.997 1.419c-.14.58.15 1.219 1.158 1.578m-.17-1.638a1.39 1.39 0 0 1 .999-.81a.84.84 0 0 1 .31 1.07c-.13.28-.46.4-.92.26s-.49-.28-.39-.52"/></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. ModernMusicMixTouchIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

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