Home/Libraries/Freehand free icons (Iconify)/music-clef

Freehand free icons (Iconify)

MusicClef

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="M5.11 6.395c.5 0 .999-.05 1.508-.09c.759-.06 1.508-.16 2.257-.2a.32.32 0 0 0 .01-.639c-.74-.08-1.478-.15-2.237-.17H5.65c-.32 0-.64 0-.999.08c-.749.1-1.468.25-2.197.37a.29.29 0 0 0-.26.3a.28.28 0 0 0 .3.26c.909.04 1.758.109 2.616.089m9.336-.24a.27.27 0 0 0 .29.26c.898 0 1.797.13 2.706.14h1.607c.81 0 1.608-.11 2.417-.11a.31.31 0 0 0 .26-.516a.33.33 0 0 0-.21-.113c-.8-.12-1.588-.22-2.397-.27h-1.997c-.798.07-1.577.22-2.366.33a.27.27 0 0 0-.31.28m-7.399 5.831a.32.32 0 0 0-.319-.32c-.45-.07-.899-.15-1.368-.2a6 6 0 0 0-.58 0a6 6 0 0 0-.588 0c-.47 0-.919.14-1.378.2a.28.28 0 0 0-.28.27a.27.27 0 0 0 .27.29c.45.089.899.199 1.368.259q.295.023.589 0q.295.015.589 0c.47 0 .919-.11 1.378-.17a.33.33 0 0 0 .32-.33m14.188-.069c-.42-.06-.829-.11-1.258-.13h-.54a5 5 0 0 0-.528.08c-.42.1-.8.25-1.209.39a.27.27 0 0 0-.184.11a.27.27 0 0 0-.045.209a.27.27 0 0 0 .31.23c.419 0 .818.07 1.237.07q.26.015.52 0l.489-.09c.41-.07.799-.17 1.208-.24a.31.31 0 0 0 .3-.32a.31.31 0 0 0-.3-.31m.16 6.93h-1.997l-.839.07a8 8 0 0 0-.839.14c-.649.14-1.268.35-1.897.55a.27.27 0 0 0-.22.211a.3.3 0 0 0 0 .108a.28.28 0 0 0 .32.23c.65-.05 1.288-.05 1.997-.09c.27 0 .55 0 .819-.09l.819-.13c.639-.11 1.268-.25 1.897-.35a.33.33 0 0 0 .188-.574a.32.32 0 0 0-.248-.075"/><path fill="#818cf8" d="M16.234 13.824a2 2 0 0 0-.11-1.138a3 3 0 0 0-1.089-1.229a3.83 3.83 0 0 0-2.316-.818a3.5 3.5 0 0 0-.839.11a18.5 18.5 0 0 1-.48-2.397c0-.27-.079-.55-.109-.829a23.3 23.3 0 0 0 2.666-2.995c.543-.902.81-1.944.769-2.996A1.57 1.57 0 0 0 13.038.005a2.65 2.65 0 0 0-2.286 1.877a9.9 9.9 0 0 0-.61 3.994c0 .479.08.998.13 1.458a10.3 10.3 0 0 0-2.226 3.135a4.35 4.35 0 0 0 .27 3.744a4.99 4.99 0 0 0 4.143 2.237h.06c.06.25.1.509.14.759a6.87 6.87 0 0 1-.41 3.914a3.16 3.16 0 0 1-2.056 1.907a4 4 0 0 1-2.886-.43a2.13 2.13 0 0 1-.869-1.088a2.8 2.8 0 0 1-.23-1.448c.057-.467.272-.9.61-1.228a2.4 2.4 0 0 1 1.298-.519c.365-.025.73.059 1.048.24c.39.21.71.469.76.669a1.33 1.33 0 0 1-.5 1.218a.82.82 0 0 1-1.168 0a.28.28 0 1 0-.38.41a1.36 1.36 0 0 0 1.917.079a2 2 0 0 0 .72-1.807a2.13 2.13 0 0 0-1.02-1.149a2.6 2.6 0 0 0-1.447-.309a3 3 0 0 0-1.678.659a2.7 2.7 0 0 0-.828 1.647c-.089.629-.01 1.27.23 1.858a3 3 0 0 0 1.198 1.497c1.042.62 2.28.82 3.464.56a4 4 0 0 0 2.666-2.347a7.85 7.85 0 0 0 .56-4.433c0-.23-.07-.47-.12-.7a3.12 3.12 0 0 0 2.696-2.585M11.69 2.3c.28-.669.68-1.218 1.338-1.238a.62.62 0 0 1 .7.62a4.14 4.14 0 0 1-.59 2.316a16.6 16.6 0 0 1-1.927 2.286v-.49a8.55 8.55 0 0 1 .48-3.494M9.105 13.814a3.77 3.77 0 0 1 .32-3.994q.453-.68.998-1.288q.19 1.32.54 2.606a5 5 0 0 0-.48.35a.33.33 0 0 0 0 .449a.32.32 0 0 0 .44 0q.133-.11.28-.2c.389 1.258.868 2.536 1.217 3.824a4 4 0 0 1-3.315-1.747m4.264 1.787c-.34-1.418-.869-2.836-1.278-4.224q.33-.075.669-.08a3.23 3.23 0 0 1 1.907.71c.284.208.524.469.709.768c.157.276.21.598.15.909a2.42 2.42 0 0 1-2.157 1.917"/></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. MusicClefIcon.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.