L'emoji dans un cercle pastel : l'icone qui trahit un site genere par IA

Ouvre les cinq derniers sites qu'un générateur t'a pondus. Descends jusqu'à la section des fonctionnalités, ces trois ou quatre colonnes sous un titre du genre « Pourquoi les équipes nous choisissent ». Maintenant regarde le haut de chaque carte. Il y a un cercle. Il fait h-12 w-12, il est rounded-full, il est rempli de bg-blue-100, et au centre se trouve un emoji. Une fusée. Un éclair. Une étincelle. Un petit bouclier bleu.

Ce cercle est aujourd'hui l'une des empreintes IA les plus fiables du web, et il ne coûte presque rien à virer pour ceux qui l'expédient en prod. Sauf qu'ils ne le font pas, parce qu'ils ne le voient pas. À leurs yeux, ça a l'air fini. Il y a de la couleur, il y a une forme, il y a un glyphe, c'est posé dans une grille. Ça coche toutes les cases qu'une « carte de fonctionnalité » est censée cocher. Le problème, c'est que chaque case a été cochée par le modèle, pas par quelqu'un qui a regardé le résultat et ressenti quelque chose.

Le markup exact

Voici ce qui sort de v0, Lovable, Bolt, et d'une session Cursor où tu as demandé « une section de fonctionnalités ». À l'ordre des classes près :

<div class="rounded-2xl border bg-white p-6 shadow-sm">
  <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-blue-100">
    <span class="text-2xl">🚀</span>
  </div>
  <h3 class="mb-2 text-lg font-semibold">Lightning Fast</h3>
  <p class="text-sm text-gray-600">
    Built for speed so your team can move quickly and ship with confidence.
  </p>
</div>

Ce div exact, tu l'as déjà vu mille fois. Le cercle bg-blue-100 (#dbeafe), l'emoji text-2xl, l'espace mb-4, le titre text-lg font-semibold, le corps text-sm text-gray-600 qui ne dit rien. Remplace la fusée par ⚡ et « Lightning Fast » par « Blazing Performance » : c'est la même carte. Voilà le tell : pas l'emoji en lui-même, mais l'emplacement où il se loge, un emplacement tellement générique qu'il accepte n'importe quel emoji et n'importe quel adjectif sans la moindre friction.

Les variantes sont prévisibles, elles aussi. Parfois le cercle passe en bg-indigo-100 parce que le reste du site a déjà emprunté le chemin du dégradé bleu-violet Tailwind. Parfois c'est rounded-xl au lieu de rounded-full pour le look « moderne ». Parfois l'emoji hérite d'un cercle bg-gradient-to-br from-blue-500 to-purple-600 avec un glyphe blanc par-dessus, ce qui est exactement le même geste sous un plus joli manteau. La structure en dessous, elle, ne bouge jamais : conteneur pastel, glyphe décoratif, zéro information.

Pourquoi le générateur attrape ça par réflexe

Ce n'est pas de la fainéantise dans le modèle. C'est le chemin de moindre résistance à travers une vraie contrainte. Un emoji, c'est la seule « icône » qu'un générateur peut produire sans aucune dépendance.

Réfléchis à ce qu'exige une vraie icône. Tu installes lucide-react ou @heroicons/react. Tu importes l'icône précise, import { Zap } from 'lucide-react'. Tu fais un rendu avec . Ça veut dire un paquet dans package.json, un chemin d'import qui fonctionne, un composant qui doit exister dans cette bibliothèque sous ce nom exact. Si le modèle hallucine alors que lucide n'a que , le build casse. Un emoji ne casse jamais le build. 🚀 est un caractère Unicode. Aucune installation, aucun import, aucun pipeline d'assets, aucun SVG, aucun viewBox, aucun CDN, aucun fichier de police. Tu le déposes dans un en HTML brut et il s'affiche sur tous les appareils.

Donc quand un générateur optimise pour « produire un truc qui tourne du premier coup », l'emoji gagne à chaque pile ou face. Il est gratuit. Il est sûr. Il est universel. Et le modèle l'a vu dans à peu près dix millions d'exemples d'entraînement de landing pages, parce que tous les autres sites construits par IA ont déjà fait exactement pareil : une boucle de rétroaction où le slop entraîne la prochaine fournée de slop, ce que je décortique dans l'état du web généré par IA.

Le résultat est correct au sens étroit (ça compile, ça s'affiche) et faux dans tous les sens qui comptent pour un humain en train de juger si ton produit est réel.

Pourquoi ça fait cheap

Un emoji n'est pas ton art. C'est le cœur du sujet. La fusée de ta carte de fonctionnalité a été dessinée par l'équipe design d'Apple pour iOS, ou par Google pour Android, ou par Microsoft pour Segoe UI Emoji. Elle s'affiche différemment sur chaque plateforme : le 🚀 d'Apple est une navette 3D brillante avec une flamme orange, celui de Google est un dessin plat, Windows en trace un truc fin et détouré qui ne ressemble à aucun des deux. Tu n'as aucun contrôle sur celle que ton visiteur verra. Ton « icône de marque » est littéralement le clipart du fournisseur de système d'exploitation, et elle change selon le téléphone qui regarde.

Cette incohérence, c'est la première fissure. La deuxième est tonale. Les emoji portent un registre : décontracté, bavard, texto-à-un-pote. Un 🚀 à côté de « Sécurité de niveau entreprise », c'est un costume qui ne va pas avec les chaussures. Tu réclames un contrat à six chiffres avec un glyphe conçu pour vouloir dire « c'est parti les amis » dans une conversation de groupe. Parfois ce registre joueur est exactement ce que tu veux. Mais les générateurs l'appliquent sans discernement, à la fintech, au SaaS juridique, aux tableaux de bord médicaux, parce que le modèle ne lit pas l'ambiance, il remplit un emplacement.

La troisième fissure, c'est le cercle pastel lui-même. bg-blue-100 derrière un emoji, c'est un tell dans le tell. Pourquoi est-il là ? Parce que l'emoji seul avait l'air trop petit et trop seul à flotter au-dessus de la carte, alors le template l'enveloppe dans un disque coloré pour lui donner de la présence. Il compense. Une vraie icône en h-6 w-6 avec un trait assuré et une couleur text-blue-600 n'a pas besoin d'une bulle pastel pour paraître intentionnelle, elle porte son propre poids. La bulle, c'est de l'échafaudage que le design n'a jamais retiré, exactement comme la grille de 3 cartes identiques est de l'échafaudage que personne n'a retiré.

Mets les trois bout à bout et le détecteur de motifs du visiteur se déclenche avant même qu'il ait fini de lire le titre : *j'ai vu cette section exacte sur quarante autres sites ce mois-ci, et la plupart étaient du vent.* Tu as dépensé ta première impression à leur annoncer que tu as utilisé un template. C'est cher payé pour ce que tu y gagnes.

Comment vérifier ton propre site en dix secondes

Ouvre les DevTools, vise la section, et lis le markup. Si tu vois un ou un caractère emoji nu à l'intérieur d'un div rounded-full bg-*-100, tu l'as. Ou alors saute les DevTools et affiche le code source : cherche dans la page les caractères emoji littéraux. Si 🚀, ✨ ou ⚡ apparaît dans ton HTML expédié en tant qu'icône de fonctionnalité, c'est le verdict. (Ce type d'audit au niveau du code source, c'est toute la méthode de lire le CSS pour auditer n'importe quel site : l'emoji-dans-un-cercle est l'une des prises les plus rapides de la liste.)

Tell bonus : si les trois ou quatre emoji de la rangée viennent tous du même cluster sémantique, le pack de démarrage 🚀 ⚡ ✨ 🔒 « vitesse / puissance / magie / sécurité », c'est un modèle qui a pioché les glyphes de fonctionnalité statistiquement les plus fréquents et les a posés dans l'ordre. Aucun humain ne choisit ces quatre-là ensemble de plein gré.

Quoi utiliser à la place

Tu as trois bons remplacements, et celui que tu choisis devrait dépendre de ce que la carte raconte vraiment.

1. Un vrai jeu d'icônes, utilisé avec retenue

Installe Lucide. Licence MIT, tree-shakeable, ~1 500 icônes dessinées sur une grille cohérente de 24×24 avec un trait de 2px, et c'est le standard de fait pour une raison : c'est propre et c'est cohérent. La cohérence, justement, c'est le point clé : chaque icône partage une épaisseur de trait et un rayon de coin, si bien qu'une rangée se lit comme une seule famille au lieu d'une roulette de cliparts.

import { Zap, ShieldCheck, GitBranch } from 'lucide-react'

<Zap className="h-5 w-5 text-blue-600" strokeWidth={1.75} />

Ensuite, casse le réglage par défaut. Ne l'enveloppe pas dans bg-blue-100. Passe le trait à 1.75 au lieu du 2 d'origine, pour une ligne un peu plus fine. Colore-la dans ta vraie couleur d'accent, pas dans le bleu Tailwind, vois comment choisir une couleur d'accent qui n'est pas blue-600. Aligne-la à gauche avec le titre sur la même ligne de base au lieu de l'empiler dans une bulle centrée. À l'instant où tu cesses de centrer une icône dans un disque pastel, la carte cesse d'avoir l'air générée, parce que le disque était la partie générée.

Si tout le monde utilise Lucide, n'est-ce pas une monoculture à son tour ? Si : les icônes sont partagées, mais le *traitement* est le tien, épaisseur de trait, couleur, taille, placement, et le fait de l'accoupler ou non à un chiffre ou à un filet. C'est exactement l'argument de s'échapper de la monoculture shadcn : des primitives partagées, c'est très bien, ce sont les réglages par défaut identiques qui posent problème.

2. Un chiffre

La moitié du temps, la carte de fonctionnalité ne devrait pas avoir d'icône du tout, elle devrait avoir un fait. Si la carte parle de vitesse, la version honnête n'est pas un ⚡ dans un cercle, c'est :

<div class="rounded-2xl border border-gray-200 p-6">
  <div class="font-mono text-4xl font-semibold tracking-tight text-gray-900">
    40ms
  </div>
  <h3 class="mt-3 text-base font-medium">p99 response time</h3>
  <p class="mt-1 text-sm text-gray-500">
    Measured across 2.1B requests last quarter, US-East.
  </p>
</div>

Un vrai chiffre fait le travail que l'emoji faisait semblant de faire. 40ms dit « rapide » avec une preuve. 99,98 % dit « fiable » avec une preuve. 12 000 équipes dit « digne de confiance » avec une preuve. La fusée disait « rapide » avec une vibe. Les chiffres sont aussi impossibles à templater de façon convaincante, parce qu'il faut réellement les avoir, ce qui est précisément la raison pour laquelle ils se lisent comme crédibles. Compose-les en font-mono ou avec un tracking-tight serré en graisse d'affichage, qu'ils aient l'air de relevés d'instruments, pas de texte courant.

3. Un mini-schéma

Pour les fonctionnalités qui parlent de *comment quelque chose marche* (un pipeline, une synchro, une branche, un flux), un SVG inline de 24×40px du mécanisme réel bat n'importe quel glyphe. Trois points reliés par une ligne pour « synchro en temps réel ». Un chemin qui bifurque pour « branching ». Une petite barre qui monte par paliers pour « ça monte en charge avec toi ». Ça prend dix minutes dans Figma ou quinze lignes de SVG écrit à la main, et le générateur de personne ne le produit, parce que ça demande de comprendre ce que la fonctionnalité fait. C'est toute la valeur de la chose : un modèle qui remplit un emplacement ne peut pas la simuler.

Le motif sous le motif

L'emoji-dans-un-cercle n'est pas une seule mauvaise décision. C'est ce qui arrive quand un système optimise pour « s'affiche sans erreur » au lieu de « veut dire quelque chose pour une personne ». Même cause profonde que la grille bento devenue le hero par défaut, même cause profonde que le fade-in-up sur chaque scroll : le générateur a choisi l'option avec le moins de dépendances et le plus d'appui dans le jeu d'entraînement, et il a déclaré que c'était fini.

Le correctif n'est jamais un meilleur emoji. Échanger 🚀 contre 🎯 ne change rien. Le correctif, c'est de tuer l'emplacement : décider, carte par carte, si cette fonctionnalité mérite une icône, un chiffre ou un dessin, puis lui donner celui qu'elle a gagné. Cette décision, c'est deux minutes de jugement humain par carte. Et ce sont aussi les deux minutes exactes que le générateur a sautées, ce qui explique pourquoi le fait de les passer est précisément ce qui fait que ton site cesse d'avoir l'air sorti d'un générateur.

Supprime le cercle pastel. Si la carte survit sans lui, tu n'en as jamais eu besoin. Si elle ne survit pas, c'est que la carte était vide et que la bulle le cachait, ce qui est la chose la plus utile que l'emoji t'aura jamais dite.