Home/Libraries/Freehand free icons (Iconify)/lock-circle

Freehand free icons (Iconify)

LockCircle

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="M19.813 15.136a.341.341 0 0 0-.68.07c.5 5.31-2.305 7.537-5.56 7.756a9.58 9.58 0 0 1-6.149-1.837a4.82 4.82 0 0 1-2.116-3.404a8.36 8.36 0 0 1 1.347-5.8a6.35 6.35 0 0 1 5.251-2.485c4.842 0 6.34 1.996 6.719 3.743a.3.3 0 0 0 .589-.12a4.64 4.64 0 0 0-1.727-2.855c0-1.267 0-2.575-.11-3.843a27 27 0 0 0-.33-2.745A4.1 4.1 0 0 0 15.051.92a6.1 6.1 0 0 0-3.115-.909a4.38 4.38 0 0 0-4.692 3.993c-.07.63-.13 1.577-.17 2.656c-.04 1.078-.05 2.336-.12 3.434a7.2 7.2 0 0 0-1.167 1.168A9.4 9.4 0 0 0 4.16 17.81a5.91 5.91 0 0 0 2.585 4.213a10.47 10.47 0 0 0 6.908 1.947c3.654-.37 6.868-2.875 6.16-8.835M7.883 6.69c.11-1.049.23-1.997.33-2.576a3.404 3.404 0 0 1 3.703-2.995a5.3 5.3 0 0 1 2.576.719a3.13 3.13 0 0 1 1.587 1.937q.348 1.632.51 3.294a47 47 0 0 1 .179 2.605a10.86 10.86 0 0 0-4.852-1.118a7.1 7.1 0 0 0-4.113.999c.08-1.019-.01-1.937.08-2.865"/><path d="M12.845 17.552a2.4 2.4 0 0 1-.999.33a.9.9 0 0 1-.798-.3a.302.302 0 1 0-.48.369a1.52 1.52 0 0 0 .999.639a3 3 0 0 0 1.617-.22a2.28 2.28 0 0 0 1.438-1.587a2.88 2.88 0 0 0-.41-2.066a2 2 0 0 0-1.287-.889a3.17 3.17 0 0 0-1.997.27a1.997 1.997 0 0 0-.998 2.994a.33.33 0 0 0 .449.17a.35.35 0 0 0 .17-.45a1.24 1.24 0 0 1 .369-1.586a2.16 2.16 0 0 1 1.587-.32a.94.94 0 0 1 .719.42c.25.373.365.82.33 1.267a1.36 1.36 0 0 1-.71.959"/></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. LockCircleIcon.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.