<aside>
csh Icons est la bibliothèque d’icones qui jour le rôle de raccourci visuel qui rend l'expérience de notre site internet fluide et transparente. Ils aident les gens à s’orienter, mettent en évidence les informations importantes et renforcent les aspects fondamentaux de notre marque : moderne, conviviale et universellement comprise.
A cette bibliothèque s’ajoute nos icones customs créer pour certains occasions exclusives.
Nous représentons les outils et les sujets aussi simplement que possible tout au long de notre production. Pour y parvenir, nous exploitons les métaphores existantes pour nos icônes. Certaines icônes sont par nature plus abstraites, mais des objets comme un chariot, un cœur, un crayon, une image et une loupe sont aussi universels que possible. Les métaphores restent cohérentes sur tous les systèmes d'exploitation et restent claires et additives à l'expérience.
Les icônes sont méticuleusement conçues dans 3 tailles. Il est essentiel de garder à l’esprit qu’à mesure que la taille des icônes diminue, les détails sont souvent épurés et simplifiés pour une clarté optimale. L'identité d'une icône doit rester cohérente et facilement reconnaissable dans toutes les tailles.
Nous prenons le choix de maintenir une épaisseur de trait constante de 1.5px pour les icônes de 24px, 20px et 16px, qui constituent notre bibliothèque d'icônes.
Le rayon d’arrondi est déterminé par la taille de l’icône et un contour centré : les icônes de 24 px et 20 px ont un rayon de 2 px, tandis que celles de 16 px ont un rayon de 1,5 px. Veuillez noter que l’utilisation d’un contour aligné à l’intérieur ou à l’extérieur entraînera un rayon incorrect. Dans ces cas, le rayon d’arrondi doit être ajusté pour correspondre aux spécifications du contour centré.
Pour améliorer la nature humaine, amicale et accueillante de notre style d'icône, nous utilisons des “endpoints” arrondis.
Les icônes doivent être utilisées pour améliorer l'expérience utilisateur en fournissant des repères visuels intuitifs, en facilitant la navigation et en améliorant la convivialité, en particulier pour les actions ou les concepts communément compris. Ils ne doivent pas être surutilisés ni remplacés par du texte dans des scénarios où cela pourrait provoquer une ambiguïté ou une confusion, en particulier si elles ne représentent pas clairement des actions ou des concepts associés.
Pour la hiérarchie visuelle, les tailles d'icônes et de texte appropriées doivent être conservées lorsque vous placez ces éléments ensemble sur une seule ligne. Dans la plupart des cas, une seule ligne de texte sera placée à côté des icônes de 16 px et 24 px, car ces tailles d'icônes sont les plus courantes dans notre système de badges. La légende et le corps du texte peuvent être utilisés à côté des icônes de 16 px, tandis que le texte du sous-titre 2 et du sous-titre 1 peut être utilisé avec des icônes de 24 px.
Les icônes et le texte doivent être alignés sur les centres verticaux. Utilisez un espacement de 6 px entre les icônes et le texte de 16 px et de 8 px entre les icônes et le texte de 24 px.
Les icônes ont tous une version “line” et une version “filled”. Les versions filled sont utilisées pour indiquer un état sélectionné ou pour accroître leur importance au sein d'une hiérarchie.