Nuxt Icon est un module officiel Nuxt qui vous donne accès à plus de 200 000 icônes provenant de collections populaires comme Heroicons, Material Design Icons, Font Awesome, Tabler Icons, et bien d'autres. Le tout avec une intégration native dans Nuxt et des performances optimales.
Au lieu de télécharger et gérer manuellement des fichiers d'icônes ou d'installer de lourdes bibliothèques, Nuxt Icon vous permet d'utiliser n'importe quelle icône avec un simple composant Vue.
Nuxt Icon s'appuie sur Iconify, la plus grande collection d'icônes unifiée au monde :
npm install @nuxt/icon
export default defineNuxtConfig({
modules: [
'@nuxt/icon'
]
})
C'est tout ! Le composant <Icon> est maintenant disponible partout dans votre application.
<template>
<Icon name="heroicons:home" />
</template>
La syntaxe est collection:icon-name :
heroicons:home → icône "home" de Heroiconsmdi:account → icône "account" de Material Design Iconsfa6-solid:heart → icône "heart" de Font Awesome 6 Solid<template>
<!-- Taille personnalisée -->
<Icon name="heroicons:star" size="24" />
<!-- Couleur personnalisée -->
<Icon name="heroicons:check-circle" class="text-green-500" />
<!-- Combinaison taille + classe -->
<Icon
name="heroicons:shield-check"
size="32"
class="text-blue-600 hover:text-blue-700"
/>
</template>
<template>
<nav class="flex gap-4">
<NuxtLink to="/" class="flex items-center gap-2">
<Icon name="heroicons:home" size="20" />
<span>Accueil</span>
</NuxtLink>
<NuxtLink to="/blog" class="flex items-center gap-2">
<Icon name="heroicons:newspaper" size="20" />
<span>Blog</span>
</NuxtLink>
<NuxtLink to="/contact" class="flex items-center gap-2">
<Icon name="heroicons:envelope" size="20" />
<span>Contact</span>
</NuxtLink>
</nav>
</template>
<template>
<div class="flex gap-4">
<!-- Bouton avec icône à gauche -->
<button class="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded">
<Icon name="heroicons:plus" size="20" />
<span>Ajouter</span>
</button>
<!-- Bouton avec icône à droite -->
<button class="flex items-center gap-2 px-4 py-2 border rounded">
<span>Télécharger</span>
<Icon name="heroicons:arrow-down-tray" size="20" />
</button>
<!-- Bouton icône uniquement -->
<button class="p-2 rounded-full hover:bg-gray-100">
<Icon name="heroicons:cog-6-tooth" size="24" />
</button>
</div>
</template>
<template>
<div class="grid grid-cols-3 gap-4">
<div class="p-6 border rounded-lg">
<Icon name="heroicons:rocket-launch" size="32" class="text-blue-600 mb-3" />
<h3 class="font-bold">Performance</h3>
<p>Sites ultra-rapides</p>
</div>
<div class="p-6 border rounded-lg">
<Icon name="heroicons:shield-check" size="32" class="text-green-600 mb-3" />
<h3 class="font-bold">Sécurité</h3>
<p>Protection optimale</p>
</div>
<div class="p-6 border rounded-lg">
<Icon name="heroicons:sparkles" size="32" class="text-purple-600 mb-3" />
<h3 class="font-bold">Design</h3>
<p>Interface moderne</p>
</div>
</div>
</template>
Collection officielle de Tailwind CSS, parfaite pour les interfaces modernes :
<Icon name="heroicons:check-circle" />
<Icon name="heroicons:x-circle" />
<Icon name="heroicons:information-circle" />
<Icon name="heroicons:exclamation-triangle" />
Variantes disponibles :
heroicons:icon-name (outline, par défaut)heroicons-solid:icon-name (solid)heroicons-mini:icon-name (mini, 20x20)Plus de 7000 icônes de Google :
<Icon name="mdi:account" />
<Icon name="mdi:email" />
<Icon name="mdi:phone" />
<Icon name="mdi:calendar" />
Fork moderne de Feather Icons :
<Icon name="lucide:heart" />
<Icon name="lucide:star" />
<Icon name="lucide:bookmark" />
<Icon name="lucide:share-2" />
Plus de 4000 icônes cohérentes :
<Icon name="tabler:home" />
<Icon name="tabler:user" />
<Icon name="tabler:settings" />
<Icon name="tabler:logout" />
Pour trouver l'icône parfaite, utilisez :
J'utilise Nuxt Icon sur tous mes projets Nuxt pour enrichir les interfaces :
Pour le site de Maître Fretel, j'ai utilisé Heroicons pour :
Sur Art Conseil, les icônes servent à :
// nuxt.config.ts
export default defineNuxtConfig({
icon: {
// Taille par défaut
size: '24px',
// Classe CSS par défaut
class: 'icon',
// Collections à charger
collections: ['heroicons', 'mdi'],
// Mode personnalisé
mode: 'svg', // ou 'css'
}
})
Vous pouvez aussi ajouter vos propres icônes SVG :
<Icon name="custom:logo" />
Configurez dans nuxt.config.ts :
export default defineNuxtConfig({
icon: {
customCollections: [
{
prefix: 'custom',
dir: './assets/icons'
}
]
}
})
Utilisez principalement une seule collection par projet pour garantir une cohérence visuelle. Vous pouvez en combiner plusieurs pour des usages spécifiques (ex: réseaux sociaux).
Ajoutez toujours un label accessible :
<button aria-label="Fermer le menu">
<Icon name="heroicons:x-mark" />
</button>
Le chargement est déjà optimisé, mais vous pouvez :
| Solution | Avantages | Inconvénients |
|---|---|---|
| Nuxt Icon | +200k icônes, performance, auto-import | Nécessite Nuxt |
| Font Awesome | Populaire, documentation riche | Lourd, payant pour Pro |
| SVG manuels | Contrôle total | Gestion manuelle, maintenance |
| Icon fonts | Simple | Problèmes d'accessibilité, flash |
Nuxt Icon est un module essentiel pour tout projet Nuxt. Avec +200 000 icônes accessibles via un simple composant, une performance optimale grâce au chargement à la demande, et une intégration native dans Nuxt, c'est la solution parfaite pour enrichir vos interfaces sans compromis.
Dernière mise à jour : Octobre 2025
Version : @nuxt/icon 1.x (dernière version stable)
Cet article vous a-t-il été utile ?
Vos retours sont complètement anonymes et m'aident à améliorer mon contenu
Nuxt Hooks : automatiser les actions
Les hooks Nuxt permettent d'exécuter automatiquement du code à des moments précis du cycle de vie de votre application.
Nuxt SEO : optimisez le référencement de vos applications Nuxt
Découvrez Nuxt SEO, une collection de modules essentiels pour optimiser le référencement naturel de vos applications Nuxt. Meta tags, sitemaps, robots.txt et bien plus.