Bootstrap 5
Icones
Feather
Template
Html
Integration Icones
Dashboard
Icones Feather 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 Feather 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">
<!-- Feather Icons -->
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
body {
background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
min-height: 100vh;
padding: 2rem 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
.header-section {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
}
.icon-card {
background: white;
border-radius: 12px;
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 2px 8px rgba(0,0,0,0.05);
cursor: pointer;
position: relative;
overflow: hidden;
}
.icon-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(52, 152, 219, 0.2);
border-color: #3498db;
}
.icon-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #3498db, #2ecc71);
transform: scaleX(0);
transition: transform 0.3s;
}
.icon-card:hover::before {
transform: scaleX(1);
}
.icon-wrapper {
width: 64px;
height: 64px;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 12px;
transition: all 0.3s;
}
.icon-card:hover .icon-wrapper {
background: linear-gradient(135deg, #3498db 0%, #2ecc71 100%);
transform: scale(1.05);
}
.icon-wrapper svg {
width: 32px;
height: 32px;
stroke: #3498db;
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: #2c3e50;
margin-bottom: 0.5rem;
word-break: break-all;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
background: #f8f9fa;
padding: 6px 10px;
border-radius: 6px;
text-align: center;
}
.copy-btn {
background: white;
color: #3498db;
border: 2px solid #3498db;
padding: 8px 16px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
transition: all 0.3s;
width: 100%;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.copy-btn:hover {
background: #3498db;
color: white;
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}
.copy-btn.copied {
background: #27ae60;
color: white;
border-color: #27ae60;
}
.search-box {
background: white;
border-radius: 12px;
padding: 0.5rem 1.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
border: 1px solid #e0e0e0;
}
.search-box input {
border: none;
outline: none;
padding: 12px 0;
font-size: 16px;
width: 100%;
}
.search-box input::placeholder {
color: #95a5a6;
}
.category-filter {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 1rem;
}
.filter-btn {
background: white;
border: 2px solid #e0e0e0;
padding: 8px 20px;
border-radius: 8px;
font-weight: 500;
transition: all 0.3s;
color: #2c3e50;
}
.filter-btn:hover,
.filter-btn.active {
background: #3498db;
color: white;
border-color: #3498db;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}
.stats-badge {
background: rgba(255, 255, 255, 0.15);
padding: 8px 20px;
border-radius: 12px;
color: white;
font-weight: 500;
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: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
display: none;
align-items: center;
gap: 12px;
z-index: 9999;
animation: slideInToast 0.3s ease;
border-left: 4px solid #27ae60;
}
@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: 12px;
padding: 1rem 2rem;
backdrop-filter: blur(10px);
color: white;
}
.feather-badge {
background: #27ae60;
color: white;
font-size: 11px;
padding: 2px 10px;
border-radius: 20px;
margin-left: 8px;
font-weight: 600;
}
</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: #2c3e50;">
<i data-feather="feather" style="width: 48px; height: 48px; margin-right: 16px; stroke: #3498db; stroke-width: 2;"></i>
200 Icônes Feather
<span class="feather-badge">Open Source</span>
</h1>
<p class="lead text-muted mb-3">Feather Icons • Simplement belles • Icônes open source • Stroke 2px • 24x24 grid</p>
<!-- Search Box -->
<div class="search-box">
<div class="d-flex align-items-center">
<i data-feather="search" style="width: 20px; height: 20px; stroke: #95a5a6; margin-right: 12px;"></i>
<input type="text" id="searchInput" placeholder="Rechercher une icône... (ex: heart, user, home)">
</div>
</div>
<!-- Category Filters -->
<div class="category-filter">
<button class="filter-btn active" data-filter="all">Toutes (200)</button>
<button class="filter-btn" data-filter="core">Core UI</button>
<button class="filter-btn" data-filter="media">Media</button>
<button class="filter-btn" data-filter="communication">Communication</button>
<button class="filter-btn" data-filter="weather">Weather</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-feather="grid" style="width: 20px; height: 20px; stroke: white; margin-right: 8px;"></i>
<span id="visibleCount">200</span> icônes affichées
</div>
</div>
</div>
</div>
<!-- Icons Grid -->
<div class="row g-4" id="iconsGrid">
<!-- Les icônes seront générées ici par JavaScript -->
</div>
<!-- Footer -->
<div class="footer-note text-center mt-5">
<p class="mb-0">
<i data-feather="copy" style="width: 18px; height: 18px; stroke: white; margin-right: 8px;"></i>
Cliquez sur une icône pour copier son code HTML •
<i data-feather="code" style="width: 18px; height: 18px; stroke: white; margin: 0 8px;"></i>
<i data-feather="heart"></i>
</p>
</div>
</div>
<!-- Toast Notification -->
<div class="toast-notification" id="toast">
<i data-feather="check-circle" style="width: 24px; height: 24px; stroke: #27ae60;"></i>
<div>
<strong style="color: #2c3e50;">Code copié !</strong>
<div style="color: #7f8c8d; 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>
// Liste de 200 icônes Feather
const icons = [
// Core UI (50 icônes)
'activity', 'airplay', 'alert-circle', 'alert-octagon', 'alert-triangle', 'align-center', 'align-justify', 'align-left', 'align-right',
'anchor', 'aperture', 'archive', 'arrow-down', 'arrow-down-circle', 'arrow-down-left', 'arrow-down-right', 'arrow-left', 'arrow-left-circle',
'arrow-right', 'arrow-right-circle', 'arrow-up', 'arrow-up-circle', 'arrow-up-left', 'arrow-up-right', 'at-sign', 'award', 'bar-chart',
'bar-chart-2', 'battery', 'battery-charging', 'bell', 'bell-off', 'bluetooth', 'bold', 'book', 'book-open', 'bookmark', 'box',
'briefcase', 'calendar', 'camera', 'camera-off', 'cast', 'check', 'check-circle', 'check-square', 'chevron-down', 'chevron-left',
'chevron-right', 'chevron-up', 'chevrons-down', 'chevrons-left', 'chevrons-right', 'chevrons-up', 'circle', 'clipboard',
// Media & Files (50 icônes)
'clock', 'cloud', 'cloud-drizzle', 'cloud-lightning', 'cloud-off', 'cloud-rain', 'cloud-snow', 'code', 'codepen', 'codesandbox',
'coffee', 'columns', 'command', 'compass', 'copy', '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', 'credit-card', 'crop', 'crosshair', 'database',
'delete', 'disc', 'dollar-sign', 'download', 'download-cloud', 'droplet', 'edit', 'edit-2', 'edit-3', 'external-link', 'eye',
'eye-off', 'facebook', 'fast-forward', 'feather', 'figma', 'file', 'file-minus', 'file-plus', 'file-text', 'film', 'filter',
// Communication (50 icônes)
'flag', 'folder', 'folder-minus', 'folder-plus', 'framer', 'frown', 'gift', 'git-branch', 'git-commit', 'git-merge',
'git-pull-request', 'github', 'gitlab', 'globe', 'grid', 'hard-drive', 'hash', 'headphones', 'heart', 'help-circle',
'hexagon', 'home', 'image', 'inbox', 'info', 'instagram', 'italic', 'key', 'layers', 'layout',
'life-buoy', 'link', 'link-2', 'linkedin', 'list', 'loader', 'lock', 'log-in', 'log-out', 'mail',
'map', 'map-pin', 'maximize', 'maximize-2', 'meh', 'menu', 'message-circle', 'message-square', 'mic', 'mic-off',
// Weather & Nature (50 icônes)
'minimize', 'minimize-2', 'minus', 'minus-circle', 'minus-square', 'monitor', 'moon', 'more-horizontal', 'more-vertical', 'mouse-pointer',
'move', 'music', 'navigation', 'navigation-2', 'octagon', 'package', 'paperclip', 'pause', 'pause-circle', 'pen-tool',
'percent', 'phone', 'phone-call', 'phone-forwarded', 'phone-incoming', 'phone-missed', 'phone-off', 'phone-outgoing', 'pie-chart', 'play',
'play-circle', 'plus', 'plus-circle', 'plus-square', 'pocket', 'power', 'printer', 'radio', 'refresh-cw', 'refresh-ccw',
'repeat', 'rewind', 'rotate-ccw', 'rotate-cw', 'rss', 'save', 'scissors', 'search', 'send', 'server',
'settings', 'share', 'share-2', 'shield', 'shield-off', 'shopping-bag', 'shopping-cart', 'shuffle', 'sidebar', 'skip-back',
'skip-forward', 'slack', 'slash', 'sliders', 'smartphone', 'smile', 'speaker', 'square', 'star', 'stop-circle',
'sun', 'sunrise', 'sunset', 'tablet', 'tag', 'target', 'terminal', 'thermometer', 'thumbs-down', 'thumbs-up',
'toggle-left', 'toggle-right', 'tool', 'trash', 'trash-2', 'trello', 'trending-down', 'trending-up', 'triangle', 'truck',
'tv', 'twitch', 'twitter', 'type', 'umbrella', 'underline', 'unlock', 'upload', 'upload-cloud', 'user',
'user-check', 'user-minus', 'user-plus', 'user-x', 'users', 'video', 'video-off', 'voicemail', 'volume', 'volume-1',
'volume-2', 'volume-x', 'watch', 'wifi', 'wifi-off', 'wind', 'x', 'x-circle', 'x-octagon', 'x-square',
'youtube', 'zap', 'zap-off', 'zoom-in', 'zoom-out'
];
let currentFilter = 'all';
let searchTerm = '';
// Catégories pour le filtrage
const coreIcons = icons.slice(0, 50);
const mediaIcons = icons.slice(50, 100);
const communicationIcons = icons.slice(100, 150);
const weatherIcons = icons.slice(150, 200);
function getIconCategory(iconName) {
if (coreIcons.includes(iconName)) return 'core';
if (mediaIcons.includes(iconName)) return 'media';
if (communicationIcons.includes(iconName)) return 'communication';
if (weatherIcons.includes(iconName)) return 'weather';
return 'other';
}
// Fonction pour créer une icône Feather
function createFeatherIcon(iconName) {
return `<i data-feather="${iconName}"></i>`;
}
// Fonction pour afficher les icônes
function renderIcons() {
const grid = document.getElementById('iconsGrid');
const searchLower = searchTerm.toLowerCase();
const filteredIcons = icons.filter(icon => {
const matchesSearch = icon.toLowerCase().includes(searchLower);
const category = getIconCategory(icon);
if (currentFilter === 'all') return matchesSearch;
if (currentFilter === 'core') return matchesSearch && category === 'core';
if (currentFilter === 'media') return matchesSearch && category === 'media';
if (currentFilter === 'communication') return matchesSearch && category === 'communication';
if (currentFilter === 'weather') return matchesSearch && category === 'weather';
return matchesSearch;
});
// Mettre à jour le compteur
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-feather="search" 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>
`;
feather.replace();
return;
}
// Création des cartes avec data-attributes
grid.innerHTML = filteredIcons.map((icon, index) => {
const iconCode = `<i data-feather="${icon}"></i>`;
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}" id="${cardId}">
<div class="icon-wrapper">
<i data-feather="${icon}"></i>
</div>
<div class="icon-name">${icon}</div>
<button class="copy-btn" data-icon-code="${iconCode.replace(/"/g, '"')}" data-icon-name="${icon}">
<i data-feather="copy" style="width: 14px; height: 14px; margin-right: 4px;"></i>Copier
</button>
</div>
</div>
`;
}).join('');
// Remplacer toutes les balises i par des SVG Feather
feather.replace();
// Attacher les événements après le rendu
attachCardEvents();
}
// Fonction pour attacher les événements aux cartes
function attachCardEvents() {
// Pour les cartes entières
document.querySelectorAll('.icon-card').forEach(card => {
card.addEventListener('click', function(e) {
const code = this.dataset.iconCode.replace(/"/g, '"');
const iconName = this.dataset.iconName;
copyIconCode(code, iconName, this);
});
});
// Pour les boutons de copie
document.querySelectorAll('.copy-btn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.stopPropagation();
const code = this.dataset.iconCode.replace(/"/g, '"');
const iconName = this.dataset.iconName;
const card = this.closest('.icon-card');
copyIconCode(code, iconName, card);
});
});
}
// Fonction pour copier le code de l'icône
function copyIconCode(htmlCode, iconName, cardElement) {
// Créer un élément temporaire
const tempInput = document.createElement('textarea');
tempInput.value = htmlCode;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
// Afficher la notification toast
const toast = document.getElementById('toast');
const toastMessage = document.getElementById('toastMessage');
toastMessage.textContent = htmlCode;
toast.classList.add('show');
// Effet visuel sur le bouton
if (cardElement) {
const btn = cardElement.querySelector('.copy-btn');
if (btn) {
btn.classList.add('copied');
btn.innerHTML = '<i data-feather="check" style="width: 14px; height: 14px; margin-right: 4px;"></i>Copié !';
feather.replace();
setTimeout(() => {
btn.classList.remove('copied');
btn.innerHTML = '<i data-feather="copy" style="width: 14px; height: 14px; margin-right: 4px;"></i>Copier';
feather.replace();
}, 2000);
}
}
// Cacher le toast après 3 secondes
setTimeout(() => {
toast.classList.remove('show');
}, 3000);
}
// Gestionnaire de recherche
document.getElementById('searchInput').addEventListener('input', (e) => {
searchTerm = e.target.value;
renderIcons();
});
// Gestionnaire de filtres
document.querySelectorAll('.filter-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
const filter = btn.dataset.filter;
currentFilter = filter;
renderIcons();
});
});
// Initialisation
feather.replace();
renderIcons();
// Animation des cards au scroll
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
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