Home/Libraries/Freehand free icons (Iconify)/dashboard-layout

Freehand free icons (Iconify)

DashboardLayout

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" fill-rule="evenodd" d="M.52 15.77a2 2 0 0 0 .66.19c.79.11 2.47.24 4.15.31a24.4 24.4 0 0 0 4.78-.11a1.05 1.05 0 0 0 .51-.41a2 2 0 0 0 .24-.95c0-.43.06-.85.07-1.28s0-.86 0-1.29l-.22-8.52l-.16-2.12q.038-.36 0-.72a.9.9 0 0 0-.25-.49a1.93 1.93 0 0 0-.96-.24C8.1.05 5.39 0 3.27 0H.17A7 7 0 0 0 .1 1.89C.12 4.81.16 11.21.23 14v1.24a.7.7 0 0 0 .29.53m.82-15c1.87 0 6 .12 7.74.27c.16 0 .33 0 .46.06c0 .13.16 2.65.16 2.65v6c0 .86 0 1.72.06 2.57v1.22c0 .41 0 .81-.07 1.22c0 .09 0 .29-.05.37q-1.682.15-3.37.06C4.71 15.11 3.02 15 1.94 15a7 7 0 0 1-.64-.13c0-.22 0-.51-.05-.85c-.14-2.84-.39-9.23-.5-12.15L.71.75zm22.21 7.36a1 1 0 0 0-.53-.41a26 26 0 0 0-4.87-.17c-1.72 0-3.43.14-4.24.25a1.75 1.75 0 0 0-.68.18a.65.65 0 0 0-.26.54v14.82a.44.44 0 0 0 .15.41c.2.23 1.89.09 3 .09c2.12 0 4.83 0 6.07-.11c.328.001.65-.078.94-.23a.9.9 0 0 0 .26-.49q.022-.36 0-.72l.15-2.12l.22-8.52v-1.29c0-.43 0-.85-.07-1.28a2 2 0 0 0-.14-.95m-.92 12l-.1 2.15c0 .11-.1.37-.05.5c-.13 0-.3.05-.47.06c-1.78.15-5.87.23-7.73.27h-.64v-1.14c.07-2.94.23-9.39.33-12.2v-.85q.321-.087.65-.13c1.1-.07 2.84-.11 4.44-.12a28 28 0 0 1 3.43.1c-.07.09.07.28.07.38c0 .41.06.82.07 1.22s0 .81 0 1.22c0 .85 0 1.71-.05 2.57c.05 2 .08 3.99.05 5.98zm-11.34-1.39a6 6 0 0 0-.06-.64a.84.84 0 0 0-.2-.39a1 1 0 0 0-.48-.2H8.84c-2.47 0-6.64.26-7.29.3c0 0-1-.14-1.09.15c0 .07-.11 1.77-.11 1.86v2.62a3.2 3.2 0 0 0 0 .76a.85.85 0 0 0 .25.51c.263.147.559.226.86.23c1.07.06 3.43.06 5.56.06c1.58 0 3-.13 3.7-.18h.4a.61.61 0 0 0 .5-.36c.124-.52.151-1.06.08-1.59c-.1-1.2-.36-2.67-.41-3.13m-1.27 3.91c-1.71.12-5.18.34-7.32.37c-.61 0-1.16.1-1.48.07a2.1 2.1 0 0 1-.08-.69l-.12-2.61V18.5h.57c.74 0 6-.1 8.15 0q.204.006.4.06c0 .11.06.23.06.28c0 .4.2 1.57.3 2.61c0 .44.09.86.09 1.14zM23.8.39a.57.57 0 0 0-.51-.33h-4.1c-2.12 0-4.48.13-5.57.28a1.8 1.8 0 0 0-.85.26a.9.9 0 0 0-.23.52a4.5 4.5 0 0 0 0 .76l.13 2.62l.07 1.2s0 .7.22.89s8.29-.13 8.29-.13a16 16 0 0 0 1.7-.1a.83.83 0 0 0 .47-.22a.72.72 0 0 0 .19-.4a5 5 0 0 0 0-.64c0-.46.23-1.94.28-3.08c.08-.544.05-1.098-.09-1.63m-1 2c0 1-.16 2.22-.19 2.62c0 0 0 .17-.05.28a2.5 2.5 0 0 1-.39.08c-2.14.19-7.41.32-8.15.34h-.56a.4.4 0 0 1 0-.09V1.81c0-.11.05-.6.11-.61c.31 0 .81-.06 1.42-.08c2.15-.05 5.62 0 7.33.07h.56c-.07.3-.1.72-.12 1.17z" clip-rule="evenodd"/></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. DashboardLayoutIcon.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.