How to use UIcons?
Using UIcons via npm package manager
npm i @flaticon/flaticon-uicons
What’s in the download?
Every style package of UIcons contains the following directories and files:
|Files & folders||What they are|
|/css||Stylesheets for Web Fonts|
|/svg||Individual SVG for each icon|
|/webfont||Web Font files used with CSS|
Using Web Fonts with CSS
The /css/uicons-[your-style].css file contains the core styling plus all of the icon styles that you’ll need when using UIcons. The /web fonts folder contains all of the typeface files that the above CSS references and depends on.
Copy the entire /web fonts folder and the /css/uicons-[your-style].css into your project’s static assets directory (or wherever you prefer to keep front end assets or vendor stuff).
Add a reference to the copied /css/uicons-[your-style].css file into the <head> of each template or page that you want to use UIcons on.
Replace uicons-[your-style].css with the name of the style you downloaded.
<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>
Using multiple styles
Do you want to use more than one style? To do so, you have to download every style you want to use in your project.
UIcons allows you to use two different corner styles (rounded and straight) and three different weights (regular, bold and solid) for each of them.
Next you will have to place all the files in the folders as we explained in the previous section, and then add a reference into thesection for every style you downloaded.
<head> <link href="/your-path-to-uicons/css/uicons-rounded-regular.css" rel="stylesheet"> <link href="/your-path-to-uicons/css/uicons-rounded-bold.css" rel="stylesheet"> <link href="/your-path-to-uicons/css/uicons-rounded-solid.css" rel="stylesheet"> </head>
Every style makes use of a different prefix as we can see in the next table:
Using the icons
With the references complete, you can now start referencing icons in your templates or pages.
<body> <i class="fi fi-rr-user"></i> <i class="fi fi-br-arrow-right"></i> <i class="fi fi-sr-book"></i> <i class="fi fi-rr-clean"></i> </body>
How to attribute
Creating quality icons takes a lot of time and effort. We only ask you to add a small attribution link. Choose the medium in which you are going to use the image.
Copy this link and paste it wherever it’s visible, close to where you’re using the image. If that’s not possible, place it at the footer of your website, blog or newsletter, or in the credits section.