UIcons

Get started

Descargar

Select the font weight that better suits your project (Regular, Bold or Solid) then select the corner style (Rounded or Straight) and finally download the zip file and start styling with CSS.

Customize the style of the icons and Download the pack:

Preview

In this moment Uicons is only available by downloading the files. Do you need another method as CDN, npm install, etc.? Tell us using this form.

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-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>

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
Regular	Redondeado	fi-rr	<i class="fi fi-rr-user"></i>
Bold	Redondeado	fi-br	<i class="fi fi-br-user"></i>
Solid	Redondeado	fi-sr	<i class="fi fi-sr-user"></i>
Regular	Straight	fi-rs	<i class="fi fi-rs-user"></i>
Bold	Straight	fi-bs	<i class="fi fi-bs-user"></i>
Solid	Straight	fi-ss	<i class="fi fi-ss-user"></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-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>

Resumen de Licencia

Nuestra licencia permite usar los contenidos:

En proyectos comerciales y personales
En medios digitales e impresos
De manera ilimitada y perpetua
En todo el mundo
Haciendo modificaciones y trabajos derivados

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

Crear iconos de calidad conlleva tiempo y esfuerzo. Por eso, solamente pedimos que se añada una pequeña línea de atribución. Selecciona la plataforma donde usarás el recurso.

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.

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

If you have any other questions, please check the FAQ section