Home/Libraries/Freehand free icons (Iconify)/design-tool-pen-pencil-brush

Freehand free icons (Iconify)

DesignToolPenPencilBrush

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="M15.333 4.207A30.5 30.5 0 0 0 13.095.02a.35.35 0 0 0-.38.1c-.12.14 0 0-1.209 1.878c-.48.78-1.109 1.07-1.249 2.429a19 19 0 0 0 0 1.998c-.07 4.407-.41 8.704.11 13.24c.21 1.749.58 3.997 2.378 4.307s2.468-1.999 2.598-3.997c0-3.567.2-2.079.08-12.21c-.01-.05-.07-3.438-.09-3.558m-3.837 15.478c0-.28-.06-.45-.15-1.239a13.6 13.6 0 0 0 2.898.06a10 10 0 0 0 0 1a4.28 4.28 0 0 0-2.748.18m2.998-15.188c.28.58-.07 11.111-.19 13.17a4.28 4.28 0 0 0-2.998.06c-.3-3.718-.22-7.405-.3-11.302v-1.41c.49.64 1.4 2.328 2 1.34q.647-1.004 1.478-1.86zM12.885 1.02q.183.305.33.63q.58.959 1 1.998c-.09 0-1.74 1.42-1.8 1.479c-.549-.64-.589-.3-1.328-1.269c.19-.56.12-.11 1.798-2.838m-1.279 19.446a8.9 8.9 0 0 0 2.578-.07c-.35 3.507-2.078 3.077-2.578.07M20.14 7.814a.3.3 0 0 0 .3-.52c-.37-.24-.9.12-1.919-.71a1.27 1.27 0 0 1-.52-.868c-.12-1.33 1.999-2.219 2.169-3.698a2.4 2.4 0 0 0-.17-.56c1.169.53 1.499.53 1.809.88c.849 1 .649 2.878 0 3.927c-.18.386-.443.727-.77 1c-.44.22-.07 1.199.86.17c1.738-1.93 1.738-4.447.749-5.746a3.47 3.47 0 0 0-1.649-1.02a3.2 3.2 0 0 0-1.06-.44a.77.77 0 0 0-.938.57a5.5 5.5 0 0 0 0 1.07l-.21.51c-.59 1.098-1.999 1.838-1.689 3.447c.37 2.028 3.358 2.028 3.038 1.988m1.329 1.319c0 .17 0 0-.07 2.878c0 2.318-.92 10.672-1.27 10.632c-.349-.04-.719-1.939-.769-2.278a32.6 32.6 0 0 1-.47-9.084c.088-.931.268-1.852.54-2.748c0-.52-.45-.739-.65-.13c-.2.61-.309 1.12-.359 1.34c-1.229 5.256-.24 11.9.42 13.14c.66 1.239 1.878 1.259 2.438.07c.286-.92.437-1.876.45-2.838c.37-5.906.51-3.617.42-10.992c.379-.38-.51-.97-.68.01M4.012 18.826c-.44.12-.53.17-.6.45s0 .13 1.18 2.268c.999 1.848.999 1.998 1.288 1.998a.29.29 0 0 0 .29-.23c0-.1.21.27-1.788-3.597c1.111-.047 2.215-.2 3.297-.46c-.51.962-.938 1.965-1.279 2.998c0 .39.51.48.7 0c1.069-2.478 1.458-2.778 1.458-3.557c0-.78-4.136.01-4.546.13M2.253 5.946a6.3 6.3 0 0 1 .76-1.54c.237-.262.546-.45.889-.539c-.28 1.829-.16 3.468-.29 5.276c-.19 2.788-.21 6.126-.21 8.184c.12 1 .39 1 .82 0c0-1 0-2.348.19-4.996a5.85 5.85 0 0 0 3.227-.18c0 3.108.06 4.517.07 5.216c.01.7.41.8.81 0c0-1.319 0-4.696.12-12.61c0-1.45.19-3.198-1.13-3.997C7.12.51 6.85.21 6.28.3C4.901.54 4.282 1.839 4.012 3.208a2.6 2.6 0 0 0-1.739.64C1.014 5.215.794 6.574.704 8.433c0 .66-.18 1.998.54 1.998s-.23-.83 1.01-4.486M6.47 1.429l.41.27c.72.42.63 1.908.61 2.758a5.9 5.9 0 0 0-2.569 0c.09-1.11.47-2.848 1.549-3.028M4.611 9.233l.25-3.997a5.9 5.9 0 0 0 2.638.07l.09 5.996a7.2 7.2 0 0 0-3.177.28c.06-.77.12-1.57.2-2.349"/></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. DesignToolPenPencilBrushIcon.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.