Improve your websites with Flaticon Uicons

Improve your web interfaces with Flaticon Uicons. If you’re searching for how to insert Flaticon Uicons with HTML and CSS instead of adding them as a SVG image, then you’re in the right place.  

 This blog will tell you how to implement the HTML and CSS code to add any Uicon from our collection to your web projects.

How to add Uicons libraries to your interface with CSS

First of all, take a look at the Icons library and choose the style that you’ll use on your interface. Click on a Uicon and you’ll see all the information necessary to use it with HTML and CSS in any style within your interface. 

Now, you’ll have to decide how you want to implement the library on your website. There are several options:

  • Using the CDN (Content Delivery Network).
  • Using a package manager.

Downloading the full pack of one of the styles.

Flaticon Uicons

CDN

With the CDN option there are two possibilities: inserting the link in the <head> of the page on which the Uicons will be used or using the @import rule in your stylesheet. You can obtain and copy these links directly from the window of each Uicon on our website.

The link must be used as follows:

<head>
<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css'>
</head>

Flaticon Uicons

@Import rule

With the @import rule, you can import our stylesheet into your own by using the following link:

<head>
@import url('https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css')
</head>

Flaticon Uicons

Package manager

If you’re an experienced developer and you want to install the icons from a package manager, it’s simple with Uicons.

First, you’ll have to use the following command to install all the Uicons libraries through npm:

npm i @flaticon/flaticon-uicons

The package contains the following directories and files:

Route                    Contents

/css                          Stylesheets for Web Fonts

/svg                         Individual SVG for each icon

/webfont                Web Font files used with CSS

Then, you’ll have to import the libraries into your CSS code as follows: 

  1. All icons
@import "~@flaticon/flaticon-uicons/css/all/all";
  1. 2. A single style
@import "~@flaticon/flaticon-uicons/css/{FONTWEIGHT}/{STYLENAME}";

@import "~@flaticon/flaticon-uicons/css/brands/all";

Download

You can also download the full library in the chosen style and add it to your stylesheet. The download includes all the necessary files and links to use the Uicons in that particular style. 

Flaticon Uicons

Insert Uicons as an webfont

After adding the full library in one or all of your chosen styles using the CDN, package manager or download method, you can insert individual Uicons in any part of your interface using classes and the <i> element.

Each Uicon has its associated <i class> name for each style. For example, the bulb Uicon:

  • Regular Rounded <i class=”fi fi-rr-bulb”></i>
  • Bold Rounded <i class=”fi fi-br-bulb”></i>
  • Solid Rounded <i class=”fi fi-sr-bulb”></i>
  • Regular Straight <i class=”fi fi-rs-bulb”></i>
  • Bold Straight <i class=”fi fi-bs-bulb”></i>
  • Solid Straight <i class=”fi fi-ss-bulb”></i>

If you want to use more than one style, you’ll have to insert the link for each one in the stylesheet or in your HTML document, one after the other. 

If you downloaded the full library, you’ll see several files. For example, for the Regular Rounded style, the file /css/uicons-regular-rounded.css contains the style you’ll need when you use Uicons. The /webfonts folder contains all the files on which the above CSS depends and refers to.

Copy the full /webfonts folder and /css/uicons-regular-rounded.css in your project’s static asset directory.

Add a reference to the /css/uicons-regular-rounded.css file, copied in the <head> of each template or page on which you want to use Uicons.

<head>
<link href="https://www.flaticon.com/blog/your-path-to-uicons/css/uicons-regular-rounded.css" rel="stylesheet">
</head>

Then, use the HTML element and the <i class> or <span class> classes to insert the Uicon in your interface as follows:

<head>
 <link href="https://www.flaticon.com/blog/your-path-to-uicons/css/uicons-regular-rounded.css" rel="stylesheet"> <!--load all styles →
</head>

<body>
  <i class="fi fi-rr-user"></i>
  <i class="fi fi-rr-arrow-right"></i>
  <i class="fi fi-rr-book"></i>
  <i class="fi fi-rr-clean"></i>
</body>

If you need more information about how to use Flaticon Uicons with CSS, visit the corresponding page in the knowledge base.

Uicons use license

When using Flaticon Icons, our license allows you to use the contents in the following ways:

  • In commercial and personal projects
  • In digital and printed media
  • On an unlimited and continuous basis
  • Worldwide 
  • Making modifications and derivative works

If you want to know more about the use license for Flaticon Icons, please visit the terms of use page.

We recommend attribution to Flaticon Uicons

Our designers dedicate much time and effort to creating the Uicons library. We would appreciate it if you could add an attribution to your design. 

Simply add the following prefix wherever you are using the Uicons:

Uicons by <a href="https://www.flaticon.com/uicons">Flaticon</a>

Flaticon will be by your side throughout your UI design journey

Don’t forget that besides using the Icons with CSS, you’ll also be able to use them as SVG or PNG images. Flaticon offers you solutions without constraints, whether you’re a UI designer or programmer. 

You’ll even be able to use the Uicons during the initial creation process with Figma. You simply have to download the Flaticon plug-in in the Figma community

Flaticon will be by your side at every turn!