Home/Libraries/Freehand free icons (Iconify)/notes-add

Freehand free icons (Iconify)

NotesAdd

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"><g fill="#818cf8" fill-rule="evenodd" clip-rule="evenodd"><path d="M9.99 19.454c-7.623.12-4.382.12-7.713-.27c-.5-.06-.73-.43-.87-.88c-.26-.84-.19-1.001-.07-9.534c-.14-1.696-.07-3.403.21-5.082c.28-1.07-.01-1.42 1.44-1.39c0 .35-.1 1.7-.07 1.89c.1.78.86.66 1.16.74c1.551.38 2.132-.79 2.002-2.42c.481.16.999.177 1.49.05c0 .11-.09 1.41-.07 1.59c.1.77.85.66 1.16.74c1.531.36 2.111-.76 2.001-2.36c.69.21.74.17 1.77-.06c0 .11-.08 1.41-.06 1.54a.69.69 0 0 0 .53.64c1.641.44 2.592 0 2.652-1.77q.503.015 1 .09c.26 0 .46.09.48.29l.38 7.093a.3.3 0 1 0 .6 0a19.6 19.6 0 0 0-.02-7.253c-.24-1.06-1.34-1-2.43-.93a5.5 5.5 0 0 0-.44-1.78a1.47 1.47 0 0 0-2.131.15c-.2.303-.34.643-.41 1a3.36 3.36 0 0 0-2 .16a3.5 3.5 0 0 0-.341-1.2a1.47 1.47 0 0 0-2.14.18a2.7 2.7 0 0 0-.36.87a3.4 3.4 0 0 0-1.751.13a3.2 3.2 0 0 0-.34-1.1a1.18 1.18 0 0 0-1.221-.38c-.81.13-1.12.69-1.3 1.48a2.5 2.5 0 0 0-1.601.26c-.54.35-.54 1.06-.69 1.55a21 21 0 0 0-.52 5.282c-.19 4.792-.15 3.231-.21 6.842c0 1.941 0 4.422 2.09 4.582c3.421.25.13.38 7.833-.06a.34.34 0 0 0 .302-.229a.34.34 0 0 0-.342-.451m3.48-17.656c.08-1.53 1-1.15 1.08-.85c.14.75.14 1.52 0 2.27c-.17.56-.45.43-1 .41c.03-.63-.13-1.04-.08-1.83m-4.702-.73c.2-.4.79-.13.88-.16c.156.809.156 1.64 0 2.45c-.09.31-.27.53-.66.41h-.38q.043-.152.06-.31a5.9 5.9 0 0 1 .1-2.39m-4.591.05c.2-.41.81-.12.88-.12c.156.809.156 1.64 0 2.45c-.09.3-.27.52-.66.4h-.38c0-.12.07-.26.07-.31a5.7 5.7 0 0 1 .09-2.42"/><path d="M14.181 8.44a.4.4 0 0 0 .06-.55c-.22-.32-5.802-.79-8.523-.62c-3 .2-2.63.71-2.13.83c1.06.32 10.573.36 10.593.34m-3.191 3.171c-.32-.08-2.8-.21-3.28-.21c-.481 0-3.922.1-4.002.48a.3.3 0 0 0 .06.25a5.6 5.6 0 0 0 1.93.35c1.765.123 3.536.08 5.292-.13c.41 0 .54-.6 0-.74m-7.082 4.792c1.536.34 3.126.364 4.671.07a.34.34 0 0 0 0-.48a8.9 8.9 0 0 0-3-.44c-2.301.1-2.742.62-1.671.85m18.596-1.841a5.933 5.933 0 0 0-9.513.59c-1.68 2.481-.81 6.132.87 7.203a.31.31 0 0 0 .372.035a.311.311 0 0 0-.032-.545c-1.33-.93-1.93-4.132-.42-6.133a5.002 5.002 0 0 1 7.813-.4c2.48 2.931 1 7.363-3.341 7.873a5.6 5.6 0 0 1-2.381-.18a.354.354 0 0 0-.22.67a6.4 6.4 0 0 0 2.68.29a5.683 5.683 0 0 0 4.172-9.403"/><path d="M17.433 19.004a12.3 12.3 0 0 1 0 2.22a.35.35 0 1 0 .67.21c.272-.794.43-1.622.47-2.46a14 14 0 0 1 2.17 0a.35.35 0 0 0 .42-.27a.355.355 0 0 0-.27-.42a9.6 9.6 0 0 0-2.1-.43c-.25 0-.18 0-.19-.13a23 23 0 0 0-.32-2.332s0-.59-.25-.63s-.43.13-.38.63c-.11 1.4-.17 1.25-.22 2.451c-.853.07-1.694.249-2.501.53a.31.31 0 0 0-.212.476a.31.31 0 0 0 .322.135c.67-.09 1.25-.04 2.39.02"/></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. NotesAddIcon.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.