Lucide Icon Grid
A responsive grid of crisp Lucide icons with hover lift — a clean, modern icon set via CDN.
Requires Lucide Icons. Add the CDN tag below to your page (styles in
<head>, scripts before </body>). The downloaded file already includes it.<script src="https://unpkg.com/lucide@latest"></script><div class="lu-grid">
<div class="lu"><i data-lucide="rocket"></i><span>Launch</span></div>
<div class="lu"><i data-lucide="heart"></i><span>Like</span></div>
<div class="lu"><i data-lucide="bell"></i><span>Alerts</span></div>
<div class="lu"><i data-lucide="settings"></i><span>Settings</span></div>
<div class="lu"><i data-lucide="download"></i><span>Download</span></div>
<div class="lu"><i data-lucide="shield-check"></i><span>Secure</span></div>
</div>body{background:#f6f7fa}
.lu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;font-family:system-ui,sans-serif}
.lu{display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;border:1px solid #eceef3;border-radius:14px;padding:20px;transition:.2s;cursor:pointer}
.lu:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(20,25,50,.1);color:#ff477e}
.lu svg{width:28px;height:28px}
.lu span{font-size:13px;font-weight:600;color:#5a627a}lucide.createIcons();Free to use.This component uses Lucide Icons (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.