Get started
How to use Uicons?
There are three ways to include Uicons in your website project: you can insert them through our CDN, you can download them and get the complete icon pack in all available formats (SVG, CSS, font file and HTML example) or you can install them through the npm package manager.
Using Uicons via CDN
Latest version: 2.6.0
CDN is the quickest way to include Uicons on your page. You can copy-paste the link into the HTML <head> section to load our CSS or use @import to insert the code into your CSS.
Select the icon you want to use and click on the copy buttons under the "CDN" section to add the code to your project.
Using Uicons via Download
The Download feature allows you to download the entire icons pack along with the individual SVG for each icon, the CSS stylesheets, the font files, and an HTML sample.
Select the icon you want to use and click on the download button under the "Download" section to get the entire icons pack.
Using Uicons via npm package manager
Install the latest version of Uicons – which includes each individual icon in SVG format, CSS stylesheets and font files – and easily keep your project up to date with the latest icons and enhancements through the npm package manager.
npm i @flaticon/flaticon-uicons
In short, with this method you get the same result as with the downloadable format but in an easier-to-update package.
For more detailed information visit the repository page
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 /webfonts folder contains all of the typeface files that the above CSS references and depends on.
Copy the entire /webfonts folder and the /css/uicons-[your-style].css into your project’s static assets directory (or where ever 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.
i.e: uicons-rounded-outline.css
<head>
<link href="/your-path-to-uicons/css/uicons-[your-style].css" rel="stylesheet"> <!--load all styles -->
</head>
<body>
<i class="fi fi-ro-square-right"></i>
<i class="fi fi-ro-arrow-right"></i>
<i class="fi fi-ro-book"></i>
<i class="fi fi-ro-broom"></i>
</body>
Since you’re managing all of the downloaded files yourself, make sure the references in your pages <head> are accurate with where you’ve moved all of Uicons’ files in your project.
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 the
section 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:
| Weight | Corner | Prefix | Example | Result |
|---|---|---|---|---|
| Regular | Rounded | fi-rr | <i class="fi fi-rr-square-right"></i> |
|
| Bold | Rounded | fi-br | <i class="fi fi-br-square-right"></i> |
|
| Solid | Rounded | fi-sr | <i class="fi fi-sr-square-right"></i> |
|
| Thin | Rounded | fi-tr | <i class="fi fi-tr-square-right"></i> |
|
| Regular | Straight | fi-rs | <i class="fi fi-rs-square-right"></i> |
|
| Bold | Straight | fi-bs | <i class="fi fi-bs-square-right"></i> |
|
| Solid | Straight | fi-ss | <i class="fi fi-ss-square-right"></i> |
|
| Thin | Straight | fi-ts | <i class="fi fi-ts-square-right"></i> |
|
| Type | Prefix | Example | Result |
|---|---|---|---|
| Brands | fi-rr | <i class="fi fi-brands-instagram"></i> |
|
We recommend keeping the /webfonts and /css folders in the same directory. If you don’t, you’ll need to change the path to the web fonts mentioned in each style’s CSS file.
Using the icons
With the references complete, you can now start referencing icons in your templates or pages.
<body>
<i class="fi fi-rr-square-right"></i>
<i class="fi fi-br-arrow-right"></i>
<i class="fi fi-sr-book"></i>
<i class="fi fi-rr-broom"></i>
</body>
License summary
Our license allows you to use the content:
- For commercial and personal projects
- On digital or printed media
- For an unlimited number of times and perpetually
- Anywhere in the world
- To make modifications and derived works
This text is a summary for information only. It does not constitute any contractual obligations. For more information, please read our Terms of Use before using the content
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 resource.
Copy this link and paste it wherever it’s visible, close to where you’re using the resource. If that’s not possible, place it at the footer of your website, blog or newsletter, or in the credits section.
If you have any other questions, please check the FAQ section