New Super Cool Icons Font from FlatIcon | Make Your Design Better

Screenshot 2021-01-26 221853

Icons by Flaticons

Flaticon.com has released new icons set on their site which you can download easily by visiting their site. The package includes a lot of icons which are really awesome and super cool and you can easily use them by attributing flaticon.com in your app.
The set has three types of icons :

  1. Regular
  2. Bold
  3. Solid

How to use

1- By Download Source Icons
You can use these icons easily by downloading the zip file that you will get access to after you have created an account. And then converting the .svg icon files into png by using any software like Adobe XD or Adobe Illustrator etc. Then you can import those icons as assets and use with images or buttons or the way you like.

2- By Using Icon Font
The above mentioned method is quite lengthy and is not recommended (by me) as the png icons will not fit in all devices and will become blurry if you scale them up or down. So I came up with another solution for you guys and made a .ttf format icons font. You can download the fonts from links given below.


Using Icons.ttf Font

To use the icons in your project, first download the icons font from links given below and then import them into your project as assets.
Then you need to download the helper files from link below and open them. You will get this type of interface :


Now head over to Kodular and drag and drop the labels or button that you want to use to show your icons.
Here I have added two labels and two buttons to show icons and some spacing to separate them.

Screenshot 2021-01-26 224509


Now open up advance properties of both label and button and change the font typeface to the imported font.

Screenshot 2021-01-26 224703


Screenshot 2021-01-26 224744


Download the helper files from below and open them.


In this site you can see all the codes for icons. Just copy the code of icon that you want to use and then paste it in the text field of labels or buttons like shown below.
Screenshot 2021-01-26 225854


And you have your nice and clean icons.


Downloads

Helper HTML Files : Google Drive
Fonts : Google Drive
AIA File : Icons.aia (86.1 KB)

Flaticon

To download lots of amazing icons and details about attribution, visit the link below.

Why to use icons font instead of images ??

So the first reason that I would like to give is that by using icons font , you can decrease your app size and you will still have access to all the available icons. The next reason is that you won’t have to convert svg files into PNG and therefore you will save a lot of time and effort and moreover you don’t need to worry if you don’t have access to vector editing software. And the last reason is that icons created using icons font can easily be scaled up or down and the will still be pixel perfect whereas if you use PNG images, they will lose quality if scaled up or down and may not look good on all devices.
So I recommend using icons font but however you can use any available method as per your desire.

Hope you like it

As always I would like to thank you for your time and hope that you find it useful. I would love to see you thoughts about it. Enjoy

Support

You can support me by subscribing to my YouTube channel here : QuickTips
You can also join the Facebook group here : Facebook

15 Likes

Any convincing point as to why use FlatIcon over Material Icons?
Material Icons are already present on kodular, they provide a wide range of icons that are neat and can be scaled up and down without getting pixelated

1 Like

Use the one that satisfies your needs. I am not trying to convince anyone. Most users use icons other than material because they like them more than material icons. All depends upon your decision. I just shared it because it might be helpful to someone.

5 Likes

Extra resources are tasty :yum:

4 Likes

thanks for the guide
:star_struck:
i guess u used flaticon from my guide?

I din’t use that. These icons are provided by flaticon but they only privide svg files and some woff fonts. As woff cant be used in android therefore i converted the woff font to ttf font to use in android.
But I will surely check your guide too and I have some beautiful ui icons font which I will be sharing soon.

great guide broh :innocent:

thanks for the guide
:star_struck:
i guess u used flaticon from my guide?

we can’t use these icons on dynamic extension? I tried but it doesn’t work
sorry.i got the answer
Custom fonts are not supported by dynamic labels. You can achieve with dynamic components by @yusufcihan