Icons

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

Changelog

Design