En règle générale, les sites web professionnels utilisent des icônes pour guider les visiteurs et se démarquer visuellement. Saviez-vous que vous pouvez ajouter des icônes sur votre site web, même sans être designer ? Dans cet article, nous vous recommandons les meilleures plateformes pour trouver des icônes gratuites et nous vous expliquons comment les insérer facilement sur votre site.
Que sont les icônes de site et pourquoi sont-elles importantes ?
Un icône de site est une image ou un symbole que vous insérez sur votre page web. Elle peut servir de bouton, de lien cliquable ou d’élément de décoration, tout simplement.
Les icônes peuvent faire partie intégrante votre image de marque. Les icônes de site web contribuent à renforcer les couleurs, le style, le ton et le logo de votre marque. En d’autres termes, elles sont un élément à part entière de votre charte graphique et rendent vos visuels uniques.
Créez un logo pour que votre entreprise se démarque.
Les icônes facilitent la navigation sur votre site. Elles sont faciles à reconnaître et guident les visiteurs sur votre site, comme des panneaux de signalisation. Une loupe vous indique l’emplacement de la barre de recherche, un téléphone vous signale l’emplacement du numéro de téléphone, un caddie ou panier regroupe les articles que vous souhaitez acheter, etc. Ces symboles courants améliorent la lisibilité de votre site.
Les icônes peuvent faire partie intégrante votre image de marque. Les icônes de site web contribuent à renforcer les couleurs, le style, le ton et le logo de votre marque. En d’autres termes, elles sont un élément à part entière de votre charte graphique et rendent vos visuels uniques.
Les icônes contribuent au design global de votre site. Les icônes de site web sont des éléments pratiques pour ajouter des espaces vides sur vos pages. Elles permettent d’aérer visuellement votre site et de le rendre plus lisible, sans pour autant l’encombrer.
Les icônes sont universelles. Créer un site multilingue est certes un jeu d’enfants, mais sachez que les icônes sont un excellent moyen de rendre votre message compréhensible dans toutes les langues.
Remarque : Vous avez certainement entendu parler des favicons. Il s’agit d’une petite icône personnalisée qui apparaît à côté de l’adresse de votre site web dans les onglets de navigateur. C’est en général une mini version de votre logo. Découvrez dans notre article comment ajouter un favicon sur votre site Jimdo.
Comment utiliser des icônes professionnelles sur votre site web ?
La plupart des sites d’icônes fonctionnent sur le même principe. Ils proposent des milliers d’icônes, dans de nombreux styles différents. Vous pouvez télécharger une icône ou un pack d’icônes. Nous vous conseillons de les télécharger au format .PNG, qui sera adapté à la plupart des utilisations.
De nombreux sites web d’icônes offrent certaines icônes gratuitement. Toutefois, vous devrez créer un compte et probablement passer à une offre payante ou payer une petite somme si vous souhaitez bénéficier d’options de personnalisation ou utiliser ces icônes sans citer leur source (plus d’explications ci-dessous).
Faites attention aux autorisations et règles d’utilisation
La plupart de ces sites d’icônes gratuites existent uniquement car des designers font don de leurs travaux pour que d’autres personnes puissent les utiliser. Et nous les en remercions !
Mais, cela signifie que certains offrent des icônes gratuites en téléchargement, à condition que vous citiez l’artiste sur votre site web et y ajoutiez un lien vers la page sur laquelle vous vous êtes procuré l’icône. Certains sites acceptent d’être cités en tout petit sur le pied de page, tandis que d’autres exigent une mention plus visible, sous l’icône.
Consultez les mentions légales du site, car certaines icônes peuvent être utilisées sur un site web, mais pas dans un logo d’entreprise ni sur des produits commerciaux.
Une fois votre icône téléchargée, comment l’ajouter sur votre site ?
Sur Jimdo, vous pouvez ajouter une icône dans tout élément pouvant accueillir une image. Vous devez simplement l’importer en tant qu’image. Téléchargez-la dans votre bibliothèque, puis insérez-la dans un bloc Image, pour l’utiliser comme image, arrière-plan d’un bloc ou lien cliquable. Vous trouverez plus d’idées et d’astuces dans notre article Comment personnaliser le design de votre site Jimdo.
Remarque : Si vous utilisez Jimdo Creator, vous pouvez ajouter vos icônes à côté d’un texte à l’aide d’un élément Image et d’un élément Colonnes.
Où trouver des icônes de site gratuites ?
Il existe de nombreux sites proposant des icônes, dont la plupart vous autorisent à utiliser des icônes de bonne qualité gratuitement ou contre citation de la source. De nombreux sites de banque d’images ont commencé à inclure des icônes dans leurs offres. Nous avons sélectionné quelques-uns de nos sites préférés pour télécharger des icônes gratuitement. Découvrez-les ci-dessous :
iconmonstr
Basé en Allemagne, iconmonstr propose des milliers d’icônes. Ces dernières sont assez basiques, mais peuvent être utilisées gratuitement dans un but commercial. De plus, vous êtes libre de modifier leur taille et leur couleur.
Flaticon.com
Flaticon.com possède une très grande sélection d’icônes de site gratuites. Le choix est énorme et le design des éléments est superbe. Mais, si vous souhaitez utiliser leurs icônes gratuitement, vous devrez d’abord créer un compte et citer clairement leur auteur sur votre site. Pour ne pas être contraint(e) de mentionner les copyrights, vous devrez souscrire à une offre payante.
Flaticons.net
Flaticons.net est un autre site où trouver de nombreuses icônes à personnaliser. Vous pourrez télécharger des icônes gratuitement et modifier leur taille, leur couleur, leur forme voire la couleur de l’arrière-plan.
Remarque : Pour dupliquer une couleur à l’identique, trouvez son « code couleur », une valeur numérique qui identifie une nuance et vous permet d’obtenir une correspondance parfaite. Il vous suffit d’utiliser une extension comme ColorZilla ou EyeDropper. Ces outils sont capables d’identifier des couleurs sur n’importe quel site, y compris le vôtre.
GraphicBurger
Les icônes sur GraphicBurger se démarquent grâce à leur look, unique en son genre. Elles sont disponibles par pack et, malheureusement, il est impossible d’ajuster leur couleur ou leur taille.
Iconfinder
Iconfinder propose une vaste sélection de packs d’icônes aux styles différents. La plupart des icônes sont gratuites, mais le site offre également des options payantes, si vous avez seulement besoin de quelques icônes et ne souhaitez pas payer un abonnement mensuel ni annuel. Vous pouvez simplement acheter une icône à utiliser tout de suite pour quelques dollars.
Good Stuff No Nonsense
Si vous êtes à la recherche d’icônes dessinées à la main, jetez un œil à Good Stuff No Nonsense. Ce site propose des icônes au design plus personnalisé et authentique, qui sont plus adaptées à certaines activités. Des packs d’icônes gratuits et payants sont disponibles.
Comment bien utiliser des icônes de site ?
Privilégiez des symboles universels. Pour une fois, nous vous suggérons de ne pas faire dans l’originalité. Choisissez des icônes dont la signification est claire comme de l’eau de roche, notamment s’il s’agit d’icônes directionnelles. Votre but est d’amener vos visiteurs à la comprendre immédiatement ou à cliquer dessus. S’il s’agit d’un élément purement décoratif, vous avez, dans ce cas, plus de marge en matière de créativité, mais ne réinventez pas la roue pour autant. L’utilisation d’icônes peu claires ou peu pratiques est l’une des erreurs UX (expérience utilisateur) les plus courantes lors de la création d’un site.
Ajoutez un texte en regard d’une icône si sa signification n’est pas claire. Vous ne trouverez pas forcément une icône correspondante pour chaque contenu de votre site. C’est pour cette raison qu’il est utile d’accompagner une icône d’un texte, si celle-ci peut prêter à confusion. Le texte permet également d’améliorer l’accessibilité de votre site web pour les personnes handicapées, qui ne peuvent pas forcément voir vos icônes. Retenez simplement qu’une icône a pour but de compléter votre contenu et non de le remplacer.
Testez vos icônes auprès des visiteurs de votre site. La signification d’une icône peut être évidente pour vous, mais pas forcément pour les autres. C’est pour cette raison que nous vous recommandons systématiquement de tester l’ergonomie de votre site. Demandez simplement à quelques volontaires de naviguer sur votre site et observez leurs actions, afin de vous assurer de sa clarté. Vous pourrez ainsi vérifier si vos icônes sont compréhensibles et mènent aux actions souhaitées.
Assurez la cohérence de vos icônes. Les icônes sont plus efficaces lorsqu’elles ont toutes le même style, à savoir un design clair et professionnel. Lorsque vous utilisez des icônes sur votre site, veillez à ce que leur taille, leur couleur et leur style soient identiques pour toutes. (Bonne nouvelle : la plupart des bibliothèques d’icônes proposent des icônes courantes sous forme de pack, ce qui vous évite d’assortir des icônes issues de plusieurs sources différentes). N’oubliez pas d’harmoniser leur emplacement : que vous les placiez à droite, à gauche, au-dessous et ou en dessous de votre texte, gardez toujours le même emplacement partout.
Misez sur la simplicité. Les icônes sont des éléments visuels efficaces et très faciles à utiliser, mais n’en abusez pas. Pour rappel, comme pour toute chose, elles doivent être utilisées à bon escient, sous peine de vous retrouver avec un site peu clair et encombré.
Peut-on créer ses propres icônes de site ?
Comme conseillé plus haut, mieux vaut utiliser des icônes universelles et connues de tous. Mais si vous ne trouvez pas chaussure à votre pied dans les bibliothèques d’icônes, vous pouvez bien entendu créer les vôtres. Voici quelques idées pour vous guider :
- Vous souhaitez utiliser votre propre logo comme icône ? Si vous avez utilisé le Logo Creator de Jimdo, par exemple, vous pouvez ajouter votre logo comme élément décoratif de votre site web. Découvrez plus d’idées et d’astuces dans notre article Comment personnaliser le design de votre site Jimdo
- Vous souhaitez créer une icône à partir d’une photo ? Voici notre tutoriel incontournable pour savoir comment retirer l’arrière-plan d’une image sans Photoshop.
- Vous souhaitez créer une icône vraiment unique ? Vous devrez probablement collaborer avec un graphiste professionnel. Un expert créera pour vous une icône à la signification claire, mais au design original. Effectuez des recherches sur Google pour trouver un graphiste, connectez-vous avec des professionnels en la matière sur LinkedIn ou parcourez les plateformes de design comme Behance, Dribbble et 99designs.
Envie de tester des icônes sur votre site web ?
Les icônes sont un moyen simple mais efficace de rendre votre site plus intuitif et attractif. N’oubliez pas de choisir une icône qui correspond bien au texte qui l’accompagne et gardez en tête les quatre principaux critères évoqués : la taille, la couleur, l’emplacement et la cohérence. Testez des icônes issues des sites listés dans cet article et amusez-vous !