v1.0
📖 Index de Navigation
Navigation Actions Interface Services Connectivité Météo Fournisseurs Réseaux Sociaux Marque Travelski Utilisation SVG Multicolores Tailles Formes & Couleurs Intégration Bonnes Pratiques

UI Kit - Icônes Travelski

Bibliothèque complète d'icônes

📦 Collection de 30+ icônes SVG organisés par catégories pour l'interface Travelski. Cliquez sur "Copier" pour obtenir le code HTML d'intégration.

🎨 Couleurs basées sur la charte graphique Travelski (définies dans assets/uikit.css/color.css)
📁 Organisation par dossiers : navigation, actions, interface, services, connectivité, météo, partenaires, réseaux sociaux, marque

🧭 Navigation 4

Backward
Précédent
navigation/backward.svg
Forward
Suivant
navigation/forward.svg
Menu Burger
Menu
navigation/burger.svg
Cross
Croix
navigation/cross.svg

⚡ Actions 5

Download
Télécharger
actions/download.svg
Copy
Copier
actions/copy.svg
Share
Partager
actions/share.svg
Refresh
Actualiser
actions/refresh.svg
Aggrandir
Agrandir
actions/aggrandir.svg

🎨 Interface 6

Chat
Chat
interface/chat.svg
Comment
Commentaire
interface/comment.svg
Basket
Panier
interface/basket.svg
Bag
Sac
interface/bag.svg
Contract
Contrat
interface/contract.svg
Avis
Avis
interface/avis.svg

🏔️ Services 7

Couverts
Restaurant
services/couverts.svg
Skieur
Skieur
services/skieur.svg
Swimming Pool
Piscine
services/swimming_pool.svg
Helmet
Casque
services/helmet.svg
Plateau
Plateau
services/plateau.svg
Itinéraire
Itinéraire
services/itineraire.svg
Pin
Localisation
services/pin.svg

📶 Connectivité 2

WiFi Light
WiFi Clair
connectivity/wifi_light.svg
WiFi Dark
WiFi Sombre
connectivity/wifi_dark.svg

🌤️ Météo 4

Cloud
Nuage
weather/cloud.svg
Snow
Neige
weather/snow.svg
Wind
Vent
weather/wind.svg
Humidity
Humidité
weather/humidity.svg

🏢 Fournisseurs 2

Smile & Pass
Smile & Pass
providers/smile&pass.svg
Sport 2000
Sport 2000
providers/sport2000.svg

📱 Réseaux Sociaux 2

Facebook
Facebook
socials/facebook.svg
Instagram
Instagram
socials/instagram.svg

🏔️ Marque Travelski 4

Logo Travelski
Logo Principal
travelski/logo.svg
Logo Square Travelski
Logo Carré
travelski/logo_square.svg
Favicon Light
Favicon Clair
travelski/favicon-light.svg
Favicon Dark
Favicon Sombre
travelski/favicon-dark.svg

Utilisation

Méthode recommandée : SVG inline avec currentColor
Localisation avec couleur automatique
<!-- Méthode optimale : SVG inline avec currentColor --> <span class="icon-primary"> <svg width="24" height="24" viewBox="0 0 20 20"> <path d="..." fill="currentColor"/> </svg> </span> <!-- Alternative : img avec classes CSS (existant) --> <img src="assets/icons/services/pin.svg" alt="Localisation" class="icon-primary" width="24" height="24">
Intégration HTML basique (avec img)
Pin Icône avec classe de couleur
Download
<!-- Intégration avec img et classes CSS --> <img src="assets/icons/services/pin.svg" alt="Localisation" class="icon-primary" width="24" height="24"> <!-- Dans un bouton --> <button> <img src="assets/icons/actions/download.svg" class="icon-secondary" alt=""> Télécharger </button>

Tailles Recommandées

Différentes tailles d'icônes
Pin 16px - Small
Pin 20px - Default
Pin 24px - Medium
Pin 32px - Large
Pin 48px - Extra Large
<!-- Tailles CSS --> .icon-sm { width: 16px; height: 16px; } .icon-default { width: 20px; height: 20px; } .icon-md { width: 24px; height: 24px; } .icon-lg { width: 32px; height: 32px; } .icon-xl { width: 48px; height: 48px; }

Formes & Couleurs

Formes d'icônes disponibles
Pin
Cercle
Download
Carré
Share
Arrondi
<!-- Formes --> <div class="icon-circle"> <img src="assets/icons/services/pin.svg" alt="Pin"> </div> <div class="icon-square"> <img src="assets/icons/actions/download.svg" alt="Download"> </div> <div class="icon-rounded"> <img src="assets/icons/actions/share.svg" alt="Share"> </div>
Tailles de formes
Chat
SM (32px)
Chat
Default (40px)
Chat
MD (48px)
Chat
LG (56px)
Chat
XL (64px)
<!-- Tailles de formes --> <div class="icon-circle icon-shape-sm"> <img src="assets/icons/interface/chat.svg" alt="Chat"> </div> <div class="icon-circle icon-shape-lg"> <img src="assets/icons/interface/chat.svg" alt="Chat"> </div>
Couleurs d'icônes (sans forme)
Chat
Primary
#0042b8
Chat
Secondary
#fe6100
Chat
Accent
#3766c3
Chat
Success
#005f32
Chat
Black
#000000
Chat
Grey
#666666
<!-- Couleurs de la charte graphique --> <img src="assets/icons/interface/chat.svg" class="icon-primary"> <img src="assets/icons/interface/chat.svg" class="icon-secondary"> <img src="assets/icons/interface/chat.svg" class="icon-accent"> <img src="assets/icons/interface/chat.svg" class="icon-success"> <img src="assets/icons/interface/chat.svg" class="icon-black"> <img src="assets/icons/interface/chat.svg" class="icon-grey">
Combinaisons forme + couleur
Pin
Cercle Primary
Download
Cercle Secondary
Share
Carré Accent
Chat
Arrondi Success
<!-- Combinaisons --> <div class="icon-circle icon-primary"> <img src="assets/icons/services/pin.svg" alt="Pin"> </div> <div class="icon-square icon-accent"> <img src="assets/icons/actions/share.svg" alt="Share"> </div> <div class="icon-rounded icon-success"> <img src="assets/icons/interface/chat.svg" alt="Chat"> </div>
Inversions de couleurs
Swap classique (noir → blanc)
Pin
Primary
Download
Secondary
Share
Accent
Chat
Success
Pin
Black
Chat
Grey
Swap avec opacité (noir → blanc 30%)
Pin
Primary 30%
Download
Secondary 30%
Share
Accent 30%
Chat
Success 30%
Pin
Black 30%
Chat
Grey 30%
Effet des classes :
• icon-color-swap avec <img> : inversion simple (noir ↔ blanc)
• icon-color-swap avec SVG inline : noir → blanc, blanc → couleur de la forme
• icon-color-swap-opacity : idem avec 30% d'opacité
⚠️ Limitation des balises <img> :
Avec <img src="chat.svg">, les classes .icon-color-swap ne peuvent que faire une **inversion simple** (noir ↔ blanc).

🎯 Pour un contrôle précis :
Utilisez plutôt les classes .icon-replace-black ou .icon-replace-white
Ou utilisez du SVG inline pour un contrôle total des couleurs.
<!-- Inversion avec balise img (supporté) --> <div class="icon-circle icon-color-swap icon-primary"> <img src="assets/icons/interface/chat.svg" alt="Chat"> </div> <!-- Inversion avec opacité --> <div class="icon-circle icon-color-swap-opacity icon-secondary"> <img src="assets/icons/interface/chat.svg" alt="Chat"> </div>

💡 Classes disponibles

Formes :
  • .icon-circle - Forme circulaire
  • .icon-square - Forme carrée
  • .icon-rounded - Forme arrondie
Tailles de formes :
  • .icon-shape-sm - 32px
  • .icon-shape-default - 40px
  • .icon-shape-md - 48px
  • .icon-shape-lg - 56px
  • .icon-shape-xl - 64px
Couleurs (charte graphique) :
  • .icon-primary - Bleu principal (#0042b8)
  • .icon-secondary - Orange (#fe6100)
  • .icon-accent - Bleu accent (#3766c3)
  • .icon-success - Vert (#005f32)
  • .icon-black - Noir (#000000)
  • .icon-grey - Gris (#666666)
Tailles d'icônes :
  • .icon-sm - 16px
  • .icon-default - 20px
  • .icon-md - 24px
  • .icon-lg - 32px
  • .icon-xl - 48px
Contrôle sélectif (SVG multicolores) :
  • .icon-replace-black - Remplace seulement le noir
  • .icon-replace-white - Remplace seulement le blanc
  • .icon-replace-all - Remplace toutes les couleurs
  • .icon-invert - Inverse noir ↔ blanc
Classes spéciales (formes) :
  • .icon-inverted - Noir → Blanc
  • .icon-color-swap - Noir → Blanc, Blanc → Couleur forme
  • .icon-color-swap-opacity - Idem avec 30% d'opacité
Exemples de combinaisons :
  • .icon-circle .icon-primary - Forme + couleur
  • .icon-primary .icon-replace-black - Couleur + contrôle sélectif
  • .icon-square .icon-shape-lg .icon-secondary - Forme + taille + couleur
  • .icon-rounded .icon-color-swap .icon-accent - Forme + inversion + couleur

Intégration Avancée

CSS pour icônes responsives

Classes CSS utilitaires

Chat Share Copy
<!-- CSS utilitaires --> .icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } /* Couleurs personnalisées */ .icon--primary { filter: invert(0.2) sepia(1) saturate(3) hue-rotate(200deg); } /* États */ .icon--disabled { opacity: 0.4; } .icon--hover:hover { transform: scale(1.1); }

Bonnes Pratiques

✅ À Faire

  • Toujours inclure un attribut alt descriptif
  • Utiliser les tailles recommandées (16px, 20px, 24px, 32px, 48px)
  • Maintenir un ratio de taille cohérent avec le texte
  • Optimiser les SVG avant utilisation (supprimer métadonnées inutiles)
  • Utiliser width et height pour éviter les scintillements
  • Tester la lisibilité sur différents arrière-plans
  • Respecter la hiérarchie visuelle

🚫 À Éviter

  • Ne pas utiliser d'icônes trop petites (< 16px) pour l'accessibilité
  • Ne pas déformer les icônes (conserver les proportions)
  • Ne pas surcharger l'interface avec trop d'icônes
  • Ne pas utiliser d'icônes ambiguës sans texte explicatif
  • Ne pas oublier les états hover/focus pour l'interactivité
  • Ne pas utiliser des couleurs insuffisamment contrastées

📋 Accessibilité

  • Alt Text : Descriptif pour les icônes informatives, vide pour les icônes décoratives
  • Taille minimale : 16px minimum pour être cliquable
  • Contraste : Ratio de 3:1 minimum avec l'arrière-plan
  • Zones de clic : 44px minimum pour le touch sur mobile
  • Aria-label : Pour les boutons avec icônes seules

SVG avec Plusieurs Couleurs

Contrôle sélectif des couleurs dans les SVG

SVG avec noir + blanc (chat.svg)

Original
Noir → Bleu
Blanc → Orange
Inversé

SVG monochrome (pin.svg)

Original
Tout → Vert
Noir → Bleu
<!-- Pour SVG avec noir ET blanc --> <!-- Remplacer SEULEMENT les éléments noirs --> <span class="icon-primary icon-replace-black"> <svg>....</svg> </span> <!-- Remplacer SEULEMENT les éléments blancs --> <span class="icon-secondary icon-replace-white"> <svg>....</svg> </span> <!-- Inverser noir ↔ blanc --> <span class="icon-invert"> <svg>....</svg> </span> <!-- Pour SVG monochromes --> <!-- Remplacer TOUS les éléments --> <span class="icon-success icon-replace-all"> <svg>....</svg> </span>

🎨 Classes de contrôle disponibles

Remplacement sélectif :
  • .icon-replace-black - Remplace seulement les éléments noirs
  • .icon-replace-white - Remplace seulement les éléments blancs
  • .icon-replace-all - Remplace tous les éléments (monochromes)
  • .icon-invert - Inverse noir ↔ blanc
Exemple d'usage :
  • Chat.svg (noir+blanc) → icon-replace-black
  • Pin.svg (monochrome) → icon-replace-all
  • Logos (multicolores) → icon-replace-black
  • Icônes UI → icon-invert pour thème sombre
Code copié dans le presse-papiers !