Uicons: +2000 Iconos SVG y fuente de iconos gratis. Iconos increíbles para cualquier proyecto.

Empezar

¿Cómo utilizar Uicons?

Selecciona el estilo y la terminación

Descargar

La descarga incluye iconos en formato SVG, archivo de fuentes y el CSS necesario para usar la fuente de iconos y un ejemplo de HTML.

Regístrate y descarga

CDN

Incluye el archivo CSS en la sección <head> de tu página web o a través de @import en tu CSS.

Regístrate y descarga

¿Qué incluye la descarga?

Cada pack de estilo de Uicons contiene los siguientes directorios y archivos:

Archivos & carpetas	Lo que son
/css	Hojas de estilo para fuentes web
/svg	SVG individual para cada icono
/webfont	Archivos de fuentes web con CSS

Usar fuentes web con CSS

El archivo /css/uicons-[your-style].css contiene el estilo principal más todos los estilos de iconos que necesitarás cuando uses Uicons. La carpeta /webfonts contiene todos los archivos que el CSS de arriba depende y hace referencia.

Copia la carpeta /webfonts completa y /css/uicons- [your-style] .css en el directorio de activos estáticos de tu proyecto (o donde prefieras tener los activos de front-end o las cosas del proveedor).

Agrega una referencia al archivo /css/uicons-[your-style].css copiado en el <head> de cada plantilla o página en la que quieras usar Uicons.

Reemplaza uicons-[your-style].css con el nombre del estilo que se ha descargado.

Por ejemplo: uicons-ounded-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>

Dado que estás administrando todos los archivos descargados, asegúrate de que las referencias en tus páginas <head> sean precisas con respecto al lugar donde has movido todos los archivos de Uicons en tu proyecto.

Usar diferentes estilos

¿Quieres usar más de un estilo? Para hacerlo, debes descargar todos los estilos que desees utilizar en tu proyecto.

Uicons te permite usar dos estilos de terminaciones diferentes (redondeadas y rectas) y tres pesos diferentes (normal, negrita y sólido) para cada uno de ellos.

A continuación, tendrás que colocar todos los archivos en las carpetas como explicamos en la sección anterior y luego agregar una referencia en la sección para cada estilo que has descargado.


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

Cada estilo hace uso de un prefijo diferente como podemos ver en la siguiente tabla:

Peso	Terminación	Prefijo	Ejemplo
Regular	Rounded	fi-rr	<i class="fi fi-rr-user"></i>
Bold	Rounded	fi-br	<i class="fi fi-br-user"></i>
Solid	Rounded	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>

Recomendamos mantener las carpetas /webfonts y /css en el mismo directorio. Si no es así, deberás cambiar la ruta a las fuentes web mencionadas en el archivo CSS de cada estilo.

Usar los iconos

Con las referencias completas, ya puedes comenzar a hacer referencia a los iconos en tus plantillas o páginas.


                    <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

Este texto es un resumen y no tiene validez contractual. Para más información, consulta nuestros Términos de Uso antes de usar el contenido.

Cómo atribuir

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.

Copia este enlace y pégalo donde esté

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

Si tienes cualquier otra pregunta, visita la sección de las FAQ