Lucide for Vanilla JavaScript
The core Lucide package for vanilla JavaScript applications. This package allows you to easily add scalable vector icons to any web project without framework dependencies. Perfect for static websites, legacy applications, or when you need lightweight icon integration with maximum browser compatibility.
What you can accomplish:
- Add icons to HTML using simple data attributes
- Dynamically create and insert SVG icons with JavaScript
- Customize icon appearance with CSS classes and inline styles
- Tree-shake unused icons to keep bundle sizes minimal
- Use icons in Vanilla JS with HTML
Lucide is designed to be lightweight and easy to use, making it an excellent choice for projects that require icons without the overhead of a full framework integration.
Overview
Getting startedLearn how to get started with Lucide.Migration from v0Learn how to migrate from v0 to v1 of Lucide.
Basics
ColorAdjust the color of your iconsSizingAdjust the size of your iconsStroke widthAdjust the stroke width of your icons
Advanced
Global stylingApply options and styles globallyShadow DOMAll exported types and how to use themTemplate elementUsing content template element with lucideAccessibilityMaking your icons accessibleWith Lucide LabUsing lucide-lab with lucideFilled iconsUsing filled icons in lucide