IcoMoon

Qué es IcoMoon

IcoMoon es una plataforma web para crear, gestionar y exportar icon fonts y packs de iconos SVG personalizados. Desarrollada por Keyamoon, ofrece una aplicación gratuita basada en navegador que permite seleccionar iconos de bibliotecas open source, importar SVGs propios y generar fuentes de iconos optimizadas para web. A diferencia de cargar librerías completas como Font Awesome (que incluye miles de iconos innecesarios), IcoMoon permite seleccionar únicamente los iconos que necesitas, reduciendo drásticamente el peso del archivo resultante. La plataforma procesa todo localmente en el navegador del usuario sin subir archivos a servidores externos, lo que la hace adecuada para proyectos con restricciones de privacidad. Es una herramienta de referencia para desarrolladores frontend y diseñadores que optimizan el rendimiento web.

Generación de icon fonts personalizados

El flujo de trabajo principal de IcoMoon consiste en seleccionar iconos de múltiples fuentes (bibliotecas gratuitas incluidas, packs premium comprados, o SVGs propios importados), asignar códigos Unicode y ligaduras a cada icono, y exportar el resultado como font files en formatos OTF, TTF, WOFF y WOFF2 con su CSS correspondiente. El resultado es un archivo de fuente único que contiene exactamente los iconos seleccionados, nada más. Para un sitio que usa 20 iconos, el font file resultante puede pesar menos de 5KB en WOFF2 comparado con los 150KB+ de cargar Font Awesome completo. Cada icono se renderiza como texto, lo que significa que hereda propiedades CSS de color, tamaño y sombra sin necesidad de manipular archivos de imagen individuales.

Editor vectorial y formatos de exportación

IcoMoon incluye un editor vectorial avanzado optimizado para diseño de iconos que permite crear y modificar SVGs directamente en el navegador. Los iconos se diseñan sobre una grid de 16x16 píxeles para garantizar nitidez en tamaños pequeños. Los formatos de exportación incluyen: SVG (individual o sprite), icon fonts (OTF, TTF, WOFF, WOFF2), PNG en múltiples resoluciones (24, 32, 48, 64px), Web Components, componentes para React, Vue y Elm, sprites CSS, favicons (.ico), archivos Photoshop (CSH) y PDF. Esta versatilidad permite usar los mismos iconos consistentemente en web, apps móviles, documentos de diseño y presentaciones sin necesidad de herramientas adicionales de conversión entre formatos.

Bibliotecas de iconos incluidas

IcoMoon ofrece tres niveles de bibliotecas de iconos. El pack gratuito (IcoMoon Free) incluye 490 iconos diseñados en grid de 16x16 con licencia GPL y CC BY 4.0 que permite uso comercial sin atribución. El pack Essential ($39 licencia única) expande a 950 iconos con diseños más variados y categorías adicionales. El Ultimate pack ($59 licencia única) incluye más de 1.600 iconos meticulosamente diseñados cubriendo categorías como navegación, social media, comercio, archivos, dispositivos, flechas, mapas y comunicación. Además, la app integra acceso a bibliotecas open source populares como Font Awesome, Material Icons, Entypo, Typicons y Linearicons, permitiendo mezclar iconos de diferentes fuentes en un único font file optimizado.

IcoMoon para ecommerce y sitios de alto rendimiento

En ecommerce, donde cada kilobyte de peso afecta al Core Web Vitals y la tasa de conversión, IcoMoon permite optimizar los iconos del sitio eliminando dependencias de librerías pesadas. Un sitio Shopify o WooCommerce típico usa 15-30 iconos únicos (carrito, búsqueda, usuario, favoritos, envío, pago, categorías), pero carga librerías completas de 500+ iconos. Con IcoMoon, se seleccionan solo los necesarios y se exportan como un font file de 3-5KB en WOFF2. Los iconos como fuente son escalables sin pérdida de calidad, se colorean con CSS puro y se cachean eficientemente por el navegador. Para tiendas con temas custom, IcoMoon elimina la dependencia de plugins de iconos de WordPress que añaden CSS y JavaScript adicional al frontend.

Colaboración y proyectos compartidos

La versión actualizada de IcoMoon App soporta colaboración en tiempo real donde múltiples usuarios pueden trabajar simultáneamente en el mismo proyecto de iconos. Los proyectos se comparten con permisos de edición o solo lectura, facilitando el flujo de trabajo entre diseñadores que crean los iconos y desarrolladores que los implementan. Los proyectos almacenados en la nube (con cuenta registrada) persisten indefinidamente, mientras que los generados sin cuenta expiran en 24 horas. La funcionalidad de proyectos permite mantener conjuntos de iconos consistentes entre diferentes proyectos web de un equipo o agencia, asegurando que todos los sitios usen las mismas versiones y estilos de iconos sin duplicar trabajo de selección y configuración.

Características Principales

• Icon font generator: crea fuentes personalizadas con selección granular de iconos y asignación de códigos Unicode
• Importación SVG: sube iconos propios en formato SVG para integrarlos en el font file junto con iconos de bibliotecas
• Editor vectorial: herramienta de diseño integrada optimizada para iconos en grid de 16×16 píxeles
• Exportación multi-formato: SVG, fonts (OTF, TTF, WOFF, WOFF2), PNG, sprites, React, Vue, Elm y Web Components
• Bibliotecas integradas: acceso a Font Awesome, Material Icons, Entypo, Typicons, Linearicons y pack propio de 490-1600
• Ligaduras y Unicode: asignación personalizada de ligaduras de texto y códigos Unicode a cada icono del set
• Colaboración en tiempo real: proyectos compartidos con permisos de edición o solo lectura para equipos
• Multicolor icon fonts: soporte para iconos con múltiples colores dentro de un mismo font file

Se integra con 9 herramientas