⏳
Loading Icons...
Please wait while we load all 1,641+ Lucide icons
📖 Usage Examples
HTML with data-lucide attribute:
<i data-lucide="heart"></i>
<i data-lucide="star" class="icon--lg"></i>
<i data-lucide="shopping-cart" class="icon--warning"></i>
JavaScript with Lucide library:
import { Heart, Star, ShoppingCart } from 'lucide';
// Create icon elements
const heartIcon = Heart();
const starIcon = Star({ size: 24, color: '#f59e0b' });
const cartIcon = ShoppingCart({ strokeWidth: 2 });
CSS Classes for styling:
/* Size variations */
.icon--xs { width: 12px; height: 12px; }
.icon--sm { width: 16px; height: 16px; }
.icon--md { width: 20px; height: 20px; } /* default */
.icon--lg { width: 24px; height: 24px; }
.icon--xl { width: 32px; height: 32px; }
/* Color variations */
.icon--primary { color: #ED8B00; }
.icon--secondary { color: #6c757d; }
.icon--success { color: #28a745; }
.icon--danger { color: #dc3545; }
.icon--warning { color: #ffc107; }
.icon--info { color: #17a2b8; }
.icon--muted { color: #6c757d; opacity: 0.6; }
.icon--filled { fill: currentColor; }
CDN Usage:
<!-- Add to your HTML head -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
<!-- In your HTML body -->
<i data-lucide="heart"></i>
<!-- Initialize icons -->
<script>
lucide.createIcons();
</script>