Lock Icon - Copy this React, Tailwind Component to your project
Preview this <!DOCTYPE html> <html> <head> <style> .lock wrapper { display: flex; align items: center; justify content: center; min height: 100vh; } .lock container { position: relative; width: 100px; /* Increased from 50px */ height: 100px; /* Increased from 50px */ } .lock icon { width: 100%; height: 100%; stroke: #5100FF; stroke width: 3; /* Increased from 2 for better visibility */ fill: none; stroke linecap: round; stroke linejoin: round; position: absolute; top: 0; left: 0; } .lock base { opacity: 1; } .lock shackle { animation: moveShackle 3s ease in out infinite; } .sound lines path { stroke: #5100FF; stroke width: 3; /* Increased from 2 */ stroke linecap: round; } .sound lines path { stroke dasharray: 8; /* Increased from 6 */ stroke dashoffset: 8; /* Increased from 6 */ animation: growLine 3s ease in out infinite; } @keyframes moveShackle { 0%, 100% { d: path("M7 11V7a5 5 0 0110 0v4"); stroke dashoffset: 0; } 50% { d: path("M7 11V7a5 5 0 0110 0v0"); stroke dashoffset: 10; } } @keyframes growLine { 0%, 40%, 60%, 100% { stroke dashoffset: 8; /* Increased from 6 */ } 45%, 55% { stroke dashoffset: 0; } } </style> </head> <body> <div class="lock wrapper"> <div class="lock container"> <svg class="lock icon" viewBox="0 0 44 24"> <! Lock Base > <rect class="lock base" x="3" y="11" width="18" height="11" rx="2"/> <! Animated Shackle > <path class="lock shackle" d="M7 11V7a5 5 0 0110 0v4"/> <! Growing Sound Lines > <g class="sound lines" transform="translate(8, 0)"> <path d="M19 5l4 2"/> <path d="M19 11h4"/> <path d="M19 17l4 2"/> </g> </svg> </div> </div> </body> </html>
