Catalogue De Symboles (Unicode & Emoji)
Pour un rendu cohérent, teste sur desktop et mobile.
1) Formes géométriques
Cercles pleins
🔴 🟠 🟡 🟢 🔵 🟣 🟤 ⚫ ⚪ 🔘
Cercles vides
⭕ 🅾️ ⭘ ○ ◯
Carrés pleins
🟥 🟧 🟨 🟩 🟦 🟪 🟫 ⬛ ⬜ ◼️ ◻️
Losanges
🔶 🔷 🔸 🔹 ◆ ◇ ♦️
Triangles
🔺 🔻 ▲ ▼ ◀️ ▶️ △ ▵ 🔼 🔽
Autres formes / pictos
⭐ ✨ 💫 🌟 ⚡ 🔥 💧 🌙 ☀️
2) États & Validation
✅ ❌ ⚠️ ℹ️ ❗ ❓ ❔ ❕ 💡
3) Flèches (direction & navigation)
🔀 🔁 🔂 🔃 🔄 ↗️ ↘️ ↙️ ↖️ ↕️ ↔️ ⏫ ⏬
4) Techniques & Numérique
⚙️ 🔧 🔨 ⚒️ 🛠️ 💻 📱 🖥️ ⌨️ 🖱️ 💾 💿 📀 🔌 🔋 📡 🛰️
5) Progression & Étapes
1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣ 🔟 ▫️ ▪️ ◾ ◽ ◼️ ◻️
6) Évaluation (score, attrait, nouveauté)
⭐ 🌟 ✨ 💫 ⚡ 🔥 💯 👍 👎 👌 🆗 🆕 🆓 🆙 🔝
7) Temps & Calendrier
⏰ ⏱️ ⏲️ 🕐 🕑 🕒 📅 📆 🗓️ ⌛ ⏳
8) Actions & Lecture
▶️ ⏸️ ⏹️ ⏭️ ⏮️ 🔄 🔁 🔀 🔃 🔂 📤 📥 📨 📩
9) Palette ciblée
Formes pleines
| Forme | Noir | Vert | Lilas |
|---|---|---|---|
| Cercle | ⚫ | 🟢 | 🟣 |
| Carré | ⬛ | 🟩 | 🟪 |
| Triangle | ▲ | 🔼 | 🔻 |
| Losange | ♦ | 🔷 | 🔶 |
| Hexagone | ⬢ | ⬡ | ⬣ |
| Étoile | ★ | ✦ | ✧ |
Bicolores / contours
| Forme | Bordure noire | Bordure verte | Bordure lilas |
|---|---|---|---|
| Cercle vide | ◯ | ❍ | ⊙ |
| Carré vide | 🔲 | 🔳 | ⬜ |
| Triangle vide | △ | ▴ | ▵ |
| Losange vide | ◇ | ❖ | ◈ |
| Hexagone vide | ⬡ | ⬣ | ⬢ |
| Étoile vide | ☆ | ✩ | ✪ |
Note : l’apparence exacte varie selon la plateforme. Si un glyphe “saute”, essaie une alternative (ex.
●pour un cercle plein).
10) Blocs prêts à copier (groupes fréquents)
a) Indicateurs de statut
🟢 OK 🟡 À vérifier 🔴 Blocant ⚫ En pause
b) Boutons de lecture
⏮️ ⏪ ◀️ ⏸️ ⏯️ ▶️ ⏩ ⏭️ ⏹️
c) Étapes
1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ → ✔️ Fini
d) Navigation interne
⬅️ ➡️ ⬆️ ⬇️ ↔️ ↕️
e) Appel à l’action
✨ Nouveau 🆕 📥 Télécharger 📌 Épinglé
11) Exemples d’usage (FixIt)
Lien en “carte”
Flux RSS du blog
Liens en touches
Admonition (encart visuel)
Timeline (FixIt)
- ✅ Success
- 📌 Approved
- 🚀 Event start
12) Conseils pratiques
- Parcimonie : trop de symboles nuit à la lisibilité.
- Accessibilité : ajoute du texte à proximité (ou un
title/aria-labeldans le HTML si pertinent). - Cohérence : associe une couleur / une forme / un sens et tiens‑toi à cette convention dans tout le site.
- Responsive : vérifie sur iOS / Android / Windows / Linux (les glyphes varient).
Proposition : si tu veux, on peut décliner ces symboles en shortcodes personnalisés (ex. {< badge "🟣 Lilas" >}) pour simplifier la saisie et garantir un rendu stable.