Iconify: biblioteca de íconos de código abierto

• Plataforma unificada de íconos donde se pueden explorar y usar diversos conjuntos de íconos de código abierto en un solo lugar
• Ofrece 204 conjuntos clasificados en varias categorías, con cerca de 280 mil íconos
• A través de su API permite obtener información de los íconos y generar SVG/CSS. También ofrece una API de búsqueda que puede usarse en plugins para Figma/Sketch
• Cada conjunto se distribuye bajo distintas licencias abiertas como Apache 2.0, MIT, CC BY, GPL, entre otras
• Incluye íconos de los principales sistemas de diseño como Google Material, Fluent UI, Font Awesome, Tabler y HeroIcons

---

Resumen de Iconify

• Iconify es un repositorio central de conjuntos de íconos de código abierto, con una interfaz web para explorar distintos íconos
• Cada conjunto incluye nombre, tipo de licencia, cantidad de íconos y enlaces individuales
• Los usuarios pueden filtrar por categoría para elegir conjuntos de Material, UI, Emoji, Logos, Programming, etc.

Principales categorías de íconos

• Familia Material: 6 conjuntos, incluidos Material Symbols y Material Design Icons, con hasta más de 15,000 íconos
• Conjuntos UI de 24px: más de 50 conjuntos como Solar, Tabler, Remix, Lucide e Iconoir, con estilos y tamaños variados
• Conjuntos UI de 16px / 32px: incluye 18 conjuntos como Carbon, IonIcons, Ant Design Icons y Bootstrap Icons
• UI Other / Mixed Grid: incluye varios conjuntos grandes como Fluent UI System Icons (18,959) y Phosphor (9,072)
• Conjuntos UI multicolor: ofrece íconos coloridos como Streamline, Fluent Color e IconPark
• Conjuntos Programming: 9 conjuntos enfocados en entornos de desarrollo, como VSCode Icons, Devicon y File Icons
• Conjuntos Logos: 15 conjuntos centrados en marcas y logotipos, como Simple Icons, SVG Logos y Web3 Icons
• Conjuntos Emoji: 11 conjuntos, incluidos OpenMoji, Twemoji y Noto Emoji
• Conjuntos Flags / Maps: incluye 7 conjuntos como Circle Flags y Flag Icons
• Conjuntos temáticos: 8 conjuntos por tema, como Game Icons, Health Icons y Weather Icons
• Conjuntos Archive / Unmaintained: conserva 30 conjuntos de versiones anteriores, como Font Awesome 4~6 y Eva Icons

Diversidad de licencias

• Cada conjunto se distribuye bajo distintas licencias abiertas como Apache 2.0, MIT, CC BY, GPL y OFL (Open Font License)
• Algunos conjuntos pueden usarse libremente bajo CC0 (dominio público) o Unlicense
• La información de licencia está claramente indicada, por lo que es fácil verificar si se permite el uso comercial y la modificación

Ejemplos de conjuntos representativos

• Fluent UI System Icons: licencia MIT, 18,959 íconos
• Material Symbols Light: Apache 2.0, 15,180 íconos
• Tabler Icons: MIT, 5,986 íconos
• Simple Icons: CC0, 3,379 logotipos de marcas
• OpenMoji: CC BY-SA 4.0, 4,449 emojis

Valor práctico

• Permite asegurar acceso consistente a íconos en distintos sistemas de diseño y frameworks
• Desarrolladores y diseñadores pueden elegir de inmediato el estilo y la licencia que mejor se adapten a su proyecto
• Es una plataforma de recursos que impulsa la reutilización y estandarización de íconos en todo el ecosistema open source
• Consulta la documentación oficial para ver formas de uso e información sobre la API y los plugins

[GN⁺]

Opiniones de Hacker News

• Iconify permite obtener directamente los SVG de los íconos a través de una API
  Yo suelo crear diagramas de arquitectura con D2, y al usar la enorme biblioteca de íconos de Iconify junto con eso, el resultado visual se vuelve mucho más rico
  Por ejemplo, en un diagrama que conecta Docker y Kubernetes, se puede asignar el ícono SVG de cada uno

• Algunos SVG tienen animación y también se pueden buscar
  Yo usé estos íconos en el editor de texto offline wrifocus.bounded.cc, y quedé muy satisfecho con el resultado

  • Me da curiosidad saber qué conjunto de íconos usaste. Si filtro por “contains animations”, solo me aparecen loaders y el set de íconos del clima
  • La animación del engrane girando en el ícono de configuración está especialmente buena. El editor en sí también es impresionante
    Me pregunto si también se puede usar en línea guardando los datos en un servidor, y por qué decidiste hacerlo basado en navegador pero offline
  • Gracias por compartirlo. También me gustaría saber si el proyecto puede ejecutarse como self-hosted

• icones.js.org es un buen sitio para buscar este tipo de íconos

• Me dan ganas de escribir un artículo sobre el tema de la optimización de íconos
  Me desespera ver sitios web que no insertan los íconos inline y hacen que el layout salte

  • De acuerdo. Los íconos inline son una buena solución, pero pueden aumentar el tamaño del DOM
    Dependiendo de la complejidad del ícono o de cuánto se repita, a veces el lazy loading puede ser mejor
    En el fondo, el problema ocurre porque no se reserva bien el espacio
  • Especificar los atributos width/height también es una buena solución. A veces también se recomienda aspect-ratio
    Eso sí, los íconos inline dejan de ser cacheables
    Referencia relacionada: artículo de web.dev sobre optimización de CLS

• Enlace a la discusión anterior: debate de septiembre de 2024

• Muchísimos elogios para este proyecto. Lo uso todos los días en casi todo lo que hago
  Me sorprendió ver que para el proyecto k3s existen versiones en color y en escala de grises de devicon

• Pictogrammers tiene algunas ventajas
  Para los íconos de Material, te da directamente el código de Home Assistant, así que con un clic obtienes el código que necesitas

• Como otra gran fuente de íconos, recomiendo The Noun Project
  Hay una mezcla de íconos gratuitos, CC-BY-3.0 y con licencia de pago

  • Eso sí, si no pagas, es molesto tener que quitar manualmente el código innecesario del SVG

• Varias respuestas a la pregunta de cuál es la mejor biblioteca de íconos

  • Personalmente, creo que el punto máximo fue el set de íconos famfamfam Silk alrededor de 2005
    Era una lástima que no tuviera versiones en alta resolución o en SVG, aunque hoy en día quizá se podría complementar con IA
    Ver / Descargar
  • Recomiendo Lucide
  • Me gustan Phosphor Icons. Fuera de eso, básicamente uso Material UI Icons
  • Yo uso mucho FlatIcon sobre todo para desarrollo de juegos
  • SVGRepo es amigable para el usuario porque permite ajustar directamente el grosor del trazo, el color, etc.

• Mi sitio universymbols.com puede expandir varios sets de íconos de Iconify con modelos de imágenes de IA
  Así, además de los grandes sets existentes, se pueden crear sets de íconos más originales