Utilisez un icon personnalisé

Si vous avez vos propres icônes de flux et d’équipement

Utilisation des icons

Il est actuellement possible d’utiliser des icons personnalisés pour illustrer des collectes. Il est important de prendre conscience de toutes les utilisations de l’icons que vous allez mettre en place. Ainsi il sera plus simple de comprendre les contraintes auquel votre icon va être soumis.

Voici donc les différents cas possibles :

Icon de collecte sur la vue liste
Icon de collecte sur la vue liste
Icon de collecte sur la carte
Icon de collecte sur la carte
En icon de filtre sur la carte
En icon de filtre sur la carte
Icon de collecte dans le calendrier numérique
Icon de collecte dans le calendrier numérique
En sur-icon si la collecte est illustré avec une photo
En sur-icon si la collecte est illustré avec une photo
En icon principale d’illustration d’une collecte ainsi que sur les icons dans la trame derrière
En icon principale d’illustration d’une collecte ainsi que sur les icons dans la trame derrière
En icon de collecte sur le calendrier PDF
En icon de collecte sur le calendrier PDF
 

Contraintes d’utilisation

Au vu de toutes les utilisations possibles, voici les contraintes que nous avons identifiés :

Un icon blanc

L’icon doit être en monochrome blanc #ffffff. La couleur est ensuite remplacée dynamiquement selon les cas d’utilisation. Attention : Si vous souhaitez conserver du blanc dans votre icon alors changez légèrement la partie à conserver avec un code couleur très légèrement différent (exemple: #fffffe).

✅ À faire
✅ À faire
❌ À ne pas faire
❌ À ne pas faire

Un icon lisible

L’icon va être affiché en gros mais également en très petit ! De ce fait il ne faut pas prévoir un icon avec des détails (Ci-après, le mauvais exemple ne serait pas compréhensible sur les icons des calendriers PDFs et calendriers numérique).

✅ À faire
✅ À faire
❌ À ne pas faire
❌ À ne pas faire

Un icon correctement dimensionné

Par soucis d’harmonisation, il faut respecter un format et un ratio. Les consignes sont les suivantes :

  • Un container en 200x200px
  • Un icon centré
  • Une largeur et une hauteur max de 150px
✅ À faire
✅ À faire
❌ À ne pas faire
❌ À ne pas faire

Un icon au format svg

Votre icon doit être en format .svg afin de pouvoir être redimensionné selon les contextes sans pertes de qualité. Le format svg est un code qui peut être consulté et modifié par un programme et c'est ce qui va permettre la re-colorisation de l’icon suivant son contexte.

✅ À faire
✅ À faire
❌ À ne pas faire
❌ À ne pas faire
 
Est ce que cela répond à votre question ?
😞
😐
🤩