Los plugins de iconos y librerías solo compensan cuando cargas los símbolos necesarios: para pocos iconos, usa los recursos del tema o SVG optimizados; para colecciones amplias, elige carga selectiva.
Usa primero los iconos que ya carga tu tema
Antes de instalar nada, revisa los iconos incluidos en tu tema, Gutenberg o tu constructor visual.
Comprueba Gutenberg, tema y Elementor
Los bloques de Gutenberg , muchos temas y constructores como Elementor ya incluyen iconos para listas, botones y cajas informativas. En Elementor, revisa Icon Library dentro del widget antes de añadir otra extensión que cargue una segunda familia.
Elige SVG cuando son pocos iconos
Además de Fontello, conviene distinguir qué aporta cada biblioteca de iconos antes de instalarla. Dashicons ya forma parte del área de administración de WordPress y puede resultar útil en interfaces internas, aunque no es una colección pensada para el diseño visual moderno del frontal. IcoMoon permite seleccionar iconos, convertir SVG propios en una fuente o generar un sprite, por lo que encaja cuando una marca necesita símbolos personalizados y reutilizables.
Font Awesome y Material Icons ofrecen catálogos extensos, pero deben descargarse como subconjunto o alojarse localmente si solo se emplean unos pocos símbolos. La elección no depende solo del estilo: también debe evitar duplicar la biblioteca de iconos que ya carga el tema o el constructor.
✉
¿Quieres más información? Escríbenos y te orientamos
Mide peso, peticiones y recursos no usados
Una biblioteca mal cargada puede añadir peso, solicitudes HTTP y fuentes web que no aparecen en ninguna página.
SVG inline y sprite: menos viajes
Un SVG inline se inserta dentro del HTML y no requiere una petición extra; un sprite SVG reúne varios dibujos en un archivo único. Antes de subirlos, elimina metadatos, capas ocultas y tamaños fijos mediante una exportación optimizada de Figma.
Fuentes iconográficas y CDN externos
Lighthouse permite revisar cuatro señales muy concretas: peso transferido, solicitudes HTTP, CSS no utilizado y fuentes web cargadas. Guarda una captura antes de añadir el plugin y compárala después con la misma página y la caché vaciada.
En sitios desarrollados con un proceso de compilación, el tree shaking complementa al subconjunto de iconos: el empaquetador puede excluir módulos que no se importan en el código final. Por ejemplo, importar únicamente los componentes faSearch y faArrowRight suele ser más ligero que cargar el paquete completo de Font Awesome. Sin embargo, no todos los plugins de WordPress aplican tree shaking, especialmente si insertan una hoja CSS general o una fuente con miles de glifos.
Revisa el archivo generado en la pestaña Network de DevTools y compara su tamaño con un sprite SVG o con iconos SVG locales. La optimización de iconos debe medirse en la página publicada, no asumirse por el nombre del plugin.
Para 1 a 10 iconos, usa SVG locales o iconos nativos; para iconos repetidos, crea un sprite; y para una colección amplia, carga solo un subconjunto.
Opción Uso recomendado Peticiones extra Riesgo de recursos no usados Privacidad SVG inline Entre 1 y 10 iconos propios 0 Bajo Local Sprite SVG Iconos repetidos 1 Bajo Local Fuente con subconjunto Muchos iconos de una misma familia Entre 1 y 2 Medio Local si la alojas tú CDN de biblioteca Solo si ya es imprescindible Entre 1 y 3 Alto Depende de un tercero
Crea un subconjunto con Fontello
Fontello permite seleccionar solo los iconos necesarios y descargar una fuente personalizada. Es útil si necesitas entre 15 y 40 símbolos y tu diseño ya trabaja con una fuente iconográfica.
Mantén una sola biblioteca visual
⭐
Selección para ti
Una tableta gráfica puede ayudar a retocar iconos SVG y revisar detalles de trazo antes de exportarlos desde Figma. Tiene sentido si diseñas elementos propios con frecuencia, no para instalar un icono en un botón.
Permite ajustar curvas y grosores de iconos personalizados con mayor precisión
Facilita crear variantes para pantallas móviles sin cambiar de biblioteca
Ayuda a mantener un estilo de marca uniforme antes de exportar SVG ligeros
Ver en Amazon →
La forma de insertar un icono también determina cuánto control tienes sobre el resultado. El selector del editor o la biblioteca de iconos de Elementor es la vía más rápida para contenidos corrientes, pero normalmente queda ligada a los recursos que carga el constructor. Un shortcode de un plugin simplifica la edición para usuarios no técnicos, aunque puede activar CSS, JavaScript o una fuente iconográfica global. Para un icono aislado, insertar SVG inline en un bloque HTML permite ajustar fill, stroke, tamaño y atributos ARIA sin depender de otra biblioteca.
Si se usa una clase CSS, como icono-buscar, comprueba en DevTools que la hoja de estilos y la fuente asociada se cargan solo donde esa clase aparece.
✉
¿Quieres más información? Escríbenos y te orientamos
Lleva iconos de Figma a WordPress sin duplicar
Exporta una colección SVG optimizada desde Figma y úsala localmente en WordPress sin cargar de nuevo una biblioteca equivalente.
Oculta los iconos decorativos
Un icono decorativo, como una flecha junto a “Ver servicio”, debe llevar aria-hidden="true" cuando el texto cercano ya explica su significado. No uses textos genéricos como “icono de flecha”.
Exporta y carga los iconos
Flujo ligero de Figma a WordPress
1. Diseña
→
2. Exporta
→
3. Carga
→
4. Mide
Evita conflictos y audita antes de instalar
Comprueba actualización, compatibilidad y archivos añadidos antes de instalar cualquier plugin de iconos.
Haz una prueba antes y después
Mide la misma URL con Lighthouse o PageSpeed Insights antes y después de instalar el plugin. En Chrome DevTools, filtra por font , css y svg : dos archivos de Font Awesome o Google Material Icons indican recursos duplicados.
Revisa licencia y compatibilidad
No hace falta instalar un plugin de iconos si tu tema, Gutenberg o el constructor visual ya incluye los símbolos que necesitas y permite insertarlos sin cargar recursos extra. Tampoco es prioritario si tu web apenas usa elementos visuales o el diseño ya está cerrado.
Dudas habituales
¿Cómo añado iconos en WordPress sin un plugin?
Puedes añadir iconos desde Gutenberg, tu tema o Elementor si ya incluyen el símbolo que necesitas. Para un icono propio, sube un SVG limpio desde una fuente fiable y prueba el resultado en móvil.
¿Qué es mejor, SVG o Font Awesome?
SVG suele ser mejor para entre 1 y 10 iconos personalizados o aislados. Font Awesome encaja si tu tema ya lo carga o si generas un subconjunto con los iconos exactos.
¿Un CDN de iconos afecta al RGPD?
Un CDN externo puede comunicar la IP del visitante al proveedor de la biblioteca. Alojar los iconos localmente reduce esa transferencia y te da más control sobre privacidad y disponibilidad.
¿Cómo oculto un icono decorativo a lectores de pantalla?
Un icono decorativo debe incluir aria-hidden="true" cuando el texto cercano ya explica su significado. No lo ocultes si es el único elemento que describe una acción.
¿Qué etiqueta lleva un botón con una lupa?
Un botón de búsqueda sin texto debe incluir aria-label="Buscar". Esa etiqueta permite que los lectores de pantalla anuncien una acción comprensible.
¿Cómo sé si un plugin de iconos ralentiza mi web?
Mide la misma URL con Lighthouse o PageSpeed Insights antes y después de instalarlo. Revisa si suben las solicitudes HTTP, el CSS no utilizado o las fuentes web cargadas.
✉
¿Quieres más información? Escríbenos y te orientamos
Qué opción instalar para no cargar de más
Aprovecha primero la biblioteca del tema o constructor y usa SVG locales para pocos iconos; si necesitas una colección amplia, crea un subconjunto con Fontello.
Lo esencial: Usa iconos nativos o SVG locales cuando solo necesites unos pocos símbolos. Mide peso, solicitudes HTTP, CSS no usado y fuentes antes y después de añadir un plugin. Aloja bibliotecas localmente cuando puedas para reducir dependencia de CDN y exposición de datos. Añade aria-hidden a iconos decorativos y aria-label a botones sin texto visible.
Lecturas adicionales
Si quieres ampliar información sobre este tema, estas fuentes pueden interesarte:
