Willi Maese

CEO y diseñador

Iconos – Encuentra, gestiona y usa iconos en tus diseños sin perder la cabeza

Willi Maese

CEO y diseñador

Temas: Diseño

el 4 diciembre 2019

Resumen:

El tiempo que he perdido buscando iconos es inconmensurable. Lo peor de todo es que he perdido tiempo buscando el mismo icono una y otra vez, lo que me hacía sentir bastante tonto. Pero ya no más. Este es mi método para vivir en paz con los iconos.

Herramientas y utilidades que uso:

Nucleo app - La app imprescindible para gestionar todos tus iconos. Gratis.
Font Awesome - La colección de iconos más popular de Internet. Gratis.
FlatIcon - Biblioteca de miles de iconos gratis. Freemium

Instálate Nucleo, la app para gestionar todos tus iconos.

Nucleo es una app sencilla pero que es una pasada, cumple su función (casi) a la perfección. Sirve para tener todos tus iconos– tanto los que has diseñado tú como los que te descargas– en un solo sitio, bien organizados, bien accesibles. La app es gratis y opcionalmente te ofrecen una colección de iconos de buena calidad por 99 $. Cuando necesitas un icono abres la app, usas el buscador, seleccionas el icono y lo arrastras a la aplicación que uses para diseñar. Así de fácil. Descárgatela ya.

Descárgate todos los iconos de Font Awesome y añádelos a Nucleo

Los iconos de Font Awesome son muy prácticos porque se ven bien en tamaños muy reducidos y hay iconos para todo. Es cierto que como es una librería tan popular se ven por todas partes, pero es que hay pocas colecciones de esta envergadura, de calidad y gratis. Descárgate la librería entera y arrastra las carpetas que están dentro de /svg/ directamente a Nucleo. Te quedará así:

A partir de ahora, todos los iconos que diseñes o te descargues los añades a Nucleo

Si vas añadiendo los iconos a Nucleo a medida que entran en tu vida te aseguro que nunca más vas a perder tiempo buscando un icono que ya tienes. Mantén Nucleo organizado haciendo uso de las funciones que ofrece (proyectos, sets, favoritos) y con el tiempo tendrás una buena biblioteca de iconos para suplir todas tus necesidades. 

Piénsatelo dos veces antes de ponerte a diseñar tus propios iconos

Diseñar iconos lleva mucho tiempo porque no es fácil. Uno de las mayores dificultades que me he encontrado yo es que al integrarlos en una web se daban patadas los unos a los otros. Para que esto no pase todos tiene que tener el mismo estilo y muy importante: si usas iconos de contorno (outline) todos tienen que estar dibujados con trazos de exactamente el mismo grueso. Ah, y todos tiene que tener el mismo nivel de detalle. Y todos tiene que tener unas proporciones lo más parecidas posible. Y… en fin, que es un percal. Si te apetece hacerlo es genial, ¡pero que sepas que te va a llevar muchas horas!

Para integrar iconos en la web usa la exportación de Nucleo a Icon Font

Crea un proyecto en Nucleo, añade allí todos los iconos que vayas a usar en tu web y haz click en exportar. Exporta a Icon Font y verás que entre los archivos que se exportan hay una demo para que veas cómo lo tienes que integrar. El sistema es muy parecido a como funciona Font Awesome o cualquier otra icon font. Aquí tienes un artículo que te explica cómo hacerlo.