Home/Libraries/Freehand free icons (Iconify)/design-tool-quill

Freehand free icons (Iconify)

DesignToolQuill

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="M23.225 0a30 30 0 0 0-4.507.901c-1.082.331-2.143.762-3.225 1.112c-1.773.571-1.372.17-3.756 4.467a7.2 7.2 0 0 0-1.002-2.494c-1.001-1.001-2.003.511-2.714 1.663c-2.114 3.456-4.047 6.56-4.447 11.76a.302.302 0 0 0 .6.05c.441-4.949 2.404-8.014 4.558-11.35a4.7 4.7 0 0 1 1.252-1.502c.06.1.12 0 .38.682c.261.68.461 2.103.852 2.403s.881 0 1.192-.43s1.963-3.636 2.584-3.917q.433-.177.891-.27a32.7 32.7 0 0 1 6.882-1.823a8.6 8.6 0 0 1-.3 2.504a39 39 0 0 1-2.355 7.081c-.3.672-.78 2.204-1.462 2.695c-.07-.1-.28-.18-.34-.24a8.7 8.7 0 0 0-2.855-1.703c-1.282-.17-.631 2.684-.691 3.365c-.741-.51-2.574-1.442-2.905-.66c-.22.52.1 1.191.2 1.602c.23.871.792 2.554.12 3.175a6.78 6.78 0 0 1-4.797 1.192c-2.404-.23-1.653-1.232-2.174-.852c-.2.08-.42.26-.2.521c.292.426.73.73 1.232.852c1.893.55 4.898.24 6.43-1.112c1.122-1.002.441-3.175 0-4.718c.82.242 1.557.703 2.134 1.332a.58.58 0 0 0 .741 0c.38-.43 0-2.283.08-3.495h.19q.893.553 1.693 1.232c.2.237.436.44.701.6c.611.251 1.302-.39 1.673-.89C21.132 12.078 25.63.26 23.225 0"/><path d="M7.04 16.256C13.99 8.444 17.385 6.12 19.55 4.517a.344.344 0 0 0-.401-.56c-1.402 1.001-2.775 1.852-4.067 2.894C7.77 12.861 5.116 16.867.88 22.416l-.771 1.142a.31.31 0 0 0 .51.34c2.024-2.644 5.28-6.36 6.421-7.642"/></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. DesignToolQuillIcon.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.