Page cover

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 FlutterIconarrow-up-right 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

circle-info

Last updated on 07.12.2024

file-archive
63KB

DOs & DONTs

Cover

Do

Always use vector format to preserve quality and details.

Cover

Don't

Never squash, stretch or deform Icons in any way. Scale them proportionally as needed.

Cover

Do

Use designated colors for Icons. That way we make sure they adjust to the theme used.

Cover

Don't

Avoid using primitive colors in Icons, except for specific reserved cases.

Assets

Icons in SVG

circle-info

Last updated on 07.12.2024

file-archive
198KB
archive

Flags in SVG

circle-info

Last updated on 07.12.2024

file-archive
129KB
archive

Payment methods in SVG

circle-info

Last updated on 07.12.2024

file-archive
164KB

Last updated