Home/Libraries/Freehand free icons (Iconify)/design-process-draw-pen

Freehand free icons (Iconify)

DesignProcessDrawPen

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="M10.543 9.513a5.1 5.1 0 0 1 1.71-.89a4.5 4.5 0 0 1 1.931-.19a.32.32 0 0 0 .39-.26a.33.33 0 0 0-.27-.4a5.55 5.55 0 0 0-2.26 0a6.4 6.4 0 0 0-2.131.84a2.17 2.17 0 0 0-1.11 1.39a1.56 1.56 0 0 0 .47 1.3a2.5 2.5 0 0 0 1.74.831a5.9 5.9 0 0 0 1.91-.28a3.9 3.9 0 0 1 1.481-.21c.82.13 1.69.64 2.55.81a2.5 2.5 0 0 0 1.351-.06a.38.38 0 1 0-.22-.73a1.9 1.9 0 0 1-.94 0c-.86-.24-1.71-.84-2.53-1a4.7 4.7 0 0 0-2.002.07a5.5 5.5 0 0 1-1.54.2a1.35 1.35 0 0 1-.9-.42c-.12-.13-.2-.21-.16-.31a1.3 1.3 0 0 1 .53-.69"/><path d="M22.217 8.163c-1.07-.45-2.001-1-3.051-1.51a12.7 12.7 0 0 0-2.161-.861a8.7 8.7 0 0 0-3.851-.18q.275-1.04.38-2.11a6.8 6.8 0 0 0-.08-1.871C13.204.44 12.564 0 12.004 0a2.27 2.27 0 0 0-1.791 1.19l-.71 1.25a29 29 0 0 0-1.271 3.412h-.12a8.3 8.3 0 0 0-2.22 2.15a8 8 0 0 0-.811 1.301a7.6 7.6 0 0 0-.55 1.46a2.84 2.84 0 0 0 .33 2.241a1.26 1.26 0 0 0 1.75.26a18 18 0 0 0-.5 3.742q.013.233.07.46q.048.241.14.47q.226.53.56 1c.13.31.83.49 2.071-.66q.195-.18.36-.39q.168-.209.3-.44q.26-.535.46-1.09c.367.316.787.563 1.241.73q.402.15.83.18c.434.03.87-.01 1.29-.12c.09 0 .16-.11.25-.15a4.8 4.8 0 0 0 2.412.76a8.3 8.3 0 0 0 1.77-.21a18.5 18.5 0 0 1 2.441-.48a.38.38 0 0 0 0-.76c-1-.074-2.005-.05-3 .07l-1.131.11h-.72c-.337 0-.673-.037-1-.11a1.7 1.7 0 0 0 .29-.41a1.28 1.28 0 0 0-.471-1.621h-.14a2 2 0 0 0 .87-1.34a1.24 1.24 0 0 0-.63-1.281a.38.38 0 0 0-.45.61a.44.44 0 0 1 .12.48a1 1 0 0 1-.71.56a2 2 0 0 1-.74 0l-.6-.06a8 8 0 0 1-.871-.18v-.55a.34.34 0 1 0-.64-.2c-.1.18-.74 1.44-.79 1.6a4 4 0 0 0-.11.52a2 2 0 0 0 0 .22c-.26-.11-.48-.24-.74-.34a1.4 1.4 0 0 0-.34-.11a2 2 0 0 0-.341-.05c-.31 0-.57.06-.87.08h-.06c.54-2.11 1.09-4.31 1.72-6.471A34.6 34.6 0 0 1 10.642 3l.561-1.15c.23-.39.47-.7.75-.71s.37.27.49.74a5.6 5.6 0 0 1 .16 1.6q-.05 1.277-.34 2.521a.39.39 0 0 0 .28.46a.37.37 0 0 0 .4-.2a.2.2 0 0 0 .13 0c.91.002 1.815.144 2.682.42c.32.1.64.22.95.33c.49.17 1 .36 1.45.54c1.24.47 2.491.95 3.812 1.311a.39.39 0 0 0 .49-.24a.37.37 0 0 0-.24-.46M6.642 12.004a1.2 1.2 0 0 1-.45.34a.5.5 0 0 1-.35 0c-.08 0-.08-.13-.11-.22a1.85 1.85 0 0 1 0-1.09a10 10 0 0 1 .56-1.5q.329-.752.76-1.451q.36-.527.79-1c0 .18-.11.34-.16.52a59 59 0 0 0-.82 4c-.05.14-.12.271-.22.401m5.361 2.6c.52.15 1.071.15 1.59 0a.37.37 0 0 0 .1.401a.46.46 0 0 1 0 .59a.9.9 0 0 1-.63.35a3.5 3.5 0 0 1-.92.08a4.3 4.3 0 0 1-1-.07a3.5 3.5 0 0 1-.9-.33c.13-.24.26-.47.37-.71q.115-.243.19-.5q.037-.13.06-.26c.36.196.743.347 1.14.45m-4.911.401q.367.264.77.47q.167.078.35.11q.185.015.37 0q.437-.013.87-.07v.23a.35.35 0 0 0 0 .25q-.495.387-.94.83a8 8 0 0 0-.47.64c-.17.26-.32.531-.48.791q0-.35-.06-.69a4 4 0 0 0-.13-.72a5.2 5.2 0 0 0-.56-1.13s.06-.07.07-.11c.06-.22.12-.45.17-.671c.01.07.02.07.04.07"/><path d="M10.883 21.427a6.25 6.25 0 0 0-3.531-.3l-1.18.3l-1.271.18q-.394.015-.78-.06a2.6 2.6 0 0 1-.69-.25c-.41-.21-.69-.46-.74-.77a1.08 1.08 0 0 1 .46-1a3.8 3.8 0 0 1 1.3-.73a4.8 4.8 0 0 1 1.55-.22a.34.34 0 0 0 0-.671a5.4 5.4 0 0 0-1.77.1a4.7 4.7 0 0 0-1.7.75a2.09 2.09 0 0 0-1.001 1.89a2.32 2.32 0 0 0 1.29 1.762c.31.182.648.314 1 .39c.355.075.718.105 1.08.09q.4-.011.791-.08c.25 0 .5-.1.75-.16l1.2-.39a4.85 4.85 0 0 1 2.802 0c.16.07.31.14.35.29s0 .48-.29.84a.383.383 0 0 0 .358.608a.38.38 0 0 0 .252-.148a1.8 1.8 0 0 0 .51-1.52a1.4 1.4 0 0 0-.74-.9"/></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. DesignProcessDrawPenIcon.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.