Reicon : 2 700 icônes SVG gratuites pour tous les frameworks

Il manque toujours une icône. On a choisi Heroicons pour sa sobriété, et le jour où il faut un portefeuille, un thermomètre ou une flèche qui tourne à gauche, on la cherche ailleurs, dans un autre style, avec un autre trait. L'interface finit en patchwork.

Reicon vise ce problème avec du volume. C'est une bibliothèque d'icônes SVG gratuite et open source : plus de 2 700 icônes dessinées sur une grille de 24×24, chacune en deux styles, contour et plein, avec un paquet pour presque chaque framework front et mobile. Le tout sous licence MIT.

Un projet jeune qui sort beaucoup de paquets

Le dépôt dqev/reicon a été créé en mai 2026 par Dev Chauhan, un développeur et designer indien. La v1.0 est sortie fin juillet, la v2.0 début octobre. Début octobre, le dépôt compte un peu moins de 1 700 étoiles, et le paquet React a été téléchargé environ 86 000 fois sur npm le mois dernier.

Ce qui frappe, c'est le nombre de cibles :

S'y ajoutent un plugin Figma et une extension VS Code. Tous ces paquets sont générés depuis un seul fichier, data/icon-data.json, qui contient le SVG de chaque icône dans chaque style. Ajouter une icône, c'est modifier ce fichier : les paquets suivent au build.

Deux styles, une seule grille

Les icônes « Outline » ont un trait uniforme de 1,5 px. Les « Filled » sont pleines. Toutes partagent le même viewBox="0 0 24 24", les mêmes rayons d'angle et la même épaisseur optique, ce qui permet de mélanger les deux styles dans une même interface : contour au repos, plein pour l'élément actif d'une barre de navigation.

Le catalogue est rangé en 38 catégories, des flèches à la météo en passant par l'argent, la médecine, le sport ou la mise en forme de texte. C'est là que Reicon se distingue d'Heroicons et de ses quelques centaines d'icônes : les catégories métier sont bien fournies.

La bannière en tête de cet article vient du dépôt. Petit détail amusant, les étiquettes y sont inversées : la ligne « Outline » montre les icônes pleines, et inversement.

Installer dans React

npm install reicon-react

Les noms des icônes sont en kebab-case dans le catalogue (shield-check) et en PascalCase dans les composants (ShieldCheck) :

import { Bell, ShieldCheck } from 'reicon-react'
 
export function Status() {
  return (
    <div className="flex items-center gap-2">
      <ShieldCheck size={20} color="#10B981" />
      <Bell size={20} weight="Filled" />
    </div>
  )
}

Les props tiennent en une ligne : size, color (currentColor par défaut, donc la couleur du texte parent), weight, strokeWidth, className. Chaque icône est un module ES indépendant, avec sideEffects: false : seules les icônes importées finissent dans le bundle, environ 1 Ko compressé chacune selon la documentation. Pour vérifier ce que pèse vraiment une dépendance, l'analyse de bundle et Lighthouse restent la bonne méthode.

Un point à connaître avec Next.js et les React Server Components : le paquet est marqué 'use client', et injecte le SVG avec dangerouslySetInnerHTML. Chaque icône devient donc un composant client. Le coût est faible pour quelques icônes, mais sur une page entièrement serveur, une icône pourrait très bien être rendue en HTML pur. Lucide fait ce choix-là, et c'est un argument en sa faveur dans un projet App Router.

Vue, Svelte et les autres

L'API est la même d'un framework à l'autre, ce qui compte si votre équipe travaille sur plusieurs projets. En Vue :

<script setup>
import { Home, Search } from 'reicon-vue'
</script>
 
<template>
  <Home :size="24" />
  <Search :size="20" weight="Filled" />
</template>

C'est l'un des rares cas où le choix entre React et Vue ne change rien : même catalogue, mêmes props, même rendu. Svelte suit le même modèle, Angular expose des composants standalone (<ri-home>, classe HomeComponent), et React Native passe par react-native-svg.

Sans build : le web component

Pour une page HTML statique, un prototype ou un CMS, une balise script suffit :

<script src="https://cdn.jsdelivr.net/npm/reicon/cdn/reicon.js"></script>
 
<re-icon icon="home"></re-icon>
<re-icon icon="heart" weight="filled" size="32" color="#ef4444"></re-icon>
<re-icon icon="settings" spin decorative></re-icon>

Le composant <re-icon> vit dans un Shadow DOM et accepte des options que les paquets de framework n'ont pas : rotation, symétrie, animation, dégradés, chargement différé. Les données de toutes les icônes sont incluses dans le script, ce qui évite un appel réseau par icône mais charge tout le catalogue d'un coup. À réserver aux pages où l'on n'a pas de bundler.

Deux attributs méritent d'être utilisés systématiquement : decorative, qui pose aria-hidden="true" sur une icône purement visuelle, et label, qui donne un nom accessible à une icône seule dans un bouton. Ce sont exactement les deux cas que décrit le guide de l'accessibilité web et des WCAG, et une bibliothèque qui les expose en attributs simples rend la bonne pratique moins coûteuse.

Le serveur MCP pour les agents

C'est la partie la plus originale. reicon-mcp est un serveur MCP qui permet à un agent de code de chercher une icône et d'écrire l'import à votre place. L'index de recherche est inclus dans le paquet, donc tout fonctionne hors ligne :

{
  "mcpServers": {
    "reicon": {
      "command": "npx",
      "args": ["reicon-mcp"]
    }
  }
}

L'agent dispose alors de quatre outils : search_icons, view_icon, apply_icon et list_categories. Demander « ajoute une icône de panier dans le header » devient une recherche dans le catalogue réel, au lieu d'un nom d'icône inventé qui casse le build. Les mêmes commandes existent en ligne de commande :

npx reicon-mcp search "shopping cart"
npx reicon-mcp apply heart --framework react --size 32

Le site publie aussi un llms.txt et un llms-full.txt qui décrivent toutes les API. Peu de bibliothèques d'icônes prennent ce soin.

Face à Lucide, Heroicons et Phosphor

Ces chiffres viennent en partie de la documentation de Reicon, qui a intérêt à se mettre en valeur. La ligne qui compte pour une décision durable est la dernière. Lucide a des années de maintenance, des centaines de contributeurs et une communauté qui corrige les icônes mal dessinées. Reicon a cinq mois et un auteur principal.

Le point de licence à vérifier

Le README le dit lui-même dans ses crédits : les icônes de base sont construites à partir d'éléments de Solar Icons, de 480 Design, et de Zappicon. Or Solar Icons est publié sous CC BY 4.0, une licence qui impose de créditer l'auteur. La documentation de Reicon affirme de son côté qu'aucune attribution n'est requise, puisque le projet est sous MIT.

Les deux affirmations ne vont pas bien ensemble. Je ne suis pas juriste, et l'ampleur de la reprise compte, mais dans le doute, la précaution coûte une ligne : créditer Solar Icons dans les mentions de votre site ou de votre application. Le projet a déjà connu un épisode de ce genre : en septembre, la v1.5 a retiré tout le catalogue d'illustrations vectorielles « pour résoudre des problèmes de licence » avec un autre créateur.

Le périmètre du site bouge aussi. La même v1.5 retirait les logos de marques pour se « recentrer à 100 % sur les icônes d'interface ». Un mois plus tard, la v2.0 annonce 2 600 logos de marques, des icônes en verre dépoli et des drapeaux. Rien de grave pour un utilisateur des paquets npm, mais ça dit un projet qui cherche encore sa forme.

Reicon coche beaucoup de cases : un catalogue large, deux styles cohérents, un paquet pour chaque framework et un serveur MCP que personne d'autre ne propose. Pour un prototype, un projet personnel ou une application Flutter qui veut le même jeu d'icônes que le site web, je l'essaierais sans hésiter. Pour le design system d'un produit qui doit tenir cinq ans, je resterais sur Lucide, plus ancien et plus éprouvé, en gardant Reicon comme réserve pour les icônes métier qui manquent.