Actualización de iconos en Divi: qué cambia

¡Hola Divi Lovers! Traemos en primicia nuestros comentarios de la nueva actualización de Divi: La nueva actualización de ICONOS en Divi (finalmente 😱) ¡Atención a las novedades!

Esta actualización llegó después de mucho tiempo en el que los usuarios de Divi pedían más opciones visuales. Antes de ella, Divi contaba con alrededor de 350 iconos nativos con un diseño propio muy reconocible: funcionales, consistentes entre sí, y perfectamente integrados al builder. Para la mayoría de proyectos eso era suficiente, pero había un problema frecuente: cuando un cliente pedía un ícono muy específico —un símbolo de industria, un concepto abstracto, un ícono técnico de nicho— la librería nativa simplemente no lo tenía. La solución habitual era salir del builder, buscar el SVG por afuera, subirlo como imagen y perder toda la flexibilidad de configuración de Divi.

La integración de Font Awesome resuelve ese problema de golpe. Con más de 1,500 iconos adicionales disponibles directamente desde el selector del builder, la probabilidad de no encontrar lo que necesitas cae de manera dramática. Y lo mejor es que Elegant Themes lo implementó de forma inteligente: el CSS de Font Awesome solo se carga en las páginas donde realmente usas un ícono de esa familia, gracias al sistema de CSS dinámico de Divi. Así que el impacto en performance es prácticamente nulo si no lo usas, y mínimo si lo usas con criterio.

En palabras de Elegant Themes:

Hoy estamos expandiendo las opciones de íconos de Divi, brindándote cientos de íconos nuevos para elegir, así como mejorando el selector de íconos del constructor para que sea más fácil encontrar los íconos que estás buscando. También agregamos un nuevo módulo de íconos y agregamos nuevas opciones de íconos a varios módulos existentes, lo que te brinda un control total sobre los íconos utilizados en todo tu sitio web hecho con Divi.

Nick Roach de ET.

Elija entre cientos de iconos nuevos

Al elegir un ícono en Divi, notarás que se han agregado cientos de íconos nuevos a la lista. Eso es porque ET ha integrado el conjunto de iconos Font Awesome junto con los iconos nativos de Divi. Puedes filtrar entre iconos de Divi e iconos de Font Awesome. El archivo de icono de Font Awesome solo se cargará si usa un icono de Font Awesome, por lo que esta actualización no afectará el rendimiento de tu sitio web cuando se actualice. Gracias al sistema CSS dinámico de Divi, Divi solo carga el CSS necesario en función de los módulos y las funciones del módulo que estas utilizando.

El nuevo y mejorado selector de iconos

La actualización también viene con una interfaz mejorada para navegar por los íconos.

• Búsqueda de iconos: el selector de iconos ahora incluye un campo de búsqueda. Todos los íconos Divi y Font Awesome vienen etiquetados con términos relacionados que puedes buscar en la lista para encontrar rápidamente los tipos de íconos que estás buscando.
• Filtros de iconos: el selector de iconos también se puede filtrar por diferentes estilos de iconos y familias de fuentes. Puedes combinar la búsqueda y el filtrado para centrarte realmente en el tipo de ícono que quieras.
• Selector de íconos Modal: al hacer clic en el ícono de expansión junto al selector de íconos, el selector de íconos se mostrará en pantalla completa. Ahora puedes ver más iconos a la vez cuando te desplazas por la lista de íconos.

Font Awesome vs iconos nativos de Divi: cuándo usar cada uno

Ahora que tienes las dos familias disponibles desde el mismo selector, vale la pena entender cuándo conviene usar una u otra. No es solo una cuestión estética: hay diferencias prácticas en cuanto a performance, consistencia visual y flexibilidad de estilo.

Los iconos nativos de Divi son la opción más eficiente. El CSS de esa librería ya viene incluido en la hoja de estilos principal del tema, así que no hay carga adicional al usarlos. Además, fueron diseñados para integrarse a la perfección con el sistema de diseño de Divi: mismas proporciones, mismo grosor de trazo, misma sensación visual. Si tu proyecto necesita consistencia y performance como prioridades, los iconos nativos son el camino.

Font Awesome entra en escena cuando necesitas variedad. Más de 1,500 iconos significa que puedes encontrar prácticamente cualquier símbolo: industrias específicas (salud, educación, finanzas), objetos concretos, conceptos abstractos, acciones técnicas. También ofrece variantes de estilo dentro de la misma familia: iconos de línea (outline), iconos sólidos (filled) y en algunos casos duotono. Eso te da más control sobre el peso visual del ícono en la composición. El costo es que Divi debe cargar el archivo CSS de Font Awesome en esa página, lo que agrega una solicitud HTTP y algunos kilobytes adicionales.

Mi recomendación en la práctica: empieza siempre buscando el ícono en la librería nativa de Divi. Si lo encuentras y encaja con el diseño, úsalo. Si no encuentras el equivalente o el diseño pide un estilo más específico, entonces recurre a Font Awesome. Lo que debes evitar es mezclar iconos de ambas familias en la misma sección o módulo sin criterio visual, porque las diferencias de trazo y proporción pueden volverse evidentes.

Consejo: el nuevo campo de búsqueda del selector es mucho más potente de lo que parece. No busca solo por nombre exacto del ícono, sino por etiquetas asociadas. Prueba buscar "arrow" y verás todas las flechas disponibles en ambas familias al mismo tiempo. Busca "check" y aparecen todos los íconos de confirmación, marca y validación. Explorar por conceptos en lugar de por nombre específico te ayuda a encontrar opciones que no sabías que existían.

El nuevo módulo de iconos Divi

Ahora veremos un nuevo módulo de iconos dentro del conjunto de módulos de Divi. Esto te permitirá usar los íconos en Divi de forma independiente a través de ese nuevo módulo que viene con todas las configuraciones de diseño que ya conocemos, lo que significa que es totalmente personalizable.

Casos de uso prácticos del módulo de íconos de Divi

El módulo de íconos independiente abre posibilidades de diseño que antes requerían workarounds. Antes de esta actualización, si querías usar un ícono sin texto tenías que recurrir al módulo Blurb con el texto vacío o al módulo de imagen con un PNG. Ahora tienes un módulo dedicado con control total. Estos son tres casos de uso donde lo encuentro especialmente valioso:

Listas de beneficios con iconos personalizados. En lugar de usar los bullets predeterminados de HTML o de WordPress, puedes armar una lista de beneficios visualmente más rica: cada ítem como una columna de Divi con el módulo de ícono arriba y un párrafo debajo. Funciona perfecto para secciones de "¿Por qué elegirnos?" o de características de un producto. El resultado es mucho más impactante que una lista de puntos, y no necesitas imágenes externas.

Tarjetas de características con ícono + título + descripción. El módulo Blurb ya hacía esto, pero el nuevo módulo de ícono te da más control cuando necesitas separar el ícono del texto para posicionarlos de manera independiente en el layout. Por ejemplo, puedes colocar el ícono centrado en la parte superior de una tarjeta con fondo de color, el título debajo, y la descripción con otro tamaño de fuente. Con Blurb esos ajustes de posición son más limitados; con el módulo de ícono independiente los manejas libremente en el contexto de una fila y columna.

Íconos de contacto en el footer. Teléfono, correo electrónico, ubicación: estos tres íconos aparecen en casi todos los footers del mundo y antes requerían o imágenes PNG (pesadas, no escalables) o SVG subidos manualmente. Con el módulo de ícono de Divi los tienes nativos, escalables, con color editable desde el builder y sin cargar imágenes adicionales. Coloca el módulo de ícono a la izquierda de una fila de dos columnas, el texto de contacto a la derecha, y listo: un footer limpio y eficiente.

36 nuevas redes sociales en el módulo de social media

Esta actualización de íconos viene con novedades para las redes sociales, lo que significa que también actualizaron el Módulo de seguir en redes sociales y agregaron 36 necesarias nuevas redes sociales a éste módulo, como TikTok o Whatsapp.

¿Qué pasó con los iconos personalizados SVG?

Una pregunta que surge naturalmente después de una actualización de esta magnitud es si los SVG propios siguen siendo necesarios. La respuesta corta es sí, y por razones muy concretas.

Los iconos de Divi y Font Awesome son fuentes de íconos (icon fonts): archivos de fuente especiales donde cada carácter es un símbolo en lugar de una letra. Son excelentes para íconos genéricos, universales, que no tienen carga de marca. Pero si tu proyecto o tu cliente tiene íconos muy específicos de su identidad visual —el logo de la empresa en versión simplificada, símbolos propios de su industria que no existen en ninguna librería pública, o ilustraciones de ícono encargadas a un diseñador— los SVG siguen siendo la mejor opción. Un SVG es un archivo vectorial con detalle arbitrario, curvas complejas y colores múltiples que ninguna fuente de íconos puede replicar.

La ventaja de los SVG también aparece cuando necesitas íconos animados o íconos con gradientes y múltiples colores en la misma figura. Las fuentes de íconos son monocromáticas por naturaleza: puedes cambiar el color del ícono completo, pero no colorear diferentes partes de él de manera independiente. Para eso, SVG.

Si quieres explorar cómo agregar SVG propios a WordPress para usarlos en Divi, puedes revisar cómo añadir imágenes SVG a WordPress: el proceso requiere un par de ajustes de seguridad en WordPress pero es completamente manejable.

Consejo: una estrategia que funciona muy bien es usar iconos nativos de Divi o Font Awesome para los elementos de UI genéricos (flechas, checks, estrellas, social media) y reservar los SVG para los íconos de marca o para ilustraciones específicas del proyecto. Así mantienes el mejor performance posible en la mayoría de los módulos, y solo usas SVG donde realmente no hay alternativa.

Conclusión

Esta actualización de íconos fue una de las más esperadas por la comunidad de Divi, y Elegant Themes la entregó bien. La integración de Font Awesome amplía las opciones de manera significativa sin sacrificar performance, el nuevo selector con búsqueda y filtros hace que encontrar el ícono correcto tome segundos en lugar de minutos, y el módulo de ícono independiente abre posibilidades de diseño que antes no existían de manera nativa.

Lo que más valoro de cómo se implementó es la coherencia: no se rompió nada existente. Los íconos nativos de Divi siguen ahí, con el mismo comportamiento de siempre. Font Awesome se agrega como una capa adicional, no como un reemplazo. Y los SVG propios tampoco desaparecen como opción. Es una actualización que suma sin restar, que es exactamente lo que esperamos de herramientas maduras como Divi.

Si todavía no has explorado el nuevo selector en tu instalación, te recomiendo abrirlo con calma y buscar por conceptos de tu industria. Es muy probable que encuentres íconos que no sabías que necesitabas.

🎓 ¿Quieres dominar Divi desde adentro? En UXDivi tenemos cursos donde cubrimos el builder de Divi en profundidad: desde los módulos y el sistema de diseño hasta el Theme Builder y las integraciones avanzadas. Si esta actualización de íconos te genera ganas de explorar más lo que Divi puede hacer, ese es el mejor siguiente paso.