Bootstrap 5
Icones
Lucide
Template
Html
Integration Icones
Dashboard
Icones Lucide optimisées pour la visualisation et l'interaction. Icônes modernes et responsive.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="copyright" content="MEZGANI Said" />
<meta name="author" content="AngularForAll" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Snippet Icones Lucice Bootstrap 5 2026 23040037 | AngularForAll</title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<style>
body {
background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
min-height: 100vh;
padding: 2rem 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.header-section {
background: rgba(255, 255, 255, 0.95);
border-radius: 24px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.icon-card {
background: white;
border-radius: 16px;
padding: 1.5rem 1rem;
height: 100%;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
cursor: pointer;
position: relative;
overflow: hidden;
}
.icon-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(245, 158, 11, 0.25);
border-color: #f59e0b;
}
.icon-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #f59e0b, #ef4444);
transform: scaleX(0);
transition: transform 0.3s;
}
.icon-card:hover::before {
transform: scaleX(1);
}
.icon-wrapper {
width: 72px;
height: 72px;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #fef3c7 0%, #fce7f3 100%);
border-radius: 16px;
transition: all 0.3s;
}
.icon-card:hover .icon-wrapper {
background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
transform: scale(1.05) rotate(3deg);
}
.icon-wrapper svg {
width: 32px;
height: 32px;
stroke: #f59e0b;
stroke-width: 2;
transition: all 0.3s;
}
.icon-card:hover .icon-wrapper svg {
stroke: white;
transform: scale(1.1);
}
.icon-name {
font-size: 13px;
font-weight: 600;
color: #1f2937;
margin-bottom: 0.5rem;
word-break: break-all;
font-family: 'SF Mono', 'Monaco', 'Fira Code', monospace;
background: #f9fafb;
padding: 6px 10px;
border-radius: 8px;
text-align: center;
border: 1px solid #e5e7eb;
}
.copy-btn {
background: white;
color: #f59e0b;
border: 2px solid #f59e0b;
padding: 8px 16px;
border-radius: 10px;
font-size: 12px;
font-weight: 600;
transition: all 0.3s;
width: 100%;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.copy-btn:hover {
background: linear-gradient(135deg, #f59e0b, #ef4444);
color: white;
border-color: transparent;
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.copy-btn.copied {
background: #10b981;
color: white;
border-color: #10b981;
}
.search-box {
background: white;
border-radius: 16px;
padding: 0.5rem 1.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
border: 1px solid #e5e7eb;
}
.search-box input {
border: none;
outline: none;
padding: 12px 0;
font-size: 16px;
width: 100%;
background: transparent;
}
.search-box input::placeholder {
color: #9ca3af;
}
.category-filter {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 1rem;
}
.filter-btn {
background: white;
border: 2px solid #e5e7eb;
padding: 8px 20px;
border-radius: 12px;
font-weight: 600;
transition: all 0.3s;
color: #1f2937;
font-size: 14px;
}
.filter-btn:hover,
.filter-btn.active {
background: linear-gradient(135deg, #f59e0b, #ef4444);
color: white;
border-color: transparent;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}
.stats-badge {
background: rgba(255, 255, 255, 0.15);
padding: 10px 24px;
border-radius: 16px;
color: white;
font-weight: 600;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.toast-notification {
position: fixed;
bottom: 30px;
right: 30px;
background: white;
padding: 16px 24px;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
display: none;
align-items: center;
gap: 12px;
z-index: 9999;
animation: slideInToast 0.3s ease;
border-left: 4px solid #10b981;
}
@keyframes slideInToast {
from {
transform: translateX(400px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.toast-notification.show {
display: flex;
}
.footer-note {
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 1rem 2rem;
backdrop-filter: blur(10px);
color: white;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.lucide-badge {
background: linear-gradient(135deg, #f59e0b, #ef4444);
color: white;
font-size: 12px;
padding: 4px 12px;
border-radius: 20px;
margin-left: 12px;
font-weight: 600;
}
.stats-highlight {
background: rgba(245, 158, 11, 0.1);
border-radius: 12px;
padding: 8px 16px;
margin-top: 12px;
font-size: 14px;
color: #f59e0b;
border: 1px solid rgba(245, 158, 11, 0.2);
}
</style>
</head>
<body>
<div class="container">
<!-- Header Section -->
<div class="header-section">
<div class="row align-items-center">
<div class="col-lg-8">
<h1 class="display-4 fw-bold mb-3 d-flex align-items-center" style="color: #1f2937;">
<i data-lucide="lucide" style="width: 48px; height: 48px; stroke: #f59e0b; stroke-width: 2; margin-right: 16px;"></i>
316 Icônes Lucide
<span class="lucide-badge">v0.263.1</span>
</h1>
<p class="lead text-muted mb-3">Lucide Icons • Fork actif de Feather • 1500+ icônes • Communauté active</p>
<div class="stats-highlight">
<i data-lucide="zap" style="width: 16px; height: 16px; stroke: #f59e0b; margin-right: 8px;"></i>
Successeur moderne de Feather Icons • 8x plus d'icônes • Mises à jour hebdomadaires
</div>
<!-- Search Box -->
<div class="search-box mt-3">
<div class="d-flex align-items-center">
<i data-lucide="search" style="width: 20px; height: 20px; stroke: #9ca3af; margin-right: 12px;"></i>
<input type="text" id="searchInput" placeholder="Rechercher une icône... (ex: heart, user, settings)">
</div>
</div>
<!-- Category Filters -->
<div class="category-filter">
<button class="filter-btn active" data-filter="all">Toutes (316)</button>
<button class="filter-btn" data-filter="core">Core UI</button>
<button class="filter-btn" data-filter="media">Media & Files</button>
<button class="filter-btn" data-filter="social">Social & Brands</button>
<button class="filter-btn" data-filter="dev">Dev & Tech</button>
</div>
</div>
<div class="col-lg-4 text-center text-lg-end mt-4 mt-lg-0">
<div class="stats-badge d-inline-block">
<i data-lucide="grid" style="width: 20px; height: 20px; stroke: white; margin-right: 8px;"></i>
<span id="visibleCount">316</span> icônes affichées
</div>
<div class="stats-badge d-inline-block mt-3">
<i data-lucide="package" style="width: 20px; height: 20px; stroke: white; margin-right: 8px;"></i>
<span id="totalCount">1500+</span> disponibles
</div>
</div>
</div>
</div>
<!-- Icons Grid -->
<div class="row g-4" id="iconsGrid"></div>
<!-- Footer -->
<div class="footer-note text-center mt-5">
<p class="mb-0">
<i data-lucide="copy" style="width: 18px; height: 18px; stroke: white; margin-right: 8px;"></i>
Cliquez sur une icône pour copier son code •
<i data-lucide="code" style="width: 18px; height: 18px; stroke: white; margin: 0 8px;"></i>
<i data-lucide="heart"></i>
</p>
</div>
</div>
<!-- Toast Notification -->
<div class="toast-notification" id="toast">
<i data-lucide="check-circle" style="width: 24px; height: 24px; stroke: #10b981;"></i>
<div>
<strong style="color: #1f2937;">Code copié !</strong>
<div style="color: #6b7280; font-size: 14px;" id="toastMessage"></div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Base de données des icônes Lucide (316 icônes sélectionnées)
const lucideIcons = {
core: [
'activity', 'airplay', 'alert-circle', 'alert-octagon', 'alert-triangle', 'align-center', 'align-justify',
'align-left', 'align-right', 'anchor', 'aperture', 'archive', 'arrow-big-down', 'arrow-big-left',
'arrow-big-right', 'arrow-big-up', 'arrow-down', 'arrow-down-circle', 'arrow-left', 'arrow-left-circle',
'arrow-right', 'arrow-right-circle', 'arrow-up', 'arrow-up-circle', 'at-sign', 'award', 'axe',
'banknote', 'bar-chart', 'bar-chart-2', 'battery', 'battery-charging', 'battery-full', 'battery-low',
'battery-medium', 'battery-warning', 'beaker', 'bell', 'bell-minus', 'bell-off', 'bell-plus',
'bell-ring', 'blocks', 'bluetooth', 'bluetooth-connected', 'bluetooth-off', 'bluetooth-searching',
'bold', 'bolt', 'book', 'book-open', 'bookmark', 'bookmark-minus', 'bookmark-plus', 'box',
'box-select', 'braces', 'brackets', 'brain', 'briefcase', 'brush', 'bug', 'building',
'bus', 'cake', 'calculator', 'calendar', 'calendar-check', 'calendar-days', 'calendar-heart',
'calendar-minus', 'calendar-off', 'calendar-plus', 'calendar-range', 'calendar-search', 'calendar-x',
'camera', 'camera-off', 'car', 'card-stack', 'carrot', 'case-sensitive', 'cast', 'castle',
'cat', 'check', 'check-circle', 'check-square', 'chef-hat', 'cherry', 'chevron-down', 'chevron-left',
'chevron-right', 'chevron-up', 'chevrons-down', 'chevrons-left', 'chevrons-right', 'chevrons-up',
'chrome', 'circle', 'circle-dot', 'circle-ellipsis', 'circle-slashed', 'citrus', 'clapperboard',
'clipboard', 'clipboard-check', 'clipboard-copy', 'clipboard-list', 'clipboard-paste', 'clipboard-signature',
'clipboard-type', 'clock', 'clock-1', 'clock-10', 'clock-11', 'clock-12', 'clock-2', 'clock-3',
'clock-4', 'clock-5', 'clock-6', 'clock-7', 'clock-8', 'clock-9', 'cloud', 'cloud-cog',
'cloud-drizzle', 'cloud-fog', 'cloud-hail', 'cloud-lightning', 'cloud-moon', 'cloud-moon-rain',
'cloud-off', 'cloud-rain', 'cloud-rain-wind', 'cloud-snow', 'cloud-sun', 'cloud-sun-rain', 'cloudy'
],
media: [
'code', 'codepen', 'codesandbox', 'coffee', 'cog', 'cogs', 'columns', 'combine', 'command',
'compass', 'component', 'concierge-bell', 'construction', 'contact', 'container', 'contrast',
'cookie', 'copy', 'copyleft', 'copyright', 'corner-down-left', 'corner-down-right', 'corner-left-down',
'corner-left-up', 'corner-right-down', 'corner-right-up', 'corner-up-left', 'corner-up-right',
'cpu', 'creative-commons', 'credit-card', 'croissant', 'crop', 'cross', 'crosshair', 'crown',
'cup-soda', 'database', 'database-backup', 'database-zap', 'delete', 'diamond', 'dice-1',
'dice-2', 'dice-3', 'dice-4', 'dice-5', 'dice-6', 'dices', 'diff', 'disc', 'divide',
'divide-circle', 'divide-square', 'dollar-sign', 'dot', 'download', 'download-cloud', 'dribbble',
'droplet', 'droplets', 'drumstick', 'edit', 'edit-2', 'edit-3', 'egg', 'equal', 'equal-not',
'eraser', 'euro', 'expand', 'external-link', 'eye', 'eye-off', 'factory', 'fan', 'fast-forward',
'feather', 'figma', 'file', 'file-archive', 'file-audio', 'file-axis-3d', 'file-badge',
'file-bar-chart', 'file-box', 'file-check', 'file-clock', 'file-code', 'file-cog', 'file-diff',
'file-digit', 'file-down', 'file-edit', 'file-heart', 'file-image', 'file-input', 'file-json',
'file-key', 'file-line-chart', 'file-lock', 'file-minus', 'file-output', 'file-pie-chart',
'file-plus', 'file-question', 'file-scan', 'file-search', 'file-signature', 'file-spreadsheet',
'file-stack', 'file-symlink', 'file-terminal', 'file-text', 'file-type', 'file-up', 'file-video',
'file-volume', 'file-warning', 'file-x', 'files', 'film', 'filter', 'fingerprint', 'fire-extinguisher',
'fish', 'fish-symbol', 'flag', 'flag-off', 'flag-triangle-left', 'flag-triangle-right', 'flame',
'flashlight', 'flashlight-off', 'flask-conical', 'flask-round', 'flip-horizontal', 'flip-vertical',
'flower', 'flower-2', 'focus', 'folder', 'folder-archive', 'folder-check', 'folder-clock',
'folder-closed', 'folder-cog', 'folder-dot', 'folder-down', 'folder-edit', 'folder-git',
'folder-heart', 'folder-input', 'folder-kanban', 'folder-key', 'folder-lock', 'folder-minus',
'folder-open', 'folder-open-dot', 'folder-output', 'folder-plus', 'folder-root', 'folder-search',
'folder-symlink', 'folder-sync', 'folder-tree', 'folder-up', 'folder-x', 'folders', 'footprints',
'forklift', 'form-input', 'form-password', 'forward', 'frame', 'framer', 'frown', 'fuel',
'fullscreen', 'function-square', 'gallery-horizontal', 'gallery-horizontal-end', 'gallery-thumbnails',
'gallery-vertical', 'gallery-vertical-end', 'gamepad', 'gamepad-2', 'gantt-chart', 'gantt-chart-square',
'gauge', 'gauge-circle', 'gavel', 'gem', 'ghost', 'gift', 'git-branch', 'git-branch-plus',
'git-commit', 'git-compare', 'git-fork', 'git-merge', 'git-pull-request', 'git-pull-request-closed',
'git-pull-request-draft', 'github', 'gitlab', 'glass-water', 'glasses', 'globe', 'globe-2',
'goal', 'grab', 'graduation-cap', 'grape', 'grid', 'grid-2x2', 'grid-3x3', 'grip',
'grip-horizontal', 'grip-vertical', 'hammer', 'hand', 'hand-metal', 'hard-drive', 'hard-hat',
'hash', 'haze', 'headphones', 'heart', 'heart-crack', 'heart-handshake', 'heart-off',
'heart-pulse', 'help-circle', 'helping-hand', 'hexagon', 'highlighter', 'history', 'home',
'hop', 'hotel', 'hourglass', 'ice-cream', 'image', 'image-minus', 'image-off', 'image-plus',
'import', 'inbox', 'indent', 'indian-rupee', 'infinity', 'info', 'inspect', 'instagram',
'italic', 'japanese-yen', 'joystick', 'key', 'key-round', 'key-square', 'keyboard',
'lamp', 'lamp-ceiling', 'lamp-desk', 'lamp-floor', 'lamp-wall-down', 'lamp-wall-up',
'landmark', 'languages', 'laptop', 'laptop-2', 'lasso', 'lasso-select', 'laugh',
'layers', 'layout', 'layout-dashboard', 'layout-grid', 'layout-list', 'layout-panel-left',
'layout-panel-top', 'layout-template', 'leaf', 'leafy-green', 'library', 'life-buoy',
'ligature', 'lightbulb', 'lightbulb-off', 'line-chart', 'link', 'link-2', 'link-2-off',
'link-off', 'linkedin', 'list', 'list-checks', 'list-collapse', 'list-end', 'list-filter',
'list-minus', 'list-music', 'list-ordered', 'list-plus', 'list-restart', 'list-start',
'list-tree', 'list-video', 'list-x', 'loader', 'loader-2', 'locate', 'locate-fixed',
'locate-off', 'lock', 'log-in', 'log-out', 'lollipop', 'luggage', 'magnet', 'mail',
'mail-check', 'mail-minus', 'mail-open', 'mail-plus', 'mail-question', 'mail-search',
'mail-warning', 'mail-x', 'mailbox', 'mails', 'map', 'map-pin', 'map-pin-off',
'martini', 'maximize', 'maximize-2', 'medal', 'megaphone', 'megaphone-off', 'meh',
'memory-stick', 'menu', 'menu-square', 'merge', 'message-circle', 'message-square',
'mic', 'mic-2', 'mic-off', 'microscope', 'microwave', 'milestone', 'milk',
'milk-off', 'minimize', 'minimize-2', 'minus', 'minus-circle', 'minus-square',
'monitor', 'monitor-check', 'monitor-dot', 'monitor-down', 'monitor-off', 'monitor-pause',
'monitor-play', 'monitor-smartphone', 'monitor-speaker', 'monitor-stop', 'monitor-up',
'monitor-x', 'moon', 'moon-star', 'more-horizontal', 'more-vertical', 'mountain',
'mountain-snow', 'mouse', 'mouse-pointer', 'mouse-pointer-2', 'mouse-pointer-click',
'move', 'move-3d', 'move-diagonal', 'move-diagonal-2', 'move-down', 'move-down-left',
'move-down-right', 'move-horizontal', 'move-left', 'move-right', 'move-up', 'move-up-left',
'move-up-right', 'move-vertical', 'music', 'music-2', 'music-3', 'music-4', 'navigation',
'navigation-2', 'navigation-2-off', 'navigation-off', 'network', 'newspaper', 'nfc',
'nut', 'nut-off', 'octagon', 'option', 'orbit', 'outdent', 'package', 'package-2',
'package-check', 'package-minus', 'package-open', 'package-plus', 'package-search',
'package-x', 'paint-bucket', 'paintbrush', 'palette', 'palmtree', 'panel-bottom',
'panel-bottom-close', 'panel-bottom-inactive', 'panel-bottom-open', 'panel-left',
'panel-left-close', 'panel-left-inactive', 'panel-left-open', 'panel-right',
'panel-right-close', 'panel-right-inactive', 'panel-right-open', 'panel-top',
'panel-top-close', 'panel-top-inactive', 'panel-top-open', 'paperclip', 'parentheses',
'parking-circle', 'parking-circle-off', 'parking-meter', 'parking-square',
'parking-square-off', 'party-popper', 'pause', 'pause-circle', 'paw-print', 'pen',
'pen-line', 'pen-square', 'pen-tool', 'pencil', 'pencil-line', 'pencil-ruler',
'percent', 'person-standing', 'phone', 'phone-call', 'phone-forwarded', 'phone-incoming',
'phone-missed', 'phone-off', 'phone-outgoing', 'pi', 'pi-square', 'picture-in-picture',
'picture-in-picture-2', 'pie-chart', 'piggy-bank', 'pilcrow', 'pilcrow-square',
'pin', 'pin-off', 'pipette', 'pizza', 'plane', 'plane-landing', 'plane-takeoff',
'play', 'play-circle', 'plug', 'plug-2', 'plug-zap', 'plus', 'plus-circle',
'plus-square', 'pocket', 'pocket-knife', 'podcast', 'pointer', 'popcorn',
'popsicle', 'pound-sterling', 'power', 'power-off', 'presentation', 'printer',
'projector', 'puzzle', 'qr-code', 'quote', 'rabbit', 'radar', 'radiation',
'radio', 'radio-receiver', 'radio-tower', 'rainbow', 'rat', 'ratio', 'receipt',
'rectangle-horizontal', 'rectangle-vertical', 'recycle', 'redo', 'redo-2',
'redo-dot', 'refresh-ccw', 'refresh-ccw-dot', 'refresh-cw', 'refresh-cw-off',
'refrigerator', 'regex', 'remove-formatting', 'repeat', 'repeat-1', 'repeat-2',
'replace', 'replace-all', 'reply', 'reply-all', 'rewind', 'rocket', 'rocking-chair',
'roller-coaster', 'rotate-3d', 'rotate-ccw', 'rotate-cw', 'router', 'rows',
'rss', 'ruler', 'russian-ruble', 'sailboat', 'salad', 'sandwich', 'satellite',
'satellite-dish', 'save', 'save-all', 'scale', 'scale-3d', 'scaling',
'scan', 'scan-barcode', 'scan-eye', 'scan-face', 'scan-line', 'scan-search',
'scan-text', 'scatter-chart', 'school', 'school-2', 'scissors', 'scissors-line-dashed',
'scissors-square', 'scissors-square-dashed-bottom', 'screen-share', 'screen-share-off',
'scroll', 'scroll-text', 'search', 'search-check', 'search-code', 'search-slash',
'search-x', 'send', 'send-horizonal', 'send-to-back', 'separator-horizontal',
'separator-vertical', 'server', 'server-cog', 'server-crash', 'server-off',
'settings', 'settings-2', 'shapes', 'share', 'share-2', 'sheet', 'shell',
'shield', 'shield-alert', 'shield-ban', 'shield-check', 'shield-close', 'shield-ellipsis',
'shield-half', 'shield-minus', 'shield-off', 'shield-plus', 'shield-question',
'shield-x', 'ship', 'shirt', 'shopping-bag', 'shopping-cart', 'shovel',
'shower-head', 'shrink', 'shrub', 'shuffle', 'sidebar', 'sidebar-close',
'sidebar-open', 'sigma', 'sigma-square', 'signal', 'signal-high', 'signal-low',
'signal-medium', 'signal-zero', 'siren', 'skip-back', 'skip-forward', 'skull',
'slack', 'slash', 'slice', 'sliders', 'sliders-horizontal', 'smartphone',
'smartphone-charging', 'smartphone-nfc', 'smile', 'smile-plus', 'snowflake',
'sofa', 'sort-asc', 'sort-desc', 'soup', 'space', 'spade', 'sparkle',
'sparkles', 'speaker', 'speech', 'spell-check', 'spell-check-2', 'spline',
'split', 'split-square-horizontal', 'split-square-vertical', 'spray-can',
'sprout', 'square', 'square-asterisk', 'square-code', 'square-dashed-bottom',
'square-dashed-bottom-code', 'square-dot', 'square-equal', 'square-gantt',
'square-kanban', 'square-kanban-dashed', 'square-pen', 'square-slashed',
'square-stack', 'squirrel', 'stamp', 'star', 'star-half', 'star-off',
'step-back', 'step-forward', 'stethoscope', 'sticker', 'sticky-note',
'stop-circle', 'store', 'stretch-horizontal', 'stretch-vertical', 'strikethrough',
'subscript', 'subtitles', 'sun', 'sun-dim', 'sun-medium', 'sun-moon',
'sun-snow', 'sunrise', 'sunset', 'superscript', 'swatch-book', 'swiss-franc',
'switch-camera', 'sword', 'swords', 'syringe', 'table', 'table-2',
'table-properties', 'tablet', 'tablet-smartphone', 'tablets', 'tag',
'tags', 'tally-1', 'tally-2', 'tally-3', 'tally-4', 'tally-5',
'target', 'tent', 'tent-tree', 'terminal', 'terminal-square', 'test-tube',
'test-tube-2', 'test-tubes', 'text', 'text-cursor', 'text-cursor-input',
'text-quote', 'text-selection', 'thermometer', 'thermometer-snowflake',
'thermometer-sun', 'thumbs-down', 'thumbs-up', 'ticket', 'ticket-minus',
'ticket-percent', 'ticket-plus', 'ticket-slash', 'ticket-x', 'timer',
'timer-off', 'timer-reset', 'toggle-left', 'toggle-right', 'tornado',
'torus', 'touchpad', 'touchpad-off', 'tower-control', 'toy-brick',
'tractor', 'traffic-cone', 'train', 'train-front', 'train-front-tunnel',
'train-track', 'tram-front', 'trash', 'trash-2', 'tree-deciduous',
'tree-palm', 'tree-pine', 'trees', 'trello', 'trending-down', 'trending-up',
'triangle', 'triangle-right', 'trophy', 'truck', 'turtle', 'tv',
'tv-2', 'twitch', 'twitter', 'type', 'umbrella', 'umbrella-off',
'underline', 'undo', 'undo-2', 'undo-dot', 'unfold-horizontal',
'unfold-vertical', 'ungroup', 'unlink', 'unlink-2', 'unlock',
'unplug', 'upload', 'upload-cloud', 'usb', 'user', 'user-2',
'user-check', 'user-cog', 'user-minus', 'user-plus', 'user-round',
'user-round-check', 'user-round-cog', 'user-round-minus', 'user-round-plus',
'user-round-search', 'user-round-x', 'user-search', 'user-square',
'user-x', 'users', 'users-2', 'users-round', 'utensils',
'utensils-crossed', 'utility-pole', 'variable', 'vault', 'vegan',
'venetian-mask', 'verified', 'vibrate', 'vibrate-off', 'video',
'video-off', 'videotape', 'view', 'voicemail', 'volume',
'volume-1', 'volume-2', 'volume-x', 'vote', 'wallet',
'wallet-2', 'wallet-cards', 'wallpaper', 'wand', 'wand-2',
'warehouse', 'watch', 'waves', 'webcam', 'webhook', 'weight',
'wheat', 'wheat-off', 'whole-word', 'wifi', 'wifi-off', 'wind',
'wine', 'wine-off', 'workflow', 'wrap-text', 'wrench', 'x',
'x-circle', 'x-octagon', 'x-square', 'youtube', 'zap', 'zap-off',
'zoom-in', 'zoom-out'
],
social: [
'facebook', 'twitter', 'instagram', 'youtube', 'linkedin', 'github', 'gitlab',
'twitch', 'discord', 'slack', 'figma', 'framer', 'dribbble', 'behance',
'codepen', 'codesandbox', 'dropbox', 'chrome', 'safari', 'edge', 'opera',
'firefox', 'brave', 'spotify', 'apple', 'windows', 'android', 'linux',
'ubuntu', 'centos', 'fedora', 'redhat', 'suse', 'amazon', 'google',
'microsoft', 'paypal', 'stripe', 'bitcoin', 'ethereum', 'litecoin',
'monero', 'dogecoin', 'ripple', 'tether', 'usd-coin', 'binance',
'alipay', 'wechat', 'telegram', 'whatsapp', 'signal', 'messenger',
'skype', 'viber', 'line', 'kakaotalk', 'snapchat', 'pinterest',
'tumblr', 'reddit', 'quora', 'medium', 'wordpress', 'joomla',
'drupal', 'magento', 'shopify', 'wix', 'squarespace', 'webflow',
'vercel', 'netlify', 'heroku', 'digitalocean', 'aws', 'azure',
'gcp', 'cloudflare', 'fastly', 'nginx', 'apache', 'tomcat',
'jetty', 'glassfish', 'wildfly', 'docker', 'kubernetes', 'terraform',
'ansible', 'puppet', 'chef', 'jenkins', 'travisci', 'circleci',
'github-actions', 'gitlab-ci', 'bitbucket', 'jira', 'confluence',
'trello', 'asana', 'monday', 'clickup', 'notion', 'airtable',
'slack', 'teams', 'zoom', 'meet', 'webex', 'gotomeeting',
'bluejeans', 'whereby', 'jitsi', 'bigbluebutton', 'element',
'matrix', 'rocketchat', 'zulip', 'mattermost', 'keybase',
'wire', 'threema', 'session', 'status', 'tox', 'briar',
'jami', 'linphone', 'ekiga', 'twilio', 'plivo', 'nexmo',
'bandwidth', 'telnyx', 'voipms', 'callcentric', 'flowroute',
'signalwire', 'avaya', 'cisco', 'polycom', 'yealink', 'grandstream',
'fanvil', 'escene', 'htek', 'snom', 'aastra', 'mitel',
'nec', 'panasonic', 'toshiba', 'samsung', 'lg', 'sony'
],
dev: [
'cpu', 'database', 'server', 'cloud', 'code', 'terminal', 'git-branch',
'git-commit', 'git-merge', 'git-pull-request', 'github', 'gitlab',
'bitbucket', 'docker', 'kubernetes', 'terraform', 'ansible', 'jenkins',
'travisci', 'circleci', 'github-actions', 'gitlab-ci', 'npm', 'yarn',
'pnpm', 'webpack', 'vite', 'rollup', 'esbuild', 'parcel', 'gulp',
'grunt', 'babel', 'typescript', 'javascript', 'python', 'java',
'kotlin', 'swift', 'objective-c', 'c', 'cpp', 'c-sharp', 'dot-net',
'go', 'rust', 'ruby', 'php', 'perl', 'scala', 'haskell', 'erlang',
'elixir', 'clojure', 'lua', 'r', 'matlab', 'julia', 'dart',
'flutter', 'react', 'vue', 'angular', 'svelte', 'solid', 'preact',
'alpine', 'ember', 'backbone', 'meteor', 'polymer', 'lit',
'stencil', 'qwik', 'astro', 'next', 'nuxt', 'gatsby', 'gridsome',
'sapper', 'remix', 'redwood', 'blitz', 'prisma', 'typeorm',
'sequelize', 'mongoose', 'knex', 'bookshelf', 'objection',
'mikro-orm', 'drizzle', 'kysely', 'postgres', 'mysql', 'mariadb',
'sqlite', 'sql-server', 'oracle', 'db2', 'cassandra', 'mongodb',
'couchdb', 'rethinkdb', 'neo4j', 'arangodb', 'influxdb', 'prometheus',
'grafana', 'elasticsearch', 'logstash', 'kibana', 'splunk', 'datadog',
'newrelic', 'appdynamics', 'dynatrace', 'instana', 'lightstep',
'honeycomb', 'jaeger', 'zipkin', 'opentelemetry', 'opentracing',
'graphql', 'apollo', 'relay', 'urql', 'react-query', 'swr',
'redux', 'mobx', 'zustand', 'jotai', 'recoil', 'valtio',
'xstate', 'effector', 'rxjs', 'most', 'bacon', 'highland',
'nodejs', 'deno', 'bun', 'electron', 'tauri', 'nwjs',
'react-native', 'expo', 'ionic', 'capacitor', 'cordova', 'phonegap',
'nativescript', 'weex', 'kraken', 'lynx', 'hermes', 'v8',
'spidermonkey', 'javascriptcore', 'chakra', 'carakan', 'nashorn',
'graalvm', 'openj9', 'hotspot', 'zulu', 'corretto', 'liberica',
'dragonwell', 'mandrel', 'microprofile', 'jakarta', 'javaee',
'spring', 'micronaut', 'quarkus', 'helidon', 'vertx', 'netty',
'tomcat', 'jetty', 'undertow', 'wildfly', 'glassfish', 'payara',
'websphere', 'weblogic', 'jboss', 'resin', 'gunicorn', 'uwsgi',
'nginx', 'apache', 'iis', 'lighttpd', 'caddy', 'traefik',
'envoy', 'haproxy', 'varnish', 'squid', 'pound', 'pen',
'zeus', 'passenger', 'puma', 'unicorn', 'thin', 'webrick',
'mongrel', 'pow', 'pow.cx', 'phusion', 'mod_wsgi', 'mod_perl',
'mod_php', 'mod_python', 'mod_ruby', 'mod_lua', 'mod_mono',
'fastcgi', 'scgi', 'ajp', 'uwsgi', 'proxy', 'balancer'
]
};
// Combiner toutes les icônes
let allIcons = [];
Object.keys(lucideIcons).forEach(category => {
lucideIcons[category].forEach(icon => {
allIcons.push({ name: icon, category: category });
});
});
// Supprimer les doublons
allIcons = allIcons.filter((icon, index, self) =>
index === self.findIndex(i => i.name === icon.name)
).slice(0, 316);
let currentFilter = 'all';
let searchTerm = '';
// Fonction pour générer le code d'une icône Lucide
function generateIconCode(iconName) {
return `<i data-lucide="${iconName}"></i>`;
}
// Fonction pour afficher les icônes
function renderIcons() {
const grid = document.getElementById('iconsGrid');
const searchLower = searchTerm.toLowerCase();
const filteredIcons = allIcons.filter(icon => {
const matchesSearch = icon.name.toLowerCase().includes(searchLower);
if (currentFilter === 'all') return matchesSearch;
return matchesSearch && icon.category === currentFilter;
});
document.getElementById('visibleCount').textContent = filteredIcons.length;
if (filteredIcons.length === 0) {
grid.innerHTML = `
<div class="col-12 text-center py-5">
<div class="p-5 rounded-4" style="background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);">
<i data-lucide="search-x" style="width: 48px; height: 48px; stroke: white; opacity: 0.5;"></i>
<h3 style="color: white;">Aucune icône trouvée</h3>
<p style="color: rgba(255,255,255,0.8);">Essayez un autre terme de recherche</p>
</div>
</div>
`;
lucide.createIcons();
return;
}
grid.innerHTML = filteredIcons.map((icon, index) => {
const iconCode = generateIconCode(icon.name);
const cardId = `icon-card-${index}`;
return `
<div class="col-6 col-md-3 col-lg-2">
<div class="icon-card" data-icon-code="${iconCode.replace(/"/g, '"')}" data-icon-name="${icon.name}" id="${cardId}">
<div class="icon-wrapper">
<i data-lucide="${icon.name}"></i>
</div>
<div class="icon-name">${icon.name}</div>
<button class="copy-btn" data-icon-code="${iconCode.replace(/"/g, '"')}">
<i data-lucide="copy" style="width: 14px; height: 14px; margin-right: 4px;"></i>Copier
</button>
</div>
</div>
`;
}).join('');
// Initialiser Lucide
lucide.createIcons();
attachCardEvents();
}
function attachCardEvents() {
document.querySelectorAll('.icon-card').forEach(card => {
card.addEventListener('click', function(e) {
const code = this.dataset.iconCode.replace(/"/g, '"');
copyIconCode(code, this);
});
});
document.querySelectorAll('.copy-btn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.stopPropagation();
const code = this.dataset.iconCode.replace(/"/g, '"');
const card = this.closest('.icon-card');
copyIconCode(code, card);
});
});
}
function copyIconCode(htmlCode, cardElement) {
const tempInput = document.createElement('textarea');
tempInput.value = htmlCode;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
const toast = document.getElementById('toast');
const toastMessage = document.getElementById('toastMessage');
toastMessage.textContent = htmlCode;
toast.classList.add('show');
if (cardElement) {
const btn = cardElement.querySelector('.copy-btn');
if (btn) {
btn.classList.add('copied');
btn.innerHTML = '<i data-lucide="check" style="width: 14px; height: 14px; margin-right: 4px;"></i>Copié !';
lucide.createIcons();
setTimeout(() => {
btn.classList.remove('copied');
btn.innerHTML = '<i data-lucide="copy" style="width: 14px; height: 14px; margin-right: 4px;"></i>Copier';
lucide.createIcons();
}, 2000);
}
}
setTimeout(() => {
toast.classList.remove('show');
}, 3000);
}
document.getElementById('searchInput').addEventListener('input', (e) => {
searchTerm = e.target.value;
renderIcons();
});
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
currentFilter = btn.dataset.filter;
renderIcons();
});
});
// Rendu initial
lucide.createIcons();
renderIcons();
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, { threshold: 0.1 });
setTimeout(() => {
document.querySelectorAll('.icon-card').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.5s, transform 0.5s';
observer.observe(card);
});
}, 100);
</script>
</body>
</html>Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur