{"id":377,"date":"2015-09-22T14:39:15","date_gmt":"2015-09-22T14:39:15","guid":{"rendered":"http:\/\/www.jimdo-stable-staging.com/fr/blog\/?p=377"},"modified":"2021-10-28T13:45:05","modified_gmt":"2021-10-28T12:45:05","slug":"icones-gratuits-site-web","status":"publish","type":"post","link":"https:\/\/www.jimdo-stable-staging.com/fr/blog\/icones-gratuits-site-web\/","title":{"rendered":"Comment trouver et utiliser des ic\u00f4nes gratuites pour votre site"},"content":{"rendered":"\n

En r\u00e8gle g\u00e9n\u00e9rale, les sites web professionnels utilisent des ic\u00f4nes pour guider les visiteurs et se d\u00e9marquer visuellement. Saviez-vous que vous pouvez ajouter des ic\u00f4nes sur votre site web, m\u00eame sans \u00eatre designer ? Dans cet article, nous vous recommandons les meilleures plateformes pour trouver des ic\u00f4nes gratuites et nous vous expliquons comment les ins\u00e9rer facilement sur votre site.<\/p>\n\n\n\n

Que sont les ic\u00f4nes de site et pourquoi sont-elles importantes ?<\/h2>\n\n\n\n

Un ic\u00f4ne de site est une image ou un symbole que vous ins\u00e9rez sur votre page web. Elle peut servir de bouton, de lien cliquable ou d\u2019\u00e9l\u00e9ment de d\u00e9coration, tout simplement.<\/p>\n\n\n\n

\"Site
Ces ic\u00f4nes au design \u00e9pur\u00e9, disponibles gratuitement sur iconmonstr<\/a>, sont faciles \u00e0 ajouter sur votre site.<\/figcaption><\/figure>\n\n\n\n

Les ic\u00f4nes peuvent faire partie int\u00e9grante votre image de marque.<\/strong> Les ic\u00f4nes de site web contribuent \u00e0 renforcer les couleurs<\/a>, le style, le ton<\/a> et le logo<\/a> de votre marque. En d\u2019autres termes, elles sont un \u00e9l\u00e9ment \u00e0 part enti\u00e8re de votre charte graphique et rendent vos visuels uniques.<\/p>\n\n\n\n

\n
\n

Cr\u00e9ez un logo pour que votre entreprise se d\u00e9marque.<\/h3>\n<\/div>\n\n\n\n
\n
\n
Cr\u00e9ez votre logo<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

Les ic\u00f4nes facilitent la navigation sur votre site. <\/strong>Elles sont faciles \u00e0 reconna\u00eetre et guident les visiteurs sur votre site<\/a>, comme des panneaux de signalisation. Une loupe vous indique l\u2019emplacement de la barre de recherche, un t\u00e9l\u00e9phone vous signale l\u2019emplacement du num\u00e9ro de t\u00e9l\u00e9phone, un caddie ou panier regroupe les articles que vous souhaitez acheter, etc. Ces symboles courants am\u00e9liorent la lisibilit\u00e9 de votre site.

Les ic\u00f4nes peuvent faire partie int\u00e9grante votre image de marque.<\/strong> Les ic\u00f4nes de site web contribuent \u00e0 renforcer les couleurs<\/a>, le style, le ton<\/a> et le logo<\/a> de votre marque. En d\u2019autres termes, elles sont un \u00e9l\u00e9ment \u00e0 part enti\u00e8re de votre charte graphique et rendent vos visuels uniques.

Les ic\u00f4nes contribuent au design global de votre site. <\/strong>Les ic\u00f4nes de site web sont des \u00e9l\u00e9ments pratiques pour ajouter des espaces vides sur vos pages<\/a>. Elles permettent d\u2019a\u00e9rer visuellement votre site et de le rendre plus lisible, sans pour autant l\u2019encombrer.<\/p>\n\n\n\n

Les ic\u00f4nes sont universelles.<\/strong> Cr\u00e9er un site multilingue<\/a> est certes un jeu d\u2019enfants, mais sachez que les ic\u00f4nes sont un excellent moyen de rendre votre message compr\u00e9hensible dans toutes les langues.<\/p>\n\n\n\n

Remarque :<\/strong> Vous avez certainement entendu parler des favicons<\/strong>. Il s\u2019agit d\u2019une petite ic\u00f4ne personnalis\u00e9e qui appara\u00eet \u00e0 c\u00f4t\u00e9 de l\u2019adresse de votre site web dans les onglets de navigateur. C\u2019est en g\u00e9n\u00e9ral une mini version de votre logo. D\u00e9couvrez dans notre article comment ajouter un favicon sur votre site Jimdo<\/a>. <\/p>\n\n\n\n

Comment utiliser des ic\u00f4nes professionnelles sur votre site web ?<\/h2>\n\n\n\n

La plupart des sites d\u2019ic\u00f4nes fonctionnent sur le m\u00eame principe. Ils proposent des milliers d’ic\u00f4nes, dans de nombreux styles diff\u00e9rents. Vous pouvez t\u00e9l\u00e9charger une ic\u00f4ne ou un pack d\u2019ic\u00f4nes. Nous vous conseillons de les t\u00e9l\u00e9charger au format .PNG<\/a>, qui sera adapt\u00e9 \u00e0 la plupart des utilisations.<\/p>\n\n\n\n

De nombreux sites web d\u2019ic\u00f4nes offrent certaines ic\u00f4nes gratuitement. Toutefois, vous devrez cr\u00e9er un compte et probablement passer \u00e0 une offre payante ou payer une petite somme si vous souhaitez b\u00e9n\u00e9ficier d\u2019options de personnalisation ou utiliser ces ic\u00f4nes sans citer leur source (plus d\u2019explications ci-dessous).<\/p>\n\n\n\n

Faites attention aux autorisations et r\u00e8gles d\u2019utilisation<\/h3>\n\n\n\n

La plupart de ces sites d\u2019ic\u00f4nes gratuites existent uniquement car des designers font don de leurs travaux pour que d\u2019autres personnes puissent les utiliser. Et nous les en remercions !<\/p>\n\n\n\n

Mais, cela signifie que certains offrent des ic\u00f4nes gratuites en t\u00e9l\u00e9chargement, \u00e0 condition que vous citiez l\u2019artiste sur votre site web et y ajoutiez un lien vers la page sur laquelle vous vous \u00eates procur\u00e9 l\u2019ic\u00f4ne. Certains sites acceptent d\u2019\u00eatre cit\u00e9s en tout petit sur le pied de page, tandis que d\u2019autres exigent une mention plus visible, sous l\u2019ic\u00f4ne.<\/p>\n\n\n\n

Consultez les mentions l\u00e9gales du site, car certaines ic\u00f4nes peuvent \u00eatre utilis\u00e9es sur un site web, mais pas dans un logo d\u2019entreprise ni sur des produits commerciaux.<\/p>\n\n\n\n

Une fois votre ic\u00f4ne t\u00e9l\u00e9charg\u00e9e, comment l\u2019ajouter sur votre site ?<\/h3>\n\n\n\n

Sur Jimdo, vous pouvez ajouter une ic\u00f4ne dans tout \u00e9l\u00e9ment pouvant accueillir une image. Vous devez simplement l\u2019importer en tant qu\u2019image. T\u00e9l\u00e9chargez-la dans votre biblioth\u00e8que, puis ins\u00e9rez-la dans un bloc Image, pour l\u2019utiliser comme image, arri\u00e8re-plan d\u2019un bloc ou lien cliquable. Vous trouverez plus d\u2019id\u00e9es et d\u2019astuces dans notre article Comment personnaliser le design de votre site Jimdo<\/a>.<\/p>\n\n\n\n

Remarque : Si vous utilisez Jimdo Creator, vous pouvez ajouter vos ic\u00f4nes \u00e0 c\u00f4t\u00e9 d\u2019un texte \u00e0 l\u2019aide d\u2019un \u00e9l\u00e9ment Image et d\u2019un \u00e9l\u00e9ment Colonnes<\/a>.<\/p>\n\n\n\n

O\u00f9 trouver des ic\u00f4nes de site gratuites ?<\/h2>\n\n\n\n

Il existe de nombreux sites proposant des ic\u00f4nes, dont la plupart vous autorisent \u00e0 utiliser des ic\u00f4nes de bonne qualit\u00e9 gratuitement ou contre citation de la source. De nombreux sites de banque d’images<\/a> ont commenc\u00e9 \u00e0 inclure des ic\u00f4nes dans leurs offres. Nous avons s\u00e9lectionn\u00e9 quelques-uns de nos sites pr\u00e9f\u00e9r\u00e9s pour t\u00e9l\u00e9charger des ic\u00f4nes gratuitement. D\u00e9couvrez-les ci-dessous :<\/p>\n\n\n\n

iconmonstr<\/h3>\n\n\n\n

Bas\u00e9 en Allemagne, iconmonstr<\/a> propose des milliers d\u2019ic\u00f4nes. Ces derni\u00e8res sont assez basiques, mais peuvent \u00eatre utilis\u00e9es gratuitement dans un but commercial. De plus, vous \u00eates libre de modifier leur taille et leur couleur. <\/p>\n\n\n\n

Flaticon.com<\/h3>\n\n\n\n

Flaticon.com<\/a> poss\u00e8de une tr\u00e8s grande s\u00e9lection d\u2019ic\u00f4nes de site gratuites. Le choix est \u00e9norme et le design des \u00e9l\u00e9ments est superbe. Mais, si vous souhaitez utiliser leurs ic\u00f4nes gratuitement, vous devrez d\u2019abord cr\u00e9er un compte et citer clairement leur auteur sur votre site. Pour ne pas \u00eatre contraint(e) de mentionner les copyrights, vous devrez souscrire \u00e0 une offre payante. <\/p>\n\n\n\n

\"S\u00e9lection
Une petite s\u00e9lection des packs d\u2019ic\u00f4nes disponibles sur Flaticon.<\/figcaption><\/figure><\/div>\n\n\n\n

Flaticons.net<\/h3>\n\n\n\n

Flaticons.net<\/a> est un autre site o\u00f9 trouver de nombreuses ic\u00f4nes \u00e0 personnaliser. Vous pourrez t\u00e9l\u00e9charger des ic\u00f4nes gratuitement et modifier leur taille, leur couleur, leur forme voire la couleur de l\u2019arri\u00e8re-plan. <\/p>\n\n\n\n

Remarque <\/strong>: Pour dupliquer une couleur \u00e0 l\u2019identique, trouvez son \u00ab code couleur \u00bb, une valeur num\u00e9rique qui identifie une nuance et vous permet d\u2019obtenir une correspondance parfaite. Il vous suffit d\u2019utiliser une extension comme ColorZilla<\/a> ou EyeDropper<\/a>. Ces outils sont capables d\u2019identifier des couleurs sur n\u2019importe quel site, y compris le v\u00f4tre.<\/p>\n\n\n\n

\"Modification
Sur de nombreux sites d\u2019ic\u00f4nes gratuites, vous pouvez modifier la taille, la couleur et le style de l\u2019ic\u00f4ne avant de la t\u00e9l\u00e9charger. Voici un exemple sur Flaticons.net.<\/figcaption><\/figure><\/div>\n\n\n\n

GraphicBurger<\/h3>\n\n\n\n

Les ic\u00f4nes sur GraphicBurger<\/a> se d\u00e9marquent gr\u00e2ce \u00e0 leur look, unique en son genre. Elles sont disponibles par pack et, malheureusement, il est impossible d\u2019ajuster leur couleur ou leur taille. <\/p>\n\n\n\n

Iconfinder<\/h3>\n\n\n\n

Iconfinder<\/a> propose une vaste s\u00e9lection de packs d\u2019ic\u00f4nes aux styles diff\u00e9rents. La plupart des ic\u00f4nes sont gratuites, mais le site offre \u00e9galement des options payantes, si vous avez seulement besoin de quelques ic\u00f4nes et ne souhaitez pas payer un abonnement mensuel ni annuel. Vous pouvez simplement acheter une ic\u00f4ne \u00e0 utiliser tout de suite pour quelques dollars. <\/p>\n\n\n\n

Good Stuff No Nonsense<\/h3>\n\n\n\n

Si vous \u00eates \u00e0 la recherche d\u2019ic\u00f4nes dessin\u00e9es \u00e0 la main, jetez un \u0153il \u00e0 <\/strong>Good Stuff No Nonsense<\/a>. Ce site propose des ic\u00f4nes au design plus personnalis\u00e9 et authentique, qui sont plus adapt\u00e9es \u00e0 certaines activit\u00e9s. Des packs d\u2019ic\u00f4nes gratuits et payants sont disponibles. <\/p>\n\n\n\n

\"Site
Les ic\u00f4nes gratuites de Good Stuff No Nonsense ont l\u2019air d\u2019avoir \u00e9t\u00e9 dessin\u00e9es \u00e0 la main.<\/figcaption><\/figure>\n\n\n\n

Comment bien utiliser des ic\u00f4nes de site ?<\/h2>\n\n\n\n

Privil\u00e9giez des symboles universels. <\/strong>Pour une fois, nous vous sugg\u00e9rons de ne pas faire dans l\u2019originalit\u00e9. Choisissez des ic\u00f4nes dont la signification est claire comme de l\u2019eau de roche, notamment s\u2019il s\u2019agit d\u2019ic\u00f4nes directionnelles. Votre but est d\u2019amener vos visiteurs \u00e0 la comprendre imm\u00e9diatement ou \u00e0 cliquer dessus. S\u2019il s\u2019agit d\u2019un \u00e9l\u00e9ment purement d\u00e9coratif, vous avez, dans ce cas, plus de marge en mati\u00e8re de cr\u00e9ativit\u00e9, mais ne r\u00e9inventez pas la roue pour autant. L\u2019utilisation d\u2019ic\u00f4nes peu claires ou peu pratiques est l\u2019une des erreurs UX (exp\u00e9rience utilisateur) les plus courantes<\/a> lors de la cr\u00e9ation d\u2019un site. <\/p>\n\n\n\n

Ajoutez un texte en regard d\u2019une ic\u00f4ne si sa signification n\u2019est pas claire. <\/strong>Vous ne trouverez pas forc\u00e9ment une ic\u00f4ne correspondante pour chaque contenu de votre site. C\u2019est pour cette raison qu\u2019il est utile d\u2019accompagner une ic\u00f4ne d\u2019un texte, si celle-ci peut pr\u00eater \u00e0 confusion. Le texte permet \u00e9galement d\u2019am\u00e9liorer l’accessibilit\u00e9 de votre site web pour les personnes handicap\u00e9es<\/a>, qui ne peuvent pas forc\u00e9ment voir vos ic\u00f4nes. Retenez simplement qu\u2019une ic\u00f4ne a pour but de compl\u00e9ter votre contenu et non de le remplacer.<\/p>\n\n\n\n

Testez vos ic\u00f4nes aupr\u00e8s des visiteurs de votre site<\/strong>. La signification d\u2019une ic\u00f4ne peut \u00eatre \u00e9vidente pour vous, mais pas forc\u00e9ment pour les autres. C\u2019est pour cette raison que nous vous recommandons syst\u00e9matiquement de tester l\u2019ergonomie de votre site<\/a>. Demandez simplement \u00e0 quelques volontaires de naviguer sur votre site et observez leurs actions, afin de vous assurer de sa clart\u00e9. Vous pourrez ainsi v\u00e9rifier si vos ic\u00f4nes sont compr\u00e9hensibles et m\u00e8nent aux actions souhait\u00e9es.<\/p>\n\n\n\n

Assurez la coh\u00e9rence de vos ic\u00f4nes. <\/strong>Les ic\u00f4nes sont plus efficaces lorsqu\u2019elles ont toutes le m\u00eame style, \u00e0 savoir un design clair et professionnel. Lorsque vous utilisez des ic\u00f4nes sur votre site, veillez \u00e0 ce que leur taille, leur couleur et leur style soient identiques pour toutes. (Bonne nouvelle : la plupart des biblioth\u00e8ques d\u2019ic\u00f4nes proposent des ic\u00f4nes courantes sous forme de pack, ce qui vous \u00e9vite d\u2019assortir des ic\u00f4nes issues de plusieurs sources diff\u00e9rentes). N\u2019oubliez pas d\u2019harmoniser leur emplacement : que vous les placiez \u00e0 droite, \u00e0 gauche, au-dessous et ou en dessous de votre texte, gardez toujours le m\u00eame emplacement partout. <\/p>\n\n\n\n

Misez sur la simplicit\u00e9.<\/strong> Les ic\u00f4nes sont des \u00e9l\u00e9ments visuels efficaces et tr\u00e8s faciles \u00e0 utiliser, mais n\u2019en abusez pas. Pour rappel, comme pour toute chose, elles doivent \u00eatre utilis\u00e9es \u00e0 bon escient, sous peine de vous retrouver avec un site peu clair et encombr\u00e9. <\/p>\n\n\n\n

Peut-on cr\u00e9er ses propres ic\u00f4nes de site ?<\/h2>\n\n\n\n

Comme conseill\u00e9 plus haut, mieux vaut utiliser des ic\u00f4nes universelles et connues de tous. Mais si vous ne trouvez pas chaussure \u00e0 votre pied dans les biblioth\u00e8ques d\u2019ic\u00f4nes, vous pouvez bien entendu cr\u00e9er les v\u00f4tres. Voici quelques id\u00e9es pour vous guider :
<\/p>\n\n\n\n