Icons
Icons are small visual symbols designed to help quickly identify actions or categories.
Icons serve as the visual language of UX design, acting as intuitive shortcuts that help users quickly identify actions, navigate interfaces, and understand categories without relying on extensive text.
By leveraging familiar symbols and streamlined visuals, they enhance usability, reduce cognitive load, and create a more seamless and engaging user experience.
Icons in Flutter
To integrate custom icons into Flutter, they need to be imported as a font file (.ttf). To achieve this, tools such as FlutterIcon can be used.
We need to upload every icon in .svg format. The tool will then process them, and we must check they are named and rendered correctly, and make adjustments if needed.
Once everything is set, we can download them in .zip
Zip will contain 3 files. config.json we can usually ignore. The .ttf file should be placed inside our custom fonts folder in Flutter project. The .dart file should be placed in the theme folder.
Latest custom Flutter-ready Icons
DOs & DONTs
Do
Always use vector format to preserve quality and details.
Don't
Never squash, stretch or deform Icons in any way. Scale them proportionally as needed.
Do
Use designated colors for Icons. That way we make sure they adjust to the theme used.
Don't
Avoid using primitive colors in Icons, except for specific reserved cases.
Assets
Icons in SVG
Flags in SVG
Payment methods in SVG
Last updated