Discover UIcons, Freepik’s New User Interface Icons
If you are a programmer or a designer, you’ve probably worked with UI Icons (User Interface Icons). They are vital tools for any website. Here in Flaticon we always want to make your job easier, that’s why we developed UIcons. UI Icons specially created for programmers and optimized for web use.
With UIcons you’ll help users to interact and scroll through your websites in an intuitive and fast way. This will improve the user’s experience and also will give your website an incredible look.
UIcons Features
These icons aren’t only beautiful but are also useful. Really useful.
Mobile-optimized: If your projects contemplate responsive design, UIcons are key parts. Even on small scales, they are easily activated, and also, there’s no risk of them being deformed.
Time: Our UIcons have some of the best and more recognized designs. This makes them easier for users to understand and will save you time when creating projects.
Aesthetic Harmony: UIcons help synthesize concepts and guide users through our websites or apps. Also, they add aesthetic value and personality.
Can you imagine a web that’s only text?
Webfonts
When you use UIcons as webfonts you make sure that your website is lighter. That is a great practice mainly because you reduce loading time.
At the moment of designing your website, icons can contribute a lot to the user experience.
The following icon pack will give you all you need for your projects.
You can apply them with the CDN. Just add it in the CSS file, in the <head> section of your site, or with an @import in your CSS, copying the links you can find here after logging in to Flaticon. Or, you can get them by downloading the pack.
Once you’ve done it, copy the /webfonts folder and /css/uicons- [your-style] .css in your project’s static actives directory (or wherever you prefer having your front-end actives)
Add a referencer to the /css/uicons-[your-style].css/css/uicons-[your-style].css file from the <head> of each page where you want to use UIcons.
Replace uicons-[your-style].css with the style’s name you have downloaded.
It should look like this:
<head>
<link href=”/your-path-to-uicons/css/uicons-[your-style].css” rel=”stylesheet”>
<!–load all styles –>
</head>
<body>
<i class=”fi fi-ro-user”></i>
<i class=”fi fi-ro-arrow-right”></i>
<i class=”fi fi-ro-book”></i>
<i class=”fi fi-ro-clean”></i>
</body>
Add Some Style
First, you have to download every style you want to use in your project.
UIcons allow you to use two different corner styles (rounded and straight) and three different weights (regular, bold, and solid) for each of them.
This is just a little taste of all the styles you can choose from.
So Why Should You Use UIcons?
On the one hand, their license lets you use them for commercial and personal projects, on digital and print media, anywhere in the world. You get great icons that can be modified and adapted easily.
Also, you can use them in three different ways. As an SVG, as CSS, or as Webfonts. Three options to work the way you want.
Discover Flaticon’s UIcons, a vital tool for your websites and apps.
