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

Freehand free icons (Iconify)

DesignProcessPenIdea

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="M2.612 7.981a1.5 1.5 0 0 0-.29-.11a1.7 1.7 0 0 0-.309 0c-1.107-.169-1.167-.05-1.237.11s-.05.41.908.908q.144.078.3.13q.165.021.329 0c.11 0 1.127 0 1.197-.32c.02-.02.12-.239-.898-.718M4.607 4.11s.789.31.998.13c.21-.18-.11-.997-.12-.997a.5.5 0 0 0-.12-.16a.6.6 0 0 0-.189-.09c-.788-.369-.918-.24-.998-.13s-.19.22.19.998a.5.5 0 0 0 .09.13a.33.33 0 0 0 .15.12m7.482-2.116c.27 0 .579-.718.609-.798a.6.6 0 0 0 0-.2q.015-.105 0-.209C12.409 0 12.249 0 12.09 0c-.16 0-.32 0-.579.848a.7.7 0 0 0 0 .2a.7.7 0 0 0 0 .2c.3.867.57.747.58.747m5.955 1.407a.7.7 0 0 0 .2-.14q.087-.087.16-.19c.568-.797.478-.907.379-.997c-.1-.09-.26-.28-1.138.14l-.23.14a1 1 0 0 0-.169.2s-.489.837-.29.997c.2.16 1.019-.11 1.088-.15m4.131 4.061a.9.9 0 0 0-.46.06c-.997.409-.827.658-.827.668c0 .29.788.489.997.519q.135.023.27 0a.7.7 0 0 0 .25-.08c.877-.41.867-.619.827-.788s-.2-.31-1.057-.38m-9.667 4.889c-.49-1.137-.819-.828-1.098 0v.729q-.003.695.07 1.386c.06.699.17 1.377.21 2.076a.37.37 0 1 0 .737 0q.173-1.037.24-2.086v-.888a9 9 0 0 0-.07-.877z"/><path d="M19.174 8.37a7.8 7.8 0 0 0-1.996-3.91a7.1 7.1 0 0 0-3.89-2.185a7.7 7.7 0 0 0-4.82.997a8.13 8.13 0 0 0-3.461 3.462a8 8 0 0 0-.679 3.652a7.9 7.9 0 0 0 .998 3.542c.559.997 1.227 1.666 1.706 2.504a4.4 4.4 0 0 1 .569 1.626h-.1a.329.329 0 1 0 0 .659h3.721l2.454.09q.66.024 1.307.15c.21.02.414.085.6.189c.129.07.219.13.248.21c.03.079 0 .079-.08.129a1.3 1.3 0 0 1-.229.23a4 4 0 0 1-1.885.758c-1.12.156-2.259.135-3.373-.06a4 4 0 0 1-1.057-.36a8 8 0 0 1-.998-.578a.36.36 0 0 0-.519.07a.38.38 0 0 0 .07.518q.622.507 1.327.888c.07 0 .16.05.24.09a.31.31 0 0 0-.13.34c.127.626.424 1.206.858 1.676c.47.484 1.081.808 1.746.927a3 3 0 0 0 2.095-.578a2 2 0 0 0 .758-1.946a4.5 4.5 0 0 0 1.646-.718a1.83 1.83 0 0 0 .799-1.277a1.46 1.46 0 0 0-.878-1.367a2.3 2.3 0 0 0-.45-.14v-.09a2.74 2.74 0 0 1 .5-1.396c.458-.699 1.097-1.307 1.566-1.996a8.8 8.8 0 0 0 1.167-2.883a8.1 8.1 0 0 0 .17-3.222m-5.677 13.968a1.8 1.8 0 0 1-.718.32c-.267.05-.541.05-.808 0a2.27 2.27 0 0 1-1.228-.45a3 3 0 0 1-.878-1.047q.121.059.25.1c1.206.298 2.452.402 3.691.309h.06a1.1 1.1 0 0 1-.37.768M9.995 9.858c.14-.36.28-.71.449-1.058c.08-.18.19-.35.28-.52q.285.163.598.27q.226.06.459.06q.238.004.469-.05c.283-.078.552-.2.798-.359c.29.559.559 1.117.838 1.676c-.429-.06-.848-.12-1.277-.16h-1.387c-.449.03-.848.09-1.227.14m1.207-2.455c.19-.35.37-.699.559-.998l.13-.419c.09.22.17.44.21.519c.179.29.328.589.498.878h-.489q-.285-.015-.569 0a2 2 0 0 0-.369.02zm2.584 10.296l-2.484.12l-.998.06v-3.512c0-.4 0-.788-.07-1.187c-.08-.849-.19-1.677-.269-2.515a7 7 0 0 0 3.721.07a18.5 18.5 0 0 0-.209 2.564c0 .559.06 1.118.11 1.666c.08.828.22 1.647.26 2.475a.32.32 0 0 0 .099.259zm4.31-6.375a7.8 7.8 0 0 1-.997 2.614c-.52.858-1.297 1.586-1.726 2.474c-.198.409-.31.853-.33 1.307a5 5 0 0 0-.558 0a.36.36 0 0 0 .11-.24c.13-.938.197-1.885.199-2.833c0-.559 0-1.117-.1-1.676a41.5 41.5 0 0 0-.838-5.308a28 28 0 0 0-.738-1.686a7.5 7.5 0 0 0-.679-1.217a1.23 1.23 0 0 0-.568-.41a.77.77 0 0 0-.789.42c-.15.29-.488 1.058-.498 1.077c-.35.858-.729 1.726-.998 2.624c-.569 1.657-.38.918-.499 4.75v1.217c0 .409.05.798.09 1.197c.09.778.21 1.546.32 2.314l-1.178.08a5.3 5.3 0 0 0-.599-1.935c-.449-.858-1.087-1.597-1.606-2.574a7 7 0 0 1-.778-3.153a6.8 6.8 0 0 1 .708-3.123A6.9 6.9 0 0 1 8.997 4.32a6.47 6.47 0 0 1 3.991-.808a6 6 0 0 1 3.293 1.776a6.86 6.86 0 0 1 1.855 3.282c.16.912.147 1.847-.04 2.754"/></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. DesignProcessPenIdeaIcon.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.