Home/Libraries/Freehand free icons (Iconify)/light-mode-dark-light

Freehand free icons (Iconify)

LightModeDarkLight

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="M16.12 8.85a5.35 5.35 0 0 0-4.529-2.359a7.7 7.7 0 0 0-2.65.43c-4.07 1.56-5.619 8.739.06 10.089c2.67.66 5.37.74 7-1.46a6.17 6.17 0 0 0 .12-6.7m-.78 6.16c-1.45 1.79-3.789 1.55-5.999 1a5 5 0 0 1-1.18-.42c-3.16-1.64-1.88-6.69 1.07-7.95c.61-.26 3.84-1.429 6.08 1.37c.4.472.679 1.036.81 1.64a5.28 5.28 0 0 1-.78 4.36"/><path d="M11.891 10.01a5 5 0 0 1-.26-2.17c.1-.43-.74-.5-.82 0a4.1 4.1 0 0 0 1.08 3.78a5.44 5.44 0 0 0 3.67 1.84a.371.371 0 0 0 .06-.74a4.89 4.89 0 0 1-3.73-2.71m-.67-4.998a.33.33 0 0 0 .32-.33q.125-.64.17-1.29a5.9 5.9 0 0 0-.44-2a.31.31 0 0 0-.56.22c-.02.29-.23 3.4.51 3.4M3.313 12.19c-.44-.07-.83-.21-1.25-.28s-2.06.04-2.06.36c-.09.64 2.11.77 3.31.57a.33.33 0 0 0 0-.65m18.627-.25c-.42.08-.81.22-1.24.29a.33.33 0 0 0 0 .65q.646.114 1.3.13c.55 0 2-.42 2-.74s-1.74-.38-2.06-.33m-9.609 7.6c0-.11-.17-.15-.38-.09c-.37.11-.81 2.18-.09 3.11a.326.326 0 0 0 .535.067a.33.33 0 0 0 .045-.357a8.6 8.6 0 0 0-.11-2.73m-5.659-1.48c-.39.36-2.13 1.43-2.35 2.23c-.05.18-.06.31 0 .41a.36.36 0 0 0 .21.12a5.13 5.13 0 0 0 2.6-2.35a.32.32 0 0 0-.46-.41m10.698.06a.33.33 0 0 0-.5.42q.337.587.79 1.09a7.2 7.2 0 0 0 1.84 1.24a.32.32 0 0 0 .2-.13c.63-.58-2.18-2.48-2.33-2.62M5.742 7.921a.322.322 0 1 0 .46-.45a6 6 0 0 0-2.7-2.19c-.37-.16-.56.05-.54.21c0 .35 1.09 1.36 1.54 1.65s.84.49 1.24.78M21 5.531c0-.15-.16-.38-.54-.2a5.9 5.9 0 0 0-2.68 2.2a.322.322 0 0 0 .46.45c.19-.15 2.76-1.73 2.76-2.45"/></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. LightModeDarkLightIcon.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.