Home/Libraries/Freehand free icons (Iconify)/music-note-1

Freehand free icons (Iconify)

MusicNote1

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="M17.563 5.58a7.5 7.5 0 0 0-2.427-3.902A9.7 9.7 0 0 0 13.361.324a2.47 2.47 0 0 0-1.735-.27a.83.83 0 0 0-.632.591a4.8 4.8 0 0 0 .11 1.555c.101 1.003.191 2.006.211 3.009q.024 1.004-.06 2.005c-.15 2.056-.17 4.112-.31 6.158c0 .511-.071 1.003-.121 1.524l-.21 3.15A3.43 3.43 0 0 0 9.43 16.51a4.35 4.35 0 0 0-3.26-.471a5 5 0 0 0-2.888 1.604a3.4 3.4 0 0 0-.531 1.003a6.4 6.4 0 0 0-.261 1.565q-.03.361 0 .722q.03.375.15.732a3.17 3.17 0 0 0 2.056 2.206a5.33 5.33 0 0 0 4.152-.792a6.2 6.2 0 0 0 1.545-1.254c.902-1.003.722-1.865 1.003-5.195c0-.571.13-1.133.22-1.695q.16-1.152.27-2.316c.171-1.785.262-3.58.452-5.366q.1-1.05.08-2.106c0-1.003-.12-2.005-.22-3.089c0-.18-.09-.44-.14-.712q-.015-.135 0-.27c.265-.009.528.053.762.18a8.3 8.3 0 0 1 1.594 1.164a6.94 6.94 0 0 1 2.006 2.677a3.39 3.39 0 0 1-.19 3.14a4 4 0 0 1-.572.701q-.331.34-.712.622a.33.33 0 0 0 .06.461a.35.35 0 0 0 .481.08q.423-.304.813-.651q.397-.353.712-.783a4 4 0 0 0 .551-3.088M8.457 22.388a4.43 4.43 0 0 1-2.878.672a2.12 2.12 0 0 1-1.835-1.695a3 3 0 0 1-.1-.511a3 3 0 0 1 0-.542q.022-.549.15-1.083c.07-.319.207-.62.4-.883a3.94 3.94 0 0 1 2.207-1.304a3.44 3.44 0 0 1 2.588.191c.436.265.784.652 1.002 1.113c.622 1.434.462 2.708-1.534 4.042"/><path fill="#818cf8" d="M7.173 3.173a3.6 3.6 0 0 0-1.815-1.324a4 4 0 0 0-1.003-.291a1.2 1.2 0 0 0-.832.19a.92.92 0 0 0-.321.562c0 .21.1.26.18.431c.231.442.452.652.642 1.104c.19.45.241.601.341.912c.271.813.672 1.896 1.003 2.858c.08.231.16.472.23.712l.573 1.585a2.4 2.4 0 0 0-1.003-.441c-.311-.08-.833.23-1.324.551c-.44.296-.757.742-.893 1.254a1.5 1.5 0 0 0-.05.562c.017.26.075.518.17.762q.05.17.141.32q.078.166.2.302a1.56 1.56 0 0 0 1.334.631a2.65 2.65 0 0 0 1.695-1.123a3 3 0 0 0 .472-.852c.22-.642 0-1.003-.482-2.548c-.08-.27-.14-.541-.21-.812c-.07-.27-.19-.742-.301-1.103c-.25-.843-.532-1.675-.772-2.527q-.15-.51-.351-1.003a19 19 0 0 0-.672-1.364c0-.08-.12-.19-.19-.301a1 1 0 0 1 0-.13a.8.8 0 0 1 .38 0q.48.06.933.23a3.4 3.4 0 0 1 1.424.843a1.67 1.67 0 0 1 .491 1.464a2 2 0 0 1-.18.38q-.088.216-.21.412a.17.17 0 0 0 .28.18q.14-.211.25-.44q.109-.244.171-.502a2 2 0 0 0-.3-1.484M5.88 12.349a2.07 2.07 0 0 1-1.093.772a1 1 0 0 1-1.003-.41a.8.8 0 0 1-.12-.192a2 2 0 0 1-.101-.23a4 4 0 0 1-.12-.472a1.3 1.3 0 0 1 0-.44c.13-.372.376-.692.702-.913a1.63 1.63 0 0 1 1.103-.351c.222.042.427.146.592.3c.501.482.651 1.054.04 1.936m15.595 3.591a3.7 3.7 0 0 0-1.154-1.906a5 5 0 0 0-.852-.682c-.258-.147-.56-.2-.853-.15a.94.94 0 0 0-.511.4a.57.57 0 0 0 0 .462c.27.67.377 1.396.31 2.116c-.21 1.645-.46 3.27-.46 3.27a4 4 0 0 0-.883-.552a2.4 2.4 0 0 0-1.264-.06a2.17 2.17 0 0 0-1.314.802q-.17.227-.27.491q-.116.378-.14.773q-.016.175 0 .35q.015.183.06.362a1.59 1.59 0 0 0 1.002 1.103a2.6 2.6 0 0 0 2.006-.351a3.4 3.4 0 0 0 .772-.602a6.6 6.6 0 0 0 .712-2.567a20 20 0 0 0 .18-5.476c.13.004.258.038.372.1q.422.245.772.582a3.34 3.34 0 0 1 1.003 1.334a1.65 1.65 0 0 1-.12 1.534a2.3 2.3 0 0 1-.281.341a3 3 0 0 1-.361.291a.17.17 0 0 0 0 .23a.17.17 0 0 0 .23.05q.214-.143.402-.32q.202-.17.35-.391a1.93 1.93 0 0 0 .291-1.535m-4.664 5.826a2 2 0 0 1-1.294.28a1 1 0 0 1-.812-.781a1 1 0 0 1 0-.231a1 1 0 0 1 0-.24q.01-.251.08-.492q.054-.212.18-.391a1.8 1.8 0 0 1 1.004-.572c.384-.109.796-.07 1.153.11c.19.124.336.303.421.512c.261.652.18 1.223-.732 1.805"/></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. MusicNote1Icon.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.