Les packages d’icônes Flutter les plus utilisés


Avatar de Pierre Courtois

Les icons sont des éléments visuels importants pour créer un design d’application clair et unique. Heureusement, de nombreux packages sont proposés par Flutter, vous donnant accès à des milliers de ressources gratuites.


mozaiques icones

Feather Icons

Le package Flutter, Feather Icons vous permet d’accéder à une libraire de 287 icônes, au design arrondi. 

Installer le package flutter_feather_icons

Deux options s’offrent à vous pour télécharger le package flutter_feather_icons dans sa dernière version (2.0.0+1) : 

  1. Utiliser le terminal de commande dans Visual Studio et entrer la commande : $ flutter pub add flutter_feather_icons ;
  2. Placer la dépendance flutter_feather_icons: ^2.0.0+1 dans votre dossier pubspec.yaml.

Une fois cela fait, laissez le package se télécharger et ajoutez la ligne import ‘package:flutter_feather_icons/flutter_feather_icons.dart’; en haut de chaque document en .dart où vous souhaitez l’utiliser. 

Utiliser flutter_feather_icons

Une fois la librairie d’icons importée, vous allez pouvoir les utiliser dans votre application via la méthode suivante : 

icon : Icon(FeatherIcons.nom_de_licon) 

Je vous mets aussi à disposition le lien vers le catalogue complet des icons Feather. Vous pourrez y trouver les différentes ressources que vous pouvez utiliser et leur nom.

Unicons

Le package Unicons vous permet quant à lui d’accéder à une libraire grande de plus de 7000 icons. Celle-ci présente la particularité de contenir à la fois des icons de type “line”, mais aussi solides. 

Installer le package unicons

Deux options s’offrent à vous pour télécharger le package unicons dans sa dernière version (3.0.0) : 

  1. Utiliser le terminal de commande dans Visual Studio et entrer la commande : $ flutter pub add unicons ;
  2. Placer la dépendance unicons: ^3.0.0 dans votre dossier pubspec.yaml.

Une fois cela fait, laissez le package se télécharger et ajoutez la ligne import ‘package:unicons/unicons.dart’; en haut de chaque document en .dart où vous souhaitez l’utiliser. 

Utiliser unicons

Une fois la librairie d’icons importée, vous allez pouvoir les utiliser dans votre application via la méthode suivante : 

icon : Icon(UniconsLine.nom_de_licon) -> Pour les Lines icons 
icon : Icon(UniconsSolid.nom_de_licon) -> Pour les icons solides

Je vous mets aussi à disposition le lien vers le catalogue complet de Unicons. Vous aurez besoin d’un compte Google ou Facebook pour pouvoir le consulter dans sa totalité. À noter que vous pourrez aussi trouver des illustrations et des modèles 3D. 

Ionicons

La libraire du package Ionicons se compose de plus de 1300 nouveaux icons à utiliser pour votre application. On trouve y trouve des icons solides, et des icons à contours ronds ou carrés. 

Installer le package ionicons

Deux options s’offrent à vous pour télécharger le package ionicons dans sa dernière version (0.2.2) : 

  1. Utiliser le terminal de commande dans Visual Studio et entrer la commande : $ flutter pub add ionicons
  2. Placer la dépendance ionicons: ^0.2.2 dans votre dossier pubspec.yaml.

Une fois cela fait, laissez le package se télécharger et ajoutez la ligne import ‘package:ionicons/ionicons.dart’; en haut de chaque document en .dart où vous souhaitez l’utiliser. 

Utiliser Ionicons

Une fois la librairie d’icons importée, vous allez pouvoir les utiliser dans votre application via la méthode suivante : 

icon : Icon(Ionicons.nom_de_licon) 

Je vous mets aussi à disposition le lien vers le catalogue complet de Ionicons. Vous y trouverez tous les icons classés en 3 catégories, sharp, outline, solid et une barre de recherche. 

Carbon Icons

Le package carbon_icons vous donne accès à plus de 1550 icons venant du Carbon Design System. Ses line icons ont un design épuré, avec des bords de type rectangulaire et couvrent des sujets comme : 

  • La technologie ; 
  • La santé ;
  • La navigation ; 
  • Les Data et l’IA ; 
  • Le temps ; 
  • La météo, etc.

Installer le package carbon_icons

Deux options s’offrent à vous pour télécharger le package carbon_icons dans sa dernière version (0.0.1+2) : 

  1. Utiliser le terminal de commande dans Visual Studio et entrer la commande : $ flutter pub add carbon_icons
  2. Placer la dépendance carbon_icons: ^0.0.1+2 dans votre dossier pubspec.yaml.

Une fois cela fait, laissez le package se télécharger et ajoutez la ligne import ‘package:carbon_icons/carbon_icons.dart’; en haut de chaque document en .dart où vous souhaitez l’utiliser. 

Utiliser Carbon Icons

Une fois la librairie d’icons importée, vous allez pouvoir les utiliser dans votre application via la méthode suivante : 

icon : Icon(CarbonIcons.nom_de_licon)

Je vous mets aussi à disposition le lien vers le catalogue complet de carbon design system. Vous y trouverez tous les icons disponibles ainsi que d’autres ressources comme des pictogrammes, des thèmes ou des typographies.

Eva Icons

Le package Eva Icons est très similaire au package Feather, mais vient le compléter avec de nouveaux icons solides et de type ligne. Sa libraire est relativement réduite (480 icons), mais vous y trouverez peut-être ce que vous cherchez.

Installer le package eva_icons_flutter

Deux options s’offrent à vous pour télécharger le package eva_icons_flutter dans sa dernière version (3.1.0) : 

  1. Utiliser le terminal de commande dans Visual Studio et entrer la commande : $ flutter pub add eva_icons_flutter
  2. Placer la dépendance eva_icons_flutter: ^3.1.0 dans votre dossier pubspec.yaml.

Une fois cela fait, laissez le package se télécharger et ajoutez la ligne import ‘package:eva_icons_flutter/eva_icons_flutter.dart’; en haut de chaque document en .dart où vous souhaitez l’utiliser. 

Utiliser Ionicons

Une fois la librairie d’icons importée, vous allez pouvoir les utiliser dans votre application via la méthode suivante : 

icon : Icon(EvaIcons.nom_de_licon)  

Je vous mets aussi à disposition le lien vers le catalogue complet de Eva Icons.

Font Awesome

Enfin, le package Font Awesome Flutter vous donne accès à pas moins de 30 000 icons, dont plus de 2000 gratuits, dans 9 styles différents et divisés en 58 catégories comme : 

  • Coding ; 
  • Medical + Health ; 
  • Gaming ; 
  • Design ; 
  • Social ; 
  • Food +Beverage, etc.

Installer le package font_awesome_flutter

Deux options s’offrent à vous pour télécharger le package font_awesome_flutter dans sa dernière version (10.7.0) : 

  1. Utiliser le terminal de commande dans Visual Studio et entrer la commande : $ flutter pub add font_awesome_flutter
  2. Placer la dépendance font_awesome_flutter: ^10.7.0 dans votre dossier pubspec.yaml.

Une fois cela fait, laissez le package se télécharger et ajoutez la ligne import ‘package:font_awesome_flutter/font_awesome_flutter.dart’; en haut de chaque document en .dart où vous souhaitez l’utiliser. 

Utiliser Ionicons

Une fois la librairie d’icons importée, vous allez pouvoir les utiliser dans votre application via la méthode suivante : 

icon : Icon(FontAwesomeIcons.nom_de_licon)

Je vous mets aussi à disposition le lien vers le catalogue complet de font awesome, qui est vraiment très fourni.

Avatar de Pierre Courtois