Iconographie
Famille d'icônes Fluent / Material Design, tailles standardisées, couleurs et règles d'usage dans l'interface Swellr.
1. Famille d'icônes
Swellr utilise la bibliothèque Fluent Icons de Microsoft (compatible Material Design). Cette famille offre cohérence, lisibilité et une couverture large des cas d'usage UI.
◈
Microsoft Fluent Icons
Fluent UI System Icons — Open source, MIT License
Identifiant de bibliothèque : Les icônes sont référencées avec le préfixe
fluent: (ex : fluent:map-24-regular). Dans l'app React Native, elles sont importées via @expo/vector-icons ou la lib @fluentui/react-native-icons.
Style principal
Les icônes sont utilisées en style Regular (trait fin, contour) pour les états neutres et Filled (plein) pour les états actifs, sélectionnés ou importants.
fluent:search-20-regular (inactif)
fluent:search-20-filled (actif)
Tailles disponibles
Fluent Icons propose des icônes optimisées à des tailles fixes : 12, 16, 20, 24, 28, 32, 48px. Chaque taille est dessinée pixel-perfect à sa résolution cible.
fluent:location-12-filled
fluent:gauge-20-regular
fluent:map-24-regular
Fallback & alternatives
Pour les icônes spécifiques au surf non couvertes par Fluent (ex : vague, marée), on utilise Streamline Icons (ex :
streamline:tidal-wave) ou Carbon Icons (IBM).streamline:tidal-wave
carbon:user-profile
Aperçu de la bibliothèque
🗺map
🔍search
🌤weather
👤profile
📍location
→arrow-rtl
☀️sunny
🌊tidal-wave
⚡gauge
💧water
🌡temperature
☁cloud
📅calendar
⊕add
⊗dismiss
✓checkmark
↑arrow-up
↓arrow-down
◎target
●circle-fill
○circle
□square
■square-fill
★star-fill
☆star
♡heart
♥heart-fill
⚙settings
🔔alert
⊞grid
⊟list
⊡filter
2. Icônes de navigation (Tab Bar)
Les quatre icônes SVG Fluent utilisées dans la barre de navigation inférieure (Bottom Tab Navigator) de l'application Swellr. Chaque icône est affichée dans ses deux états : Actif (#028490) et Inactif (#757575).
Spécifications techniques
3. Icônes thématiques Swellr
Organisation des icônes par catégorie fonctionnelle dans l'application. Chaque icône est associée à son nom Fluent, sa taille recommandée et sa couleur d'usage.
Navigation
🗺
Carte
fluent:map-24-regular
24px · teal
🔍
Recherche
fluent:search-20-filled
20px · teal
🌤
Météo
fluent:weather-partly-cloudy-day-24-regular
24px · teal
👤
Profil
carbon:user-profile
24px · teal
📅
Calendrier
fluent:calendar-20-regular
20px · grey
⚙
Paramètres
fluent:settings-24-regular
24px · grey
Actions
⊕
Ajouter
fluent:add-24-regular
24px · teal
⊗
Supprimer
fluent:delete-24-regular
24px · error
◎
Partager
fluent:share-24-regular
24px · navy
⊡
Copier
fluent:copy-24-regular
24px · grey
✓
Valider
fluent:checkmark-24-regular
24px · teal
✗
Annuler
fluent:dismiss-24-regular
24px · grey
Spots & Sessions
🌊
Vague / Surf
streamline:tidal-wave
32px · teal
📍
Localisation
fluent:location-12-filled
12–24px · blue
📅
Événement
fluent:calendar-20-regular
20px · green
🏄
Session
fluent:person-wave-24
24px · orange
👥
Groupe
fluent:people-24-regular
24px · grey
△
Spot actif
fluent:flag-24-filled
24px · teal
Météo & Conditions
☀️
Soleil
fluent:weather-sunny-20-regular
20px · school
☁
Nuage / Vent
fluent:cloud-words-28-regular
28px · grey
🌊
Marée
streamline:tidal-wave
24px · teal
🌡
Température
fluent:temperature-24-regular
24px · error
💧
Eau / Pluie
fluent:water-20-regular
20px · blue
⚡
Intensité
fluent:gauge-20-regular
20px · teal
Social
♥
Like
fluent:heart-24-filled
24px · error
♡
Like inactif
fluent:heart-24-regular
24px · grey
💬
Commentaire
fluent:chat-24-regular
24px · teal
◎
Partager
fluent:share-android-24
24px · navy
👥
Amis
fluent:people-add-24-regular
24px · green
★
Favori
fluent:star-24-filled
24px · session
UI Système
→
Flèche droite
fluent:ios-arrow-rtl-24-filled
24px · grey
✗
Fermer
fluent:dismiss-24-regular
24px · grey
≡
Menu
fluent:navigation-24-regular
24px · teal
⚙
Paramètres
fluent:settings-24-regular
24px · grey
🔔
Notification
fluent:alert-24-regular
24px · teal
⊟
Filtres
fluent:filter-24-regular
24px · grey
4. Tailles standardisées
Six tailles d'icônes sont définies selon le contexte d'utilisation. Chaque taille est optimisée pour un cas d'usage spécifique et correspond aux tailles natives Fluent Icons.
📍
16px
XS — Très petite
Tags, inline, labels, chips compactes
🔍
20px
SM — Small
Navigation secondaire, actions tertiaires, métadonnées
🗺
24px
MD — Standard
Navigation principale, bottom bar, actions primaires
🌤
32px
LG — Medium
Cards, headers de section, indicateurs météo
🌊
40px
XL — Large
Permissions système, états vides, onboarding
🏄
48px
2XL — Illustrations
Illustrations légères, splash screens, hero icons
Taille minimale tactile : Sur mobile, toute zone interactive contenant une icône doit avoir une zone de toucher minimale de 44x44px, même si l'icône est de 16 ou 20px. Utiliser du padding pour agrandir la zone de tap.
5. Couleurs des icônes
Cinq coloris définissent l'usage des icônes selon leur contexte et leur état dans l'interface.
🗺
Teal — Actif
#028490
Navigation active, actions primaires, éléments interactifs principaux
🗺
Grey — Inactif
#637887
Navigation inactive, icônes secondaires, états désactivés
🗺
Blanc — Sur fond sombre
#F8F8F8
Icônes sur header sombre, bottom sheets foncés, modals plein écran
🏄
Orange — Sessions
#F05906
Icônes liées aux sessions surf, actions imminentes, urgences
📅
Vert — Événements
#4CAF00
Événements écolo, confirmations, états de succès
Palette sémantique complète
Session — #F05906
Événement — #4CAF00
Localisation — #2D69C9
Suppression — #C62828
École surf — #FF9437
Shop — #9E340E
Info — #4FA3B1
6. Règles d'usage
Tableau de référence pour l'intégration correcte des icônes dans l'interface Swellr.
| Icône | Nom Fluent | Contexte d'usage | Couleur | Taille min. | Taille max. | Style |
|---|---|---|---|---|---|---|
| 🗺 | fluent:map-24-regular | Navigation — onglet Carte | #028490 | 20px | 32px | Regular / Filled (actif) |
| 🔍 | fluent:search-20-filled | Barre de recherche, header | #028490 | 16px | 24px | Filled |
| 🌤 | fluent:weather-partly-cloudy-day-24-regular | Onglet Météo, prévisions | #028490 | 24px | 48px | Regular / Filled (actif) |
| 👤 | carbon:user-profile | Onglet Profil, compte utilisateur | #637887 / #028490 | 20px | 40px | Regular / Filled (actif) |
| 📍 | fluent:location-12-filled | Marqueur de spot sur carte, adresse | #2D69C9 | 12px | 24px | Filled obligatoire |
| → | fluent:ios-arrow-rtl-24-filled | Navigation avant, lien "voir plus" | #637887 | 16px | 24px | Filled |
| ☀️ | fluent:weather-sunny-20-regular | Ensoleillement, conditions météo | #FF9437 | 20px | 40px | Regular |
| 🌊 | streamline:tidal-wave | Marée, hauteur des vagues, surf | #028490 | 24px | 48px | Regular |
| ⚡ | fluent:gauge-20-regular | Intensité de vague, niveau d'affluence | #028490 | 16px | 32px | Regular |
| 💧 | fluent:water-20-regular | Température de l'eau, précipitations | #2D69C9 | 16px | 32px | Regular |
| 🌡 | fluent:temperature-24-regular | Température air / eau | contextuelle | 20px | 32px | Regular |
| ☁ | fluent:cloud-words-28-regular | Couverture nuageuse, vitesse du vent | #637887 | 24px | 40px | Regular |
| 📅 | fluent:calendar-20-regular | Dates de session, événements | #4CAF00 (event) / #637887 | 16px | 24px | Regular / Filled (actif) |
Attention : Ne jamais redimensionner une icône en dehors des tailles définies (16, 20, 24, 32, 40, 48px). Les SVG Fluent sont optimisés pour ces tailles précises — un redimensionnement intermédiaire dégrade la netteté sur écran retina.
Bonnes et mauvaises pratiques
A faire
🗺
Icône 24px teal sur fond blanc — navigation active
🗺
Icône 20px grey — navigation inactive
🏄
Couleur sémantique contextuelle (session = orange)
🔍
Icône blanche sur fond sombre
A ne pas faire
🗺
Taille non standard (18px) — utiliser 16 ou 20px
🔍
Couleur gris clair non définie — manque de contraste
🗺
Icône pivotée — ne jamais transformer les icônes
🗺
Couleur session orange sur icône de navigation