Home/Libraries/Freehand free icons (Iconify)/responsive-design-expand

Freehand free icons (Iconify)

ResponsiveDesignExpand

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="M8.395 11.908a6 6 0 0 0-.259-1.187a1.9 1.9 0 0 0-.529-.828a1.45 1.45 0 0 0-.638-.33a6.5 6.5 0 0 0-1.178-.11a7.5 7.5 0 0 0-.997 0c-1.168.08-2.305.38-3.493.37a.31.31 0 0 0-.319.289h-.07a.3.3 0 0 0-.339.26c-.09.498-.17.997-.23 1.526c-.09.758-.169 1.527-.249 2.285c0 .419-.08.838-.09 1.257s0 .848 0 1.277l.08 1.567v1.556a1 1 0 0 0 .18.599c.165.228.411.385.688.439l.48.07l.618.05h1.077l1.597-.05h2.384a.35.35 0 0 0 .34-.462a.33.33 0 0 0-.31-.217l-2.394-.2L3.137 20l-.997-.07l-.51-.06l-.319-.069q.006-.09 0-.18a4 4 0 0 0 0-.528v-.868l-.11-1.597c0-.399-.06-.798-.08-1.197c-.02-.4 0-.798 0-1.207v-2.275c0-.509 0-.998.09-1.507v-.06c0-.06.07.05.11.05q1.569.072 3.133-.05q.626-.016 1.248.07c.2 0 .468.05.728.1c.15.01.296.061.419.15c.13.15.22.333.26.528q.093.41.139.829l.13 1.626v6.136a.34.34 0 0 0 .329.35a.33.33 0 0 0 .33-.32l.309-3.612l.16-2.574v-.868a9 9 0 0 0-.11-.888"/><path d="M24 16.108V9.563c0-.499-.05-.997-.08-1.506c-.31-4.88-.29-4.66-3.442-4.76c-1.347 0-2.704.06-4.05.06l-7.783-.319a15.2 15.2 0 0 0-3.702.2c-.603.12-1.148.44-1.546.908a1.2 1.2 0 0 0-.24.568a5 5 0 0 0 0 .998l.11 3.123a.32.32 0 0 0 .31.29a.3.3 0 0 0 .289-.31V7.258a.3.3 0 0 0 .18 0a42 42 0 0 1 5.736-.229h2.135l3.203.06l7.822.22c0 .798 0 1.606-.07 2.404s0 1.417 0 2.115v1.726c.06 1.327.17 2.654.22 3.991v.908c-.998.07-1.926.13-2.873.14s-1.746 0-2.624 0H15.02c-1.277 0-2.534.2-3.801.19a11 11 0 0 1-1.586-.13a.32.32 0 0 0-.36.23a.31.31 0 0 0 .24.358c.728.19 1.473.308 2.225.35c1.077.07 2.175.05 3.262.12c.898 0 1.786.05 2.664 0c.599 0 1.178 0 1.776-.09c5.159-.34 4.44-.3 4.56-3.513M16.327 6.031c-1.556-.1-3.093-.17-4.65-.14a41 41 0 0 0-7.702.889a.2.2 0 0 0-.07 0V4.994a.53.53 0 0 1 .14-.27c.433-.374.985-.58 1.557-.578a19 19 0 0 1 2.993.07c1.556.05 3.123.149 4.68.179h3.142c1.337-.07 2.684-.24 3.991-.26c.813-.022 1.626.045 2.425.2v.06c.06.728.09 1.477.1 2.215c-2.166-.19-4.38-.439-6.606-.579M4.564 11.918a.34.34 0 0 0-.3-.38l-.817-.079h-.57l-.408.07a1.08 1.08 0 0 0-.788.768a1.35 1.35 0 0 0-.06.639c0 .15.06.299.07.449l.2 1.127a.3.3 0 0 0 .598 0l.18-1.078c0-.229 0-.478.09-.698c0 0 0-.11.069-.13l.28-.13l.389-.12l.688-.119a.34.34 0 0 0 .38-.32m-.649 7.085l.818.09h.568l.41-.09a1.11 1.11 0 0 0 .788-.778c.066-.206.086-.424.06-.639c0-.15-.06-.3-.08-.449l-.19-1.127a.31.31 0 1 0-.608 0l-.18 1.097c0 .23 0 .479-.09.698c0 .05 0 .11-.06.14l-.309.12l-.39.12l-.608.12a.34.34 0 0 0-.308.55a.34.34 0 0 0 .228.128z"/><path d="m9.702 11.16l.33-1.786a52 52 0 0 0 3.292 2.993a22 22 0 0 0 1.567 1.207c.568.39 1.067.758 1.616 1.118c1.167.768 2.325 1.436 3.442 2.065h-.858l-1.077.14a.35.35 0 0 0 0 .688l1.047.09l.719.11h.588q.248-.04.48-.14c.147-.078.276-.187.378-.32a.7.7 0 0 0 .12-.299q.03-.249 0-.498l-.15-1.218l-.19-1.207a.3.3 0 0 0-.329-.27a.29.29 0 0 0-.269.32l-.1 1.157l-.06.769c-.518-.37-.997-.729-1.596-1.128c-.598-.4-1.367-.998-2.065-1.566c-.699-.57-1.397-.998-2.095-1.537c-1.387-.998-2.754-1.936-3.991-2.873q.1.006.2 0c.668 0 1.386.07 1.885.08a.342.342 0 0 0 .08-.679a12 12 0 0 0-2.275-.499a2.1 2.1 0 0 0-1.227.34a.6.6 0 0 0-.25.418a5 5 0 0 0 0 .58l.15 1.945a.32.32 0 0 0 .29.319a.3.3 0 0 0 .348-.32"/></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. ResponsiveDesignExpandIcon.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.