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

Freehand free icons (Iconify)

DesignToolBrushRuler

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.116 4.494a6.9 6.9 0 0 0-.63-2.23a11 11 0 0 0-.77-1.281a.75.75 0 0 0-1.061-.15c-.48.41-.87.82-1.34 1.16a3.7 3.7 0 0 1-.901.51c-1.39.58-3.531 1-4.852 1.941a3.07 3.07 0 0 0-1.25 3.461q.09.365.24.71l.15.26a87 87 0 0 0-8.004 5.923c-1.23.96-2.3 2.107-3.17 3.401a6 6 0 0 0-.611 1.661c-.08.426-.08.864 0 1.29a3.53 3.53 0 0 0 1.72 2.392a3.34 3.34 0 0 0 3.002.19A14.5 14.5 0 0 0 9.28 20.33c2.631-3.091 5.702-7.413 6.763-8.733a.41.41 0 0 0-.05-.56a.5.5 0 0 0-.2-.06c-.22-.29-.42-.59-.66-.87a3 3 0 0 0-.35-.36a2.5 2.5 0 0 0-.4-.311a2.16 2.16 0 0 1-1.221-1.68a2.28 2.28 0 0 1 1.05-2.502a7.3 7.3 0 0 1 2.081-.83q.025.229.12.44a1.9 1.9 0 0 0 1 .78c.372.099.715.284 1 .54c.239.306.363.684.351 1.071a3.7 3.7 0 0 0 .44 1.73a2 2 0 0 0 .65.521q-.617.51-1.32.89a4.5 4.5 0 0 1-2.07.56a.39.39 0 0 0-.421.37a.39.39 0 0 0 .37.42a4.8 4.8 0 0 0 2-.35a9 9 0 0 0 2.622-1.51a5.6 5.6 0 0 0 1.18-1.4a7 7 0 0 0 .69-1.671a6.4 6.4 0 0 0 .21-2.321m-8.904 6.553c.26.17.52.31.78.46c-1.32 1.6-4.201 5.302-6.692 8.003a13.5 13.5 0 0 1-3.261 3.001a2 2 0 0 1-1.791-.14a2.17 2.17 0 0 1-1.07-1.47a2.5 2.5 0 0 1 .06-1q.154-.568.42-1.091a18 18 0 0 1 3.861-4.122c2.361-2.07 5.092-4.132 6.393-5.072q.242.415.54.79q.339.375.76.65zm7.533-4.522c-.1.508-.272 1-.51 1.46a4.3 4.3 0 0 1-.69.92a1 1 0 0 1-.48-.4a3 3 0 0 1-.08-1.36a2.77 2.77 0 0 0-.68-1.89a2.84 2.84 0 0 0-1.351-.621c-.32-.07-.65 0-.82-.26a.46.46 0 0 1-.15-.16c.66-.16 1.32-.31 1.86-.5c.438-.154.85-.373 1.22-.65q.522-.379 1.001-.81c.11.26.2.55.21.57c.283.569.472 1.18.56 1.81c.074.631.044 1.27-.09 1.89"/><path d="M1.247 4.484c.46.85-.46-1 4.192 7.563a.35.35 0 0 0 .644-.053a.36.36 0 0 0-.014-.267l-1.09-2.511q.484-.125.93-.35q.405-.22.76-.51c.36-.29.66-.61 1-.9a.394.394 0 1 0-.38-.691q-.672.21-1.31.51a4.5 4.5 0 0 0-1 .6c-.17.14-.33.29-.49.44l-.881-2l.48-.18c.17-.08.34-.17.49-.26s.31-.21.46-.32c.35-.28.67-.57 1.001-.86a.395.395 0 1 0-.4-.681c-.42.15-.83.28-1.25.46q-.261.105-.5.25q-.25.14-.471.32a4 4 0 0 0-.28.28c-.24-.48-.54-1-.78-1.47a5 5 0 0 1-.16-.35q.382-.148.78-.25c.53-.27 1.1-.57 1.67-.84s1.15-.521 1.731-.761q.376-.09.73-.25v.08c.23.34.44.75.61 1c.53.74 1.001 1.52 1.511 2.311s.92 1.61 1.32 2.431a.4.4 0 0 0 .531.2a.4.4 0 0 0 .19-.53c-.36-.86-.78-1.72-1.22-2.561A42 42 0 0 0 8.65 1.863c-.19-.29-.4-.81-.66-1.19a2.2 2.2 0 0 0-.55-.6a.8.8 0 0 0-.66 0c-.2.05-.801.36-.871.39c-.61.23-1.22.48-1.81.74s-1.191.56-1.761.86c-.43.225-.84.49-1.221.79a.77.77 0 0 0-.24.75q.138.462.37.881M17.674 17.99c-.42-.801-.9-1.571-1.33-2.362c-.181-.33-.361-.67-.511-1a.4.4 0 0 0-.74.3l1.55 3.562c.07.17.21.45.32.74q.084.187.11.39q-.489.204-1 .34l-3.091 1.83c-.14.08-.36.221-.59.331l-.24.13a.7.7 0 0 1-.06-.2l-.5-.91q.385-.059.76-.17q.185-.078.36-.18a1.7 1.7 0 0 0 .32-.23c.25-.21.45-.43.69-.66a.4.4 0 0 0 .15-.541a.4.4 0 0 0-.54-.15c-.32.09-.62.15-.93.26a2.5 2.5 0 0 0-.37.17q-.18.096-.33.23q-.27.257-.501.55v-.08a.37.37 0 0 0-.48-.15a.35.35 0 0 0-.15.47l.74 1.791q.084.278.21.54a.52.52 0 0 0 .36.25c.214.054.437.054.65 0a5.7 5.7 0 0 0 1-.38c.461-.19.921-.4 1.371-.63c.66-.33 1.291-.71 1.931-1.07q.673-.315 1.28-.74a.9.9 0 0 0 .3-.5a1.9 1.9 0 0 0-.11-.781q-.27-.6-.63-1.15"/></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. DesignToolBrushRulerIcon.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.